Three.js: Fenêtre sur le redimensionnement et le rapport hauteur / largeur

Vous devez également mettre à jour la caméra:

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

function onWindowResize(){

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

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

}

J'ai un "div" qui a des dimensions dynamiques qui se redimensionnent lorsque la fenêtre est redimensionnée OU lorsque d'autres éléments de la page sont masqués. Lorsque ce conteneur "div" est redimensionné, j'ai besoin du canevas pour remplir complètement le div. J'utilise $ ('# center-pane'). Width () et .height () pour initialiser le réseau, qui remplit correctement le div "central" avec les dimensions souhaitées, mais je ne peux pas redimensionner.

Je peux théoriquement utiliser la même fonction pour gérer les deux scénarios de redimensionnement. Je semble avoir des problèmes avec la camera.updateProjectionMatrix () lorsque la fonction est appelée. J'ai une alerte () dans la fonction et elle se déclenche lors du redimensionnement, donc je ne peux comprendre que la caméra et le rendu.

J'ai également besoin que tous les objets du canevas soient cliquables, ce pour quoi j'ai une fonction, mais elle doit être mise à jour, n'est-ce pas?
J'utilise la CombinedCamera. (Je ne trouve aucune documentation dessus, seulement un exemple);

Voici la mise en page que j'utilise, plus ou moins: http://layout.jquery-dev.net/demos/simple.html
J'ai besoin d'une fonction de redimensionnement pour remplir dynamiquement le 'panneau central de l'interface utilisateur' sans bouton de redimensionnement

Merci,
Brent

Je suis désolé, mais je ne comprends pas quel est le problème, pouvez-vous essayer de simplifier l'explication?

D'accord désolé.

1. Pouvez-vous m'expliquer ou me relier à la documentation de CombinedCamera
2. lors du redimensionnement, des erreurs indiquent qu'il n'y a "aucune méthode updateProjectionMatrix ()"
3. Comment et que dois-je mettre à jour lors du redimensionnement. (En outre, comment cela affecte-t-il les rayons croisés pour la gestion des événements)

Brent

1 Pouvez-vous m'expliquer ou me relier à la documentation de CombinedCamera

C'est la seule chose qui existe:
https://github.com/mrdoob/three.js/blob/master/src/extras/cameras/CombinedCamera.js

2 lors du redimensionnement, des erreurs indiquant qu'il n'y a "aucune méthode updateProjectionMatrix ()"

Lorsque je vais sur http://layout.jquery-dev.net/demos/simple.html et que je redimensionne la page, je ne vois pas une telle erreur. Je ne vois que Uncaught TypeError: Object #<Object> has no method 'getCookie'

3 Comment et que dois-je mettre à jour lors du redimensionnement. (En outre, comment cela affecte-t-il les rayons croisés pour la gestion des événements)

Vous devez mettre à jour le rapport hauteur / largeur de la caméra (largeur / hauteur). Et définissez une nouvelle taille pour le moteur de rendu. En ce qui concerne la façon dont le redimensionnement affecte le rayon, veuillez lire # 988.

camera.aspect = largeur / hauteur; fonctionne bien, mais camera.updateProjectionMatrix () renvoie l'erreur. Cela ne devrait rien avoir à voir avec ma mise en page, juste la fonction onWindowResize ().

Le lien UI-Layout était à leur exemple.

Pouvez-vous partager votre code ou un lien en direct? camera définitivement une méthode updateProjectionMatrix() .

Voici mon référentiel:
https://github.com/BioInfoBrent/BIOINFORMATICS
Fichier:
BIOINFORMATIQUE / js / networkMain.js

Le projet est en morceaux en ce moment, au milieu d'une réécriture de mi-semestre. Le projet original était contrôlé par une grande déclaration "SWITCH", je suis en train de supprimer cela.

J'aurai l'architecture complète à la fin de la semaine, ce qui me libérera beaucoup de temps pour travailler sur le côté THREE.js du projet. J'aurai encore quelques questions et serai en mesure de diriger et d'expliquer mes questions plus clairement dans un jour ou deux.

Ah, je vois. CombinedCamera caméra n'a pas de updateProjectionMatrix() .

@ zz85 : Il serait peut-être bon d'ajouter une méthode updateProjectionMatrix() à CombinedCamera qui appelle updateProjectionMatrix() sur les deux cameraO et cameraP ?

Merci! Je vais vérifier cela. J'ai mon projet sur mon serveur.
Adresse: http://cas-biodb.cas.unt.edu/bionet/dev.html
-Le bouton "Réseau" en haut est actuellement la seule partie fonctionnelle.

Merci!

Ce qui suit a résolu le problème pour moi:

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

J'utilise la version 66 et j'appelle

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

function onWindowResize(){

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

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

}

n'a pas fonctionné pour CombinedCamera . Au lieu de cela, j'ai dû faire quelque chose comme

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

}

je veux redimensionner glft dans react three fiber