Three.js: 창 크기 조정 및 종횡비

또한 카메라를 업데이트해야합니다.

window.addEventListener( 'resize', onWindowResize, false );

function onWindowResize(){

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize( window.innerWidth, window.innerHeight );

}

창 크기가 조정되거나 페이지 내의 다른 요소가 숨겨 질 때 크기가 조정되는 동적 크기가있는 "div"가 있습니다. 이 "div"컨테이너의 크기가 조정되면 div를 완전히 채우려면 캔버스가 필요합니다. $ ( '# center-pane'). width () 및 .height ()를 사용하여 네트워크를 초기화합니다.이 네트워크는 "center"div를 원하는 치수로 올바르게 채우지 만 크기를 조정할 수 없습니다.

이론적으로 동일한 기능을 사용하여 두 가지 크기 조정 시나리오를 처리 할 수 ​​있습니다. 함수가 호출 될 때 camera.updateProjectionMatrix ()에 문제가있는 것 같습니다. 함수 내에 alert ()가 있고 크기 조정시 실행되므로 카메라와 렌더러 만 파악할 수 있습니다.

또한 캔버스 내의 모든 개체를 클릭 할 수 있어야합니다. 기능이 있지만 업데이트해야합니다. 맞습니까?
CombinedCamera를 사용하고 있습니다. (나는 그것에 대한 어떤 문서도 찾을 수없고 단지 예일 뿐이다);

이것은 내가 사용하고있는 레이아웃입니다. http://layout.jquery-dev.net/demos/simple.html
크기 조정 버튼없이 'ui-center-pane'을 동적으로 채우려면 크기 조정 기능이 필요합니다.

감사,
브렌트

죄송 합니다만, 문제가 무엇인지 모르겠습니다 만, 간단하게 설명해 주시겠습니까?

알았어 미안해.

1. CombinedCamera 문서에 대해 설명하거나 링크 할 수 있습니까?
2. 크기를 조정할 때 "updateProjectionMatrix () 메서드가 없음"이라는 오류 메시지가 표시됩니다.
3. 크기를 조정할 때 어떻게, 무엇을 업데이트해야합니까? (또한 이벤트 처리를 위해 교차 광선에 어떤 영향을 미칩니 까)

브렌트

1 CombinedCamera 문서에 대해 설명하거나 링크 할 수 있습니까?

그것이 유일한 것입니다.
https://github.com/mrdoob/three.js/blob/master/src/extras/cameras/CombinedCamera.js

2 크기 조정시 "updateProjectionMatrix () 메서드가 없음"이라는 오류 메시지가 표시됩니다.

http://layout.jquery-dev.net/demos/simple.html 로 이동하여 페이지 크기를 조정할 때 이러한 오류가 표시되지 않습니다. Uncaught TypeError: Object #<Object> has no method 'getCookie' 만 표시됩니다.

3 크기 조정시 어떻게, 무엇을 업데이트해야합니까? (또한 이벤트 처리를 위해 교차 광선에 어떤 영향을 미칩니 까)

카메라 종횡비 (너비 / 높이)를 업데이트해야합니다. 그리고 렌더러에 새로운 크기를 설정합니다. 크기 조정이 광선에 미치는 영향에 따라 # 988을 읽어보십시오.

camera.aspect = 너비 / 높이; 잘 작동하지만 camera.updateProjectionMatrix ()에서 오류가 발생합니다. 내 레이아웃과 관련이 없어야합니다. onWindowResize () 함수 만 있으면됩니다.

UI-Layout 링크는 그들의 예였습니다.

코드 나 라이브 링크를 공유 할 수 있습니까? camera 에는 확실히 updateProjectionMatrix() 메서드가 있습니다.

내 저장소는 다음과 같습니다.
https://github.com/BioInfoBrent/BIOINFORMATICS
파일:
BIOINFORMATICS / js / networkMain.js

이 프로젝트는 학기 중반 재 작성 중입니다. 원래 프로젝트는 하나의 큰 "SWITCH"성명서에 의해 제어되었으며, 나는 그것을 없애는 과정에 있습니다.

이번 주 말에 아키텍처를 완성하면 프로젝트의 실제 THREE.js 측면에서 작업 할 시간을 많이 확보 할 수 있습니다. 몇 가지 질문이 더 있고 하루나 이틀 안에 질문을 더 명확하게 지시하고 설명 할 수 있습니다.

아, 알겠습니다. CombinedCamera 카메라에 updateProjectionMatrix() 이 (가) 없습니다.

@ zz85 : cameraO 및 cameraP 모두에서 updateProjectionMatrix() 를 호출하는 CombinedCamera updateProjectionMatrix() 메서드를 추가하는 것이 좋을까요?

감사합니다! 나는 이것을 확인할 것이다. 내 서버에 내 프로젝트가 있습니다.
주소 : http://cas-biodb.cas.unt.edu/bionet/dev.html
-현재 상단의 "네트워크"버튼이 유일한 작동 부분입니다.

감사!

다음은 나를 위해 해결했습니다.

camera.aspect = 1;
camera.updateProjectionMatrix ();
renderer.setSize (window.innerWidth, window.innerHeight);

버전 66을 사용하고 있으며

window.addEventListener( 'resize', onWindowResize, false );

function onWindowResize(){

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize( window.innerWidth, window.innerHeight );

}

CombinedCamera 작동하지 않았습니다. 대신 나는 다음과 같은 것을해야했다.

function onWindowResize(){

    if(camera.inPerspectiveMode){
        camera.cameraP.aspect = window.innerWidth / window.innerHeight;
        camera.cameraP.updateProjectionMatrix();
    }
    else{
        camera.cameraO.left = window.innerWidth / - 2;
        camera.cameraO.right = window.innerWidth / 2;
        camera.cameraO.top = window.innerHeight / 2;
        camera.cameraO.bottom = window.innerHeight / - 2;
        camera.cameraO.updateProjectionMatrix();
    }

    renderer.setSize( window.innerWidth, window.innerHeight );

}

3 섬유 반응에서 glft 크기를 조정하고 싶습니다.