Three.js: Ventana sobre cambio de tamaño y relación de aspecto

También necesita actualizar la cámara:

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

function onWindowResize(){

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

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

}

Tengo un "div" que tiene dimensiones dinámicas que cambian de tamaño cuando se cambia el tamaño de la ventana O cuando otros elementos dentro de la página están ocultos. Cuando se cambia el tamaño de este contenedor "div", necesito que el lienzo llene completamente el div. Estoy usando $ ('# center-pane'). Width () y .height () para inicializar la red, que llena correctamente el div "center" con las dimensiones deseadas, pero no puedo cambiar el tamaño.

En teoría, puedo usar la misma función para manejar ambos escenarios de cambio de tamaño. Parece que tengo problemas con camera.updateProjectionMatrix () cuando se llama a la función. Tengo una alerta () dentro de la función y se activa al cambiar el tamaño, por lo que solo puedo imaginar que es la cámara y el renderizador.

También necesito que se pueda hacer clic en todos los objetos dentro del lienzo, para lo cual tengo una función, pero debe actualizarse, ¿correcto?
Estoy usando CombinedCamera. (No puedo encontrar ninguna documentación al respecto, solo un ejemplo);

Este es el diseño que estoy usando, más o menos: http://layout.jquery-dev.net/demos/simple.html
Necesito una función de cambio de tamaño para llenar el 'panel central de interfaz de usuario' dinámicamente sin un botón de cambio de tamaño

Gracias,
Brent

Lo siento, pero no entiendo cuál es el problema, ¿puedes intentar simplificar la explicación?

OK lo siento.

1. ¿Puede explicarme o vincularme a la documentación de CombinedCamera?
2. al cambiar el tamaño, se produce un error que dice que "no hay método updateProjectionMatrix ()"
3. ¿Cómo y qué debo actualizar al cambiar el tamaño? (Además, ¿cómo afecta a los rayos que se cruzan para manejar eventos?)

Brent

1 ¿Puede explicarme o vincularme a la documentación de CombinedCamera

Eso es lo único que hay:
https://github.com/mrdoob/three.js/blob/master/src/extras/cameras/CombinedCamera.js

2 al cambiar el tamaño, se produce un error que indica que "no hay método updateProjectionMatrix ()"

Cuando voy a http://layout.jquery-dev.net/demos/simple.html y cambio el tamaño de la página, no veo ese error. Solo veo Uncaught TypeError: Object #<Object> has no method 'getCookie'

3 Cómo, y qué debo actualizar al cambiar el tamaño. (Además, ¿cómo afecta a los rayos que se cruzan para manejar eventos?)

Debe actualizar la relación de aspecto de la cámara (ancho / alto). Y establezca un nuevo tamaño para el renderizador. Según cómo afecta el cambio de tamaño a Ray, lea el número 988

camera.aspect = ancho / alto; funciona bien, pero camera.updateProjectionMatrix () arroja el error. No debería tener nada que ver con mi diseño, solo la función onWindowResize ().

El enlace UI-Layout fue a su ejemplo.

¿Puedes compartir tu código o un enlace en vivo? camera definitivamente tiene un método updateProjectionMatrix() .

Aquí está mi repositorio:
https://github.com/BioInfoBrent/BIOINFORMATICS
Archivo:
BIOINFORMÁTICA / js / networkMain.js

El proyecto está en pedazos en este momento, en medio de una reescritura a mitad de semestre. El proyecto original estaba controlado por una gran declaración "SWITCH", estoy en el proceso de acabar con eso.

Tendré la arquitectura completa al final de la semana, lo que liberará mucho tiempo para trabajar en el lado real de THREE.js del proyecto. Tendré algunas preguntas más y podré dirigir y explicar mis preguntas con más claridad en uno o dos días.

Ah, ya veo. CombinedCamera cámara updateProjectionMatrix() .

@ zz85 : ¿Quizás sería bueno agregar un método updateProjectionMatrix() a CombinedCamera que llame a updateProjectionMatrix() tanto en cameraO como en cameraP ?

¡Gracias! Comprobaré esto. Tengo mi proyecto en mi servidor.
Dirección: http://cas-biodb.cas.unt.edu/bionet/dev.html
-El botón "Red" en la parte superior es actualmente la única parte que funciona.

¡Gracias!

Lo siguiente me lo resolvió:

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

Estoy usando la versión 66 y llamando

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

function onWindowResize(){

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

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

}

no funcionó por CombinedCamera . En cambio, tuve que hacer algo como

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 );

}

quiero cambiar el tamaño de glft en reaccionar tres fibras