Dieser Artikel führt Sie hauptsächlich in die relevanten Informationen zum Lernen und Erstellen chinesischer Dokumente von Three.js ein. Der Artikel stellt sie anhand von Beispielcodes ausführlich vor. Es hat einen gewissen Referenzlernwert, damit jeder Three.js lernen oder verwenden kann. Freunde, die es brauchen. Lasst uns mit dem untenstehenden Herausgeber lernen.
Was ist Three.js?
Wenn Sie diesen Artikel lesen, haben Sie möglicherweise ein gewisses Verständnis für Three.js. Lassen Sie uns kurz vorstellen, was Three.js ist.
Three.js ist eine Bibliothek, die WebGL macht. 3D-Effekte sind einfach im Browser anwenden. Während sich ein einfacher Cube in rohem WebGL in Hunderte Zeilen Javascript- und Shader-Code verwandeln würde, gibt es zur Einführung drei js. Wir begannen mit dem Aufbau der Szene aus rotierenden Würfeln. Wenn Sie auf Schwierigkeiten stoßen und Hilfe benötigen, finden Sie unten auf der Seite den Quellcode als Referenz.
Speichern Sie den folgenden HTML-Code auf Ihrem Computer, fügen Sie three.js in das js-Verzeichnis ein und öffnen Sie es dann im Browser
Der folgende Code wird vom Skript-Tag heruntergeladen
<html> <head> <meta charset=utf-8> <title>My first three.js app</title> <style> body { margin: 0; } canvas { width: 100%; height: 100% } </style> </head> <body> <script src="js/three.js"></script> <script> // Our Javascript will go here. </script> </body> </html>
Um Three.js für die Anzeige verwenden zu können, benötigen wir drei Elemente: Szene, Kamera, Renderer zum Rendern der Szene von der Kamera.
Nehmen wir uns einen Moment Zeit, um zu erklären, was los ist. Wir haben nun die Szene, die Kamera und den Renderer erstellt.
var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement );
Wir benötigen BoxGeometry, um den Würfel zu erstellen. Dieses Objekt enthält alle Punkte (Eckpunkte) und Füllungen (Flächen) des Würfels. Das besprechen wir später.
var geometry = new THREE.BoxGeometry( 1, 1, 1 ); var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); var cube = new THREE.Mesh( geometry, material ); scene.add( cube ); camera.position.z = 5;
Wenn Sie den obigen Code in die HTML-Datei kopieren, wird nichts auf dem Bildschirm angezeigt. Weil wir die Szene noch nicht gerendert haben. Wir müssen also den Renderer oder die Animationsschleife aufrufen.
Dadurch wird eine Schleife erstellt, in der der Renderer jede Sekunde ein Bild zeichnet. Wenn Sie nicht viel über die Programmierung von Webspielen wissen, könnten Sie sagen: „Warum schreiben wir nicht eine setInterval-Funktion?“ Tatsächlich können wir das, aber requestAnimationFrame hat mehr Vorteile. Der wichtigste Vorteil besteht darin, dass requestAnimationFrame das Rendern anhält, wenn der Browser zu einer anderen Registerkarte wechselt, sodass keine wertvolle Rechenleistung und Akkulaufzeit verschwendet wird.
function animate() { requestAnimationFrame( animate ); renderer.render( scene, camera ); } animate();
Wenn Sie den gerade erstellten Code einfügen, sollten Sie einen grünen Würfel sehen. Lass es drehen, damit es nicht langweilig wird.
cube.rotation.x += 0.01; cube.rotation.y += 0.01;
它会按帧运行(每秒60帧),并赋予立方体优雅的动画。基本上,应用运行时,你想移动或改变任何元素,必须通过动画循环。你当然在此处能调用其他函数,以免animate函数上百行代码结尾。
结果
恭喜!你现在创建好了第一个 three.js 应用。很简单,但总得突破。
完整代码参考如下。琢磨一下并深刻理解其工作机理
<html> <head> <title>My first three.js app</title> <style> body { margin: 0; } canvas { width: 100%; height: 100% } </style> </head> <body> <script src="js/three.js"></script> <script> var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); var geometry = new THREE.BoxGeometry( 1, 1, 1 ); var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); var cube = new THREE.Mesh( geometry, material ); scene.add( cube ); camera.position.z = 5; var animate = function () { requestAnimationFrame( animate ); cube.rotation.x += 0.1; cube.rotation.y += 0.1; renderer.render(scene, camera); }; animate(); </script> </body> </html>
相关推荐:
Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zum Erstellen von Szeneninstanzen mit three.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!