suchen

Heim >Web-Frontend >js-Tutorial >Grundlegende Einführung in die Three.js JS-Bibliothek

Grundlegende Einführung in die Three.js JS-Bibliothek

巴扎黑
巴扎黑Original
2017-09-15 09:15:562367Durchsuche

Three.js ist ein WebGL-Framework, das aufgrund seiner Benutzerfreundlichkeit weit verbreitet ist. Im Folgenden erläutert der Herausgeber von Script House die grundlegende Konfigurationsmethode von three.js. Weitere Informationen finden Sie in diesem Artikel 🎜 >

Eröffnungsbemerkung

webGL ermöglicht es uns, 3D-Effekte auf Leinwand zu erzielen. Three.js ist ein WebGL-Framework, das aufgrund seiner Benutzerfreundlichkeit weit verbreitet ist. Wenn Sie WebGL erlernen möchten, ist es eine gute Wahl, diese komplizierten nativen Schnittstellen aufzugeben und mit diesem Framework zu beginnen.

Der Blogger lernt derzeit three.js und stellt fest, dass die relevanten Informationen sehr rar sind und selbst die offizielle API-Dokumentation sehr grob ist. Viele Effekte erfordern, dass Sie den Code langsam eingeben und selbst erkunden. Der Zweck des Schreibens dieses Tutorials besteht also darin, es selbst zusammenzufassen und es mit allen zu teilen. Dieser Artikel ist der erste einer Reihe von Tutorials: Erste Schritte. In diesem Artikel verwende ich eine einfache Demo als Beispiel, um die grundlegende Konfigurationsmethode von three.js zu erläutern. Nach dem Studium dieses Artikels erfahren Sie, wie Sie eine dreidimensionale Grafik im Browser zeichnen!

Vorbereitungsarbeiten

Bevor Sie Code schreiben, müssen Sie zunächst das neueste Three.js-Framework-Paket herunterladen und es in Ihre Three.js-Seite einführen Natürlich gibt es im Dateipaket viele Demos, die jeder lernen kann.

Chrome ist derzeit der beste Browser, der WebGL unterstützt, Firefow ist der zweite und inländische Aoyou und Cheetah können nach dem Testen auch ausgeführt werden. Beginnen Sie mit einem Beispiel!

Zuerst erstellen wir den HTML-Code wie folgt:

Bereiten Sie einen Bereich entsprechend der Größe des Leinwandrahmens für die WebGL-Zeichnung vor. Konkret:

(1) Fügen Sie das p-Element mit der ID „canvas3d“ zum Body-Tag hinzu.

(2) Geben Sie den CSS-Stil von „canvas3d“ im Style-Tag an.

Es ist zu beachten, dass wir kein 5ba626b379994d53f7acf72a64f9b697-Tag schreiben müssen, sondern nur das p definieren müssen, das die Leinwand enthält. Die Leinwand wird dynamisch von three.js generiert! 
<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>lesson1-by-shawn.xie</title>
 <!--引入Three.js-->
 <script src="Three.js"></script>
 <style type="text/css">
 p#canvas-frame{
  border: none;
  cursor: move;
  width: 1400px;
  height: 600px;
  background-color: #EEEEEE;
 }
 </style>
 </head>
 <body>
 <!--盛放canvas的容器-->
 <p id="container"></p>
 </body>
</html>

Beginnen wir mit dem Schreiben des Skripts durch die folgenden fünf Schritte, die auch die Grundschritte von three.js sind:

1 .js Renderer

Der Prozess der Abbildung von Objekten im dreidimensionalen Raum auf eine zweidimensionale Ebene wird als dreidimensionales Rendering bezeichnet. Im Allgemeinen bezeichnen wir die Software, die Rendervorgänge ausführt, als Renderer. Im Einzelnen ist die folgende Verarbeitung erforderlich.

(0) Deklarieren Sie globale Variablen (Objekte);

(1) Ermitteln Sie die Höhe und Breite des Canvas-Rahmens

(2) Erzeugen Sie eine Renderer-Objekt (Attribute: Der Anti-Aliasing-Effekt gilt für Einstellungen);

(3) Geben Sie die Höhe und Breite des Renderers an (entspricht der Leinwandrahmengröße); 4) Hängen Sie das Element [canvas] an das Element [canvas3d] an.

(5) legt die klare Farbe des Renderers fest.

2. Richten Sie die Kamera ein

In OpenGL (WebGL) gibt es eine Möglichkeit, Objekte im dreidimensionalen Raum in zwei zu projizieren -dimensionaler Raum Es gibt zwei Arten von Kameras: perspektivische Projektion und orthographische Projektion. Bei der perspektivischen Projektion handelt es sich um eine Methode, bei der näher am Betrachtungspunkt liegende Objekte größer und weiter entfernte Objekte kleiner dargestellt werden. Dies steht im Einklang mit der Art und Weise, wie wir Objekte im täglichen Leben sehen. Bei der orthografischen Projektion werden Objekte unabhängig von der Entfernung vom Blickpunkt in einer einheitlichen Größe gezeichnet. In Bereichen wie Architektur und Design müssen Objekte aus verschiedenen Winkeln gezeichnet werden, daher wird diese Art der Projektion häufig verwendet. In Three.js können Sie Kameras auch in perspektivischer Projektion und orthografischer Projektion angeben. In diesem Artikel werden die folgenden Schritte zum Einrichten der perspektivischen Projektionsmethode ausgeführt.

(0) Deklarieren Sie globale Variablen (Objekte);

(1) Stellen Sie die Kamera für die perspektivische Projektion ein; 🎜>
(3) Stellen Sie die Oberseite der Kamera auf die „z“-Achsenrichtung ein. 

//开启Three.js渲染器
var renderer;//声明全局变量（对象）
function initThree() {
 width = document.getElementById(&#39;canvas3d&#39;).clientWidth;//获取画布「canvas3d」的宽
 height = document.getElementById(&#39;canvas3d&#39;).clientHeight;//获取画布「canvas3d」的高
 renderer=new THREE.WebGLRenderer({antialias:true});//生成渲染器对象（属性：抗锯齿效果为设置有效）
 renderer.setSize(width, height );//指定渲染器的高宽（和画布框大小一致）
 document.getElementById(&#39;canvas3d&#39;).appendChild(renderer.domElement);//追加 【canvas】 元素到 【canvas3d】 元素中。
 renderer.setClearColorHex(0xFFFFFF, 1.0);//设置canvas背景色(clearColor)
}
(4) Stellen Sie die Mittelkoordinaten des Sichtfelds ein.　　　

3. Stellen Sie die Szene ein

Die Szene ist ein dreidimensionaler Raum. Verwenden Sie die Klasse [Scene], um ein Objekt namens [scene] zu deklarieren.

4. Stellen Sie das Lichtquellenlicht ein


Im dreidimensionalen Raum von OpenGL (WebGL) gibt es zwei Arten von Punktlicht Quellen und Scheinwerfer. Darüber hinaus gibt es als Sonderfall der Punktlichtquelle auch eine parallele Lichtquelle (kabellose Hochleistungslichtquelle). Darüber hinaus können als Parameter der Lichtquelle auch Einstellungen wie [Umgebungslicht] vorgenommen werden. Dementsprechend können in Three.js [Punktlicht], [Spotlicht], [Richtungslicht] und [Umgebungslicht] eingestellt werden. Wie bei OpenGL können in einer Szene mehrere Lichtquellen eingestellt werden. Im Grunde handelt es sich um eine Kombination aus Umgebungslicht und mehreren anderen Lichtquellen. Wenn Sie kein Umgebungslicht einstellen, werden die Flächen, die nicht durch Licht beleuchtet werden, zu dunkel. In diesem Artikel führen wir zunächst die folgenden Schritte aus, um die gerichtete Lichtquelle einzurichten, und fügen dann Umgebungslicht hinzu. 

　 //设置相机
 var camera;
 function initCamera() { 
 camera = new THREE.PerspectiveCamera( 45, width / height , 1 , 5000 );//设置透视投影的相机,默认情况下相机的上方向为Y轴，右方向为X轴，沿着Z轴朝里（视野角：fov 纵横比：aspect 相机离视体积最近的距离：near 相机离视体积最远的距离：far）
 camera.position.x = 0;//设置相机的位置坐标
 camera.position.y = 50;//设置相机的位置坐标
 camera.position.z = 100;//设置相机的位置坐标
 camera.up.x = 0;//设置相机的上为「x」轴方向
 camera.up.y = 1;//设置相机的上为「y」轴方向
 camera.up.z = 0;//设置相机的上为「z」轴方向
 camera.lookAt( {x:0, y:0, z:0 } );//设置视野的中心坐标
 }
(0) Globale Variablen (Objekte) deklarieren

(1) Parallele Lichtquelle einstellen

(2) Lichtquellenvektor festlegen


(3) Lichtquelle hinzufügen Zur Szene gehen

　　//设置场景
 var scene;
 function initScene() { 
 scene = new THREE.Scene();
 }
Hier verwenden wir die Klasse „DirectionalLight“, um ein Objekt namens [light] zu deklarieren, das die gerichtete Lichtquelle darstellt

5. Legen Sie das Objekt fest

   这里，我们声明一个球模型　　　


　　　//设置物体
 var sphere;
 function initObject(){ 
 sphere = new THREE.Mesh(
  new THREE.SphereGeometry(20,20), //width,height,depth
  new THREE.MeshLambertMaterial({color: 0xff0000}) //材质设定
 );
 scene.add(sphere);
 sphere.position.set(0,0,0);
 }

最后，我们写一个主函数执行以上五步：


　　　　　　　　//执行
 function threeStart() {
 initThree();
 initCamera();
 initScene(); 
 initLight();
 initObject();
 renderer.clear(); 
 renderer.render(scene, camera);
 }

这时，测试以上程序，你会发现浏览器窗口中出现了你绘制的球形模型：

总结

以上就是three.js的入门内容，我们核心的五步就是：

1.设置three.js渲染器

2.设置摄像机camera

3.设置场景scene

4.设置光源light

5.设置物体object

可能其中有些设置你还不太清楚，没关系，后面几篇文章会对以上五个主要步骤进行详细的讲解，敬请期待~~

本例完整代码：


<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>lesson1-by-shawn.xie</title>
 <!--引入Three.js-->
 <script src="Three.js"></script>
 <script type="text/javascript">
 //开启Three.js渲染器
 var renderer;//声明全局变量（对象）
 function initThree() {
 width = document.getElementById(&#39;canvas3d&#39;).clientWidth;//获取画布「canvas3d」的宽
 height = document.getElementById(&#39;canvas3d&#39;).clientHeight;//获取画布「canvas3d」的高
 renderer=new THREE.WebGLRenderer({antialias:true});//生成渲染器对象（属性：抗锯齿效果为设置有效）
 renderer.setSize(width, height );//指定渲染器的高宽（和画布框大小一致）
 document.getElementById(&#39;canvas3d&#39;).appendChild(renderer.domElement);//追加 【canvas】 元素到 【canvas3d】 元素中。
 renderer.setClearColorHex(0xFFFFFF, 1.0);//设置canvas背景色(clearColor)
 }
 //设置相机
 var camera;
 function initCamera() { 
 camera = new THREE.PerspectiveCamera( 45, width / height , 1 , 5000 );//设置透视投影的相机,默认情况下相机的上方向为Y轴，右方向为X轴，沿着Z轴朝里（视野角：fov 纵横比：aspect 相机离视体积最近的距离：near 相机离视体积最远的距离：far）
 camera.position.x = 0;//设置相机的位置坐标
 camera.position.y = 50;//设置相机的位置坐标
 camera.position.z = 100;//设置相机的位置坐标
 camera.up.x = 0;//设置相机的上为「x」轴方向
 camera.up.y = 1;//设置相机的上为「y」轴方向
 camera.up.z = 0;//设置相机的上为「z」轴方向
 camera.lookAt( {x:0, y:0, z:0 } );//设置视野的中心坐标
 }
 //设置场景
 var scene;
 function initScene() { 
 scene = new THREE.Scene();
 }
 //设置光源
 var light;
 function initLight() { 
 light = new THREE.DirectionalLight(0xff0000, 1.0, 0);//设置平行光源
 light.position.set( 200, 200, 200 );//设置光源向量
 scene.add(light);// 追加光源到场景
 }
 //设置物体
 var sphere;
 function initObject(){ 
 sphere = new THREE.Mesh(
  new THREE.SphereGeometry(20,20), //width,height,depth
  new THREE.MeshLambertMaterial({color: 0xff0000}) //材质设定
 );
 scene.add(sphere);
 sphere.position.set(0,0,0);
 }
 //执行
 function threeStart() {
 initThree();
 initCamera();
 initScene(); 
 initLight();
 initObject();
 renderer.clear(); 
 renderer.render(scene, camera);
 }
 </script>
 <style type="text/css">
 p#canvas3d{
  border: none;
  cursor: move;
  width: 1400px;
  height: 600px;
  background-color: #EEEEEE;
 }
 </style>
 </head>
 <body onload=&#39;threeStart();&#39;>
 <!--盛放canvas的容器-->
 <p id="canvas3d"></p>
 </body>
</html>

Das obige ist der detaillierte Inhalt vonGrundlegende Einführung in die Three.js JS-Bibliothek. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
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
Vorheriger Artikel：Wie das Fullpage-Plug-in schnell eine Seite mit Umblättereffekt im Vollbildmodus entwickeltNächster Artikel：Wie das Fullpage-Plug-in schnell eine Seite mit Umblättereffekt im Vollbildmodus entwickelt

In Verbindung stehende Artikel

Mehr sehen