Three.js 브 라 우 저 변경 시 적응 하 는 방법

1515 단어 three.js브 라 우 저 적응
머리말
때때로 우 리 는 브 라 우 저의 페이지 를 열 어 현재 렌 더 링 모델 을 보 여 줍 니 다.그러나 장면 모델 을 설정 하지 않 고 브 라 우 저의 너비 와 높이 에 따라 적응 하지 않 으 면 gg 입 니 다.그래서 오늘 은 브 라 우 저의 변동 에 따라 어떻게 적응 하 는 지 에 관 한 한 편 을 추가 로 보충 합 니 다.다음은 더 이상 말 하지 않 겠 습 니 다.상세 한 소 개 를 해 보 겠 습 니 다.
장면 이 브 라 우 저의 크기 변화 에 따라 적응 하려 면 window 의 resize 사건 을 감청 해 야 합 니 다.바로 브 라 우 저 변동 사건 입 니 다.

window.onresize = function(){}
addEventListener 이벤트 사용 하기

window.addEventListener("resize",function(){})
이벤트 감청 이 성공 한 후,변 경 된 표현 식 을 써 야 합 니 다:

//          
function onWindowResize() { 
 
 camera.aspect = window.innerWidth / window.innerHeight; 
 camera.updateProjectionMatrix(); 
 renderer.setSize( window.innerWidth, window.innerHeight ); 
 
}
위 에 서 는 주로 카메라 의 비율 과 렌 더러 의 비율 을 업데이트 하여 현재 의 효 과 를 얻 었 다.
코드 가 사 용 된 지난 절 은 코드 를 올 리 지 않 습 니 다(필요 한 친구여 기 를 클릭 하 세 요.).예제 효 과 를 두 장 올 립 니 다.

위 는 전체 화면 상태 에서 나타 나 는 효과 입 니 다.아래 는 브 라 우 저 를 절반 으로 바 꾸 는 효과 입 니 다.

총결산
이상 은 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 에 게 Three.js 를 배우 거나 사용 하 는 데 어느 정도 참고 학습 가치 가 있 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.
python 에서 array.sum(axis=?)소개
BootStrap 클릭 하여 저장 한 후 모드 상자 가 자동 으로 닫 히 는 사고(모드 상자)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage