브라우저 변경 시 적응형 코드 공유

때때로 브라우저 페이지를 열고 현재 렌더링된 모델을 표시합니다. 그러나 브라우저의 너비와 높이 변경에 맞게 장면 모델을 설정하지 않으면 문제가 됩니다. 이번 글에서는 브라우저 변경 시 적응하는 Three.js의 방법을 주로 소개합니다. 샘플 코드를 통해 자세히 소개하고 있으니 도움이 되셨으면 좋겠습니다.

브라우저 크기 변경에 따라 장면이 적응되면 브라우저 변경 이벤트인 창 크기 조정 이벤트를 모니터링해야 합니다.

window.onresize = function(){}

또는 addEventListener 이벤트를 사용하세요

window.addEventListener("resize",function(){})

이벤트 청취가 성공한 후 변경 후 트리거되어야 하는 표현식을 작성해야 합니다.

//窗口变动触发的函数 
function onWindowResize() { 
 
 camera.aspect = window.innerWidth / window.innerHeight; 
 camera.updateProjectionMatrix(); 
 renderer.setSize( window.innerWidth, window.innerHeight ); 
 
}

위는 주로 카메라의 비율 및 렌더링 현재 효과는 장치의 비율을 조정하여 달성됩니다.

이전 섹션에서 사용한 코드는 업로드되지 않지만(필요한 경우 여기를 클릭하세요) 샘플 효과 두 개를 업로드합니다.

위는 전체 화면 상태로 표시한 효과이고, 다음은 브라우저를 직접 반으로 변경한 효과입니다. 너비 예제 공유

모바일 웹 페이지 콘텐츠를 적응형으로 만드는 방법

WeChat 애플릿은 이미지 구성 요소 그림 적응형 너비 비율 예제 공유를 구현합니다

위 내용은 브라우저 변경 시 적응형 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!