Three.js: Fenster zur Größenänderung und Seitenverhältnis

Sie müssen auch die Kamera aktualisieren:

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

function onWindowResize(){

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

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

}

Ich habe ein "div" mit dynamischen Dimensionen, deren Größe geändert wird, wenn die Größe des Fensters geändert wird, ODER wenn andere Elemente auf der Seite ausgeblendet werden. Wenn die Größe dieses "div" -Containers geändert wird, muss die Leinwand die div vollständig ausfüllen. Ich verwende $ ('# center-pane'). Width () und .height (), um das Netzwerk zu initialisieren, wodurch das "center" -Div korrekt mit den gewünschten Abmessungen gefüllt wird, aber ich kann die Größe nicht ändern.

Ich kann theoretisch dieselbe Funktion verwenden, um beide Größenänderungsszenarien zu behandeln. Ich habe anscheinend Probleme mit der camera.updateProjectionMatrix (), wenn die Funktion aufgerufen wird. Ich habe eine Warnung () in der Funktion und sie wird beim Ändern der Größe ausgelöst, sodass ich nur die Kamera und den Renderer ermitteln kann.

Ich muss auch alle Objekte in der Zeichenfläche anklickbar machen, für die ich eine Funktion habe, aber sie muss aktualisiert werden, richtig?
Ich benutze die CombinedCamera. (Ich kann keine Dokumentation finden, nur ein Beispiel);

Dies ist das Layout, das ich mehr oder weniger verwende: http://layout.jquery-dev.net/demos/simple.html
Ich benötige eine Größenänderungsfunktion, um den 'UI-Center-Bereich' dynamisch ohne eine Größenänderungsschaltfläche zu füllen

Vielen Dank,
Brent

Es tut mir leid, aber ich verstehe nicht, wo das Problem liegt. Können Sie versuchen, die Erklärung zu vereinfachen?

Ok, tut mir Leid.

1. Können Sie mich erklären oder mit der CombinedCamera-Dokumentation verknüpfen?
2. Beim Ändern der Größe wird ein Fehler angezeigt, der besagt, dass "keine Methode updateProjectionMatrix ()" vorhanden ist.
3. Wie und was sollte ich bei Größenänderung aktualisieren? (Wie wirkt es sich auch auf sich überschneidende Strahlen bei der Behandlung von Ereignissen aus?)

Brent

1 Können Sie mich erklären oder mit der CombinedCamera-Dokumentation verknüpfen?

Das ist das einzige, was es gibt:
https://github.com/mrdoob/three.js/blob/master/src/extras/cameras/CombinedCamera.js

2 Beim Ändern der Größe wird ein Fehler angezeigt, der besagt, dass "keine Methode updateProjectionMatrix ()" vorhanden ist.

Wenn ich zu http://layout.jquery-dev.net/demos/simple.html gehe und die Größe der Seite ändere, wird ein solcher Fehler nicht angezeigt. Ich sehe nur Uncaught TypeError: Object #<Object> has no method 'getCookie'

3 Wie und was sollte ich bei Größenänderung aktualisieren? (Wie wirkt es sich auch auf sich überschneidende Strahlen bei der Behandlung von Ereignissen aus?)

Sie sollten das Seitenverhältnis der Kamera (Breite / Höhe) aktualisieren. Und legen Sie eine neue Größe für den Renderer fest. Lesen Sie # 988, wie sich die Größenänderung auf Ray auswirkt.

camera.aspect = Breite / Höhe; funktioniert gut, aber camera.updateProjectionMatrix () löst den Fehler aus. Es sollte nichts mit meinem Layout zu tun haben, nur die Funktion onWindowResize ().

Der UI-Layout-Link war zu ihrem Beispiel.

Können Sie Ihren Code oder einen Live-Link teilen? camera definitiv eine updateProjectionMatrix() -Methode.

Hier ist mein Repository:
https://github.com/BioInfoBrent/BIOINFORMATICS
Datei:
BIOINFORMATICS / js / networkMain.js

Das Projekt befindet sich derzeit in Teilen, mitten in einer Umschreibung zur Mitte des Semesters. Das ursprüngliche Projekt wurde von einer großen "SWITCH" -Anweisung gesteuert, die ich gerade abschaffe.

Ich werde die Architektur Ende der Woche fertigstellen, wodurch viel Zeit für die Arbeit an der eigentlichen THREE.js-Seite des Projekts frei wird. Ich werde noch ein paar Fragen haben und in ein oder zwei Tagen meine Fragen klarer stellen und erklären können.

Ah ich sehe. CombinedCamera Kamera hat nicht updateProjectionMatrix() .

@ zz85 : Vielleicht wäre es gut, CombinedCamera eine updateProjectionMatrix() -Methode hinzuzufügen, die updateProjectionMatrix() sowohl für cameraO als auch für cameraP aufruft?

Vielen Dank! Ich werde das überprüfen. Ich habe mein Projekt auf meinem Server.
Adresse: http://cas-biodb.cas.unt.edu/bionet/dev.html
-Die Schaltfläche "Netzwerk" oben ist derzeit der einzige funktionierende Teil.

Vielen Dank!

Folgendes hat es für mich gelöst:

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

Ich benutze Version 66 und rufe an

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

function onWindowResize(){

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

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

}

funktionierte nicht für CombinedCamera . Stattdessen musste ich so etwas tun

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

}

Ich möchte die Größe von Glft in React Three Fiber ändern