Heim > Web-Frontend > js-Tutorial > Adaptives Code-Sharing bei Browserwechsel

Adaptives Code-Sharing bei Browserwechsel

小云云
Freigeben: 2018-01-31 14:57:44
Original
1962 Leute haben es durchsucht

Manchmal öffnen wir die Browserseite und zeigen das aktuell gerenderte Modell an. Wenn Sie das Szenenmodell jedoch nicht so einstellen, dass es sich an die Breiten- und Höhenänderungen des Browsers anpasst, wird es gg sein. Dieser Artikel stellt Ihnen hauptsächlich die Methode von Three.js vor, sich an Browseränderungen anzupassen. Ich hoffe, dass er Ihnen helfen kann.

Wenn sich die Szene an die Änderung der Browsergröße anpasst, müssen Sie das Größenänderungsereignis des Fensters überwachen, bei dem es sich um das Browseränderungsereignis handelt.


window.onresize = function(){}
Nach dem Login kopieren

Oder verwenden Sie das addEventListener-Ereignis


window.addEventListener("resize",function(){})
Nach dem Login kopieren

Nachdem die Ereignisüberwachung erfolgreich war, benötigen Sie Um Änderungen zu schreiben, lautet der Ausdruck, der schließlich ausgelöst werden muss:


//窗口变动触发的函数 
function onWindowResize() { 
 
 camera.aspect = window.innerWidth / window.innerHeight; 
 camera.updateProjectionMatrix(); 
 renderer.setSize( window.innerWidth, window.innerHeight ); 
 
}
Nach dem Login kopieren

Das Obige aktualisiert hauptsächlich die Proportionen der Kamera und die Proportionen des Renderers, um das zu erreichen aktuelle Wirkung.

Der Code wird im vorherigen Abschnitt verwendet, daher werde ich den Code nicht hochladen (wenn Sie ihn benötigen, klicken Sie hier), sondern zwei Beispieleffekte hochladen.


Das Obige ist der Effekt der Anzeige im Vollbildmodus, und das Folgende ist der Effekt, wenn der Browser direkt auf die Hälfte umgestellt wird:


Verwandte Empfehlungen:

Adaptive Höhe basierend auf der Breite reagieren, Beispielfreigabe

Wie man es macht Mobiler Webseiteninhalt selbstadaptiv Adapt

WeChat-Applet implementiert Bildkomponente, Bild, adaptives Breitenverhältnis, Beispielfreigabe

Das obige ist der detaillierte Inhalt vonAdaptives Code-Sharing bei Browserwechsel. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage