Heim > Artikel > Web-Frontend > Einführung in die Hallo-Welt von Three.j und wie man Linien zeichnet

Einführung in die Hallo-Welt von Three.j und wie man Linien zeichnet

巴扎黑Original: 2017-09-26 09:39:191470Durchsuche

Dieser Artikel führt Sie hauptsächlich in die relevanten Informationen zu Hello World ein, um mit Three.js zu beginnen und wie man Linien zeichnet. Der Artikel stellt es ausführlich anhand von Beispielcode vor. Es hat einen gewissen Referenz-Lernwert für jedermanns Studium oder Arbeit . Es wird benötigt Freunde, bitte folgen Sie dem Herausgeber, um gemeinsam zu lernen.

Vorwort

Dieser Artikel ist ein Einführungs-Tutorial zum Erlernen von Three.js. Der Artikel stellt die Implementierung von Hello World und Line anhand von Beispielen vor. Das Folgende ist nicht genug gesagt, werfen wir einen Blick auf die ausführliche Einführung.

Hallo Welt

Zuerst verwenden wir three.js, um einen Würfel vom Typ „Hallo Welt“ zu erstellen.

<!doctype html> 
<html> 
<head> 
 <meta charset="UTF-8"> 
 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 
 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
 <title>Document</title> 
 <script src="build/three.js"></script> 
 <style> 
  body{margin:0;} 
  canvas{width: 100%; height:100%; display: block;} 
 </style> 
</head> 
<body> 
<script> 
 //创建场景 
 var scene = new THREE.Scene(); 
 //设置相机（视野，显示口的宽高比，近裁剪面，远裁剪面） 
 var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); 
 //渲染器 
 var renderer = new THREE.WebGLRenderer(); 
 //设置渲染器的高度和宽度，如果加上第三个值 false，则按场景大小显示，等比例缩放 
 renderer.setSize( window.innerWidth, window.innerHeight,false); 
 //将渲染器添加到html当中 
 document.body.appendChild( renderer.domElement ); 
 
 //盒子模型（BoxGeometry），这是一个包含立方体所有顶点和填充面的对象。 
 var geometry = new THREE.BoxGeometry( 1, 2, 1 ); 
 //使用网孔基础材料（MeshBasicMaterial）进行着色器，这里只绘制了一个绿色 
 var material = new THREE.MeshBasicMaterial( { color: 0x00ffff } ); 
 //使用网孔(Mesh)来承载几何模型 
 var cube = new THREE.Mesh( geometry, material ); 
 //将模型添加到场景当中 
 scene.add( cube ); 
 //将相机沿z轴偏移5 
 camera.position.z = 5; 
 
 //设置一个动画函数 
 var animate = function () { 
  //一秒钟调用60次，也就是以每秒60帧的频率来绘制场景。 
  requestAnimationFrame( animate ); 
 
  //console.log(cube.rotation); 
  //每次调用模型的沿xy轴旋转0.01 
  cube.rotation.x += 0.01; 
  cube.rotation.y += 0.01; 
  //使用渲染器把场景和相机都渲染出来 
  renderer.render(scene, camera); 
 }; 
 
 animate(); 
</script> 
</body> 
</html>

Analyse des obigen Codefalls:

(1) Stellen Sie zunächst die three.js-Bibliothek vor Datei, genau wie beim Importieren von jq.

(2) Szene erstellen (Zeile 17)

(3) Kamera erstellen und Sichtfeld, Anzeigeseitenverhältnis, nahe Schnittebene, ferne Schnittebene festlegen ( Zeile 19)

(4) Erstellen Sie einen Renderer, legen Sie Attribute fest und platzieren Sie ihn im Dom (Zeilen 21-25)

(5) Erstellen Sie ein Würfelmodell. und in die Szene einfügen (28-34)

(6) Position der Kamera festlegen (Zeile 36)

(7) Animationsfunktion festlegen und Verwendung Der Renderer rendert die Szene und die Kamera mit 60 Bildern pro Sekunde, zeigt sie an und wandelt sie in eine Animation um.

Verwenden Sie Three.js, um Linien zu zeichnen

Das Obige ist der Effekt, der nach dem Zeichnen angezeigt wird vollendet.

<!doctype html> 
<html> 
<head> 
 <meta charset="UTF-8"> 
 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 
 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
 <title>Document</title> 
 <script src="build/three.js"></script> 
 <style> 
  body{margin:0;} 
  canvas{width: 100%; height:100%; display: block;} 
 </style> 
</head> 
<body> 
<script> 
 //创建场景 
 var scene = new THREE.Scene(); 
 //设置相机（视野，显示口的宽高比，近裁剪面，远裁剪面） 
 var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); 
 //设置相机的视点 
 camera.position.set(0,0,100); 
 //设置相机的朝向 
 camera.lookAt(new THREE.Vector3(0,0,0)); 
 //渲染器 
 var renderer = new THREE.WebGLRenderer(); 
 //设置渲染器的高度和宽度，如果加上第三个值 false，则按场景大小显示，等比例缩放 
 renderer.setSize( window.innerWidth, window.innerHeight,false); 
 //将渲染器添加到html当中 
 document.body.appendChild( renderer.domElement ); 
 
 //定义线的基本材料，我们可以使用LineBasicMaterial（实线材料）和LineDashedMaterial（虚线材料） 
 var material = new THREE.LineBasicMaterial({color:0x0000ff}); 
 //设置具有几何顶点的几何（Geometry）或缓冲区几何（BufferGeometry）设置顶点位置，看名字就知道了，一个是直接将数据保存在js里面的，另一个是保存在WebGL缓冲区内的，而且肯定保存到WebGL缓冲区内的效率更高 
 var geometry = new THREE.Geometry(); 
 geometry.vertices.push(new THREE.Vector3(-10,0,0)); 
 geometry.vertices.push(new THREE.Vector3(0,10,0)); 
 geometry.vertices.push(new THREE.Vector3(10,0,0)); 
 //使用Line方法将线初始化 
 var line = new THREE.Line(geometry, material); 
 //将线添加到场景 
 scene.add(line); 
 
 //使用渲染器渲染出场景和相机 
 renderer.render(scene, camera); 
</script> 
</body> 
</html>

Im Vergleich zum vorherigen Abschnitt gibt es nur einen Unterschied im Modell. Hier verwenden wir zuerst die Linientexturmethode, um die Linientextur festzulegen, und dann Verwenden Sie geometrische Objekte oder Das Puffergeometrieobjekt generiert Scheitelpunktkoordinaten und ruft schließlich die Line-Methode auf, um die Linie zu zeichnen.

Das obige ist der detaillierte Inhalt vonEinführung in die Hallo-Welt von Three.j und wie man Linien zeichnet. 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：Three.js verwendet das Trackball-Plugin (Trackball), um dem Modell interaktive Funktionen hinzuzufügen. Detaillierte Erläuterung von BeispielenNächster Artikel：Three.js verwendet das Trackball-Plugin (Trackball), um dem Modell interaktive Funktionen hinzuzufügen. Detaillierte Erläuterung von Beispielen

In Verbindung stehende Artikel

Mehr sehen