Three.js: Janela de redimensionamento e proporção de aspecto

Você também precisa atualizar a câmera:

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

function onWindowResize(){

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

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

}

Eu tenho um "div" que tem dimensões dinâmicas que redimensionam quando a janela é redimensionada OU quando outros elementos dentro da página estão ocultos. Quando esse contêiner "div" é redimensionado, preciso que a tela preencha completamente o div. Estou usando $ ('# center-pane'). Width () e .height () para inicializar a rede, que preenche corretamente o div "center" com as dimensões desejadas, mas não consigo redimensionar.

Posso teoricamente usar a mesma função para lidar com os dois cenários de redimensionamento. Parece que estou tendo problemas com camera.updateProjectionMatrix () quando a função está sendo chamada. Eu tenho um alert () dentro da função e ele dispara ao redimensionar, então eu só consigo descobrir que é a câmera e o renderizador.

Eu também preciso que todos os objetos dentro da tela sejam clicáveis, para o qual eu tenho uma função, mas precisa ser atualizado, correto?
Estou usando a CombinedCamera. (Não consigo encontrar nenhuma documentação sobre ele, apenas um exemplo);

Este é o layout que estou usando, mais ou menos: http://layout.jquery-dev.net/demos/simple.html
Eu preciso de uma função de redimensionamento para preencher o 'ui-center-pane' dinamicamente sem um botão de redimensionamento

Obrigado,
Brent

Desculpe, mas não entendo qual é o problema. Você pode tentar simplificar a explicação?

Ok, desculpe.

1. Você pode me explicar ou ligar para a documentação da CombinedCamera
2. ao redimensionar, ocorre um erro dizendo que "nenhum método updateProjectionMatrix ()"
3. Como e o que devo atualizar ao redimensionar. (Além disso, como isso afeta os raios de interseção para gerenciar eventos)

Brent

1 Você pode me explicar ou ligar para a documentação da CombinedCamera

Essa é a única coisa que existe:
https://github.com/mrdoob/three.js/blob/master/src/extras/cameras/CombinedCamera.js

2 ao redimensionar, ocorre um erro dizendo que "nenhum método updateProjectionMatrix ()"

Quando vou para http://layout.jquery-dev.net/demos/simple.html e redimensiono a página, não vejo esse erro. Só vejo Uncaught TypeError: Object #<Object> has no method 'getCookie'

3 Como e o que devo atualizar ao redimensionar. (Além disso, como isso afeta os raios de interseção para gerenciar eventos)

Você deve atualizar a proporção da câmera (largura / altura). E defina um novo tamanho para o renderizador. Para saber como o redimensionamento afeta o raio, leia # 988.

camera.aspect = largura / altura; funciona bem, mas camera.updateProjectionMatrix () está gerando o erro. Não deve ter nada a ver com meu layout, apenas a função onWindowResize ().

O link UI-Layout era para seu exemplo.

Você pode compartilhar seu código ou um link ativo? camera definitivamente tem um método updateProjectionMatrix() .

Aqui está meu repositório:
https://github.com/BioInfoBrent/BIOINFORMATICS
Arquivo:
BIOINFORMATICS / js / networkMain.js

O projeto está em pedaços agora, no meio de uma reescrita no meio do semestre. O projeto original foi controlado por uma grande instrução "SWITCH", estou no processo de acabar com isso.

Terei a arquitetura completa no final da semana, o que vai liberar muito tempo para trabalhar no lado THREE.js real do projeto. Terei mais algumas perguntas e serei capaz de direcionar e explicar minhas perguntas com mais clareza em um ou dois dias.

Ah, entendo. CombinedCamera câmera não tem updateProjectionMatrix() .

@ zz85 : Talvez seja bom adicionar um método updateProjectionMatrix() a CombinedCamera que chama updateProjectionMatrix() em cameraO e cameraP ?

Obrigado! Vou conferir isto. Tenho meu projeto no meu servidor.
Endereço: http://cas-biodb.cas.unt.edu/bionet/dev.html
-O botão "Rede" na parte superior é atualmente a única parte funcional.

Obrigado!

O seguinte resolveu para mim:

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

Estou usando a versão 66 e chamando

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

function onWindowResize(){

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

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

}

não funcionou para CombinedCamera . Em vez disso, tive que fazer 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 );

}

eu quero redimensionar o glft em react three fibre