Heim > Artikel > Web-Frontend > Three.js implementiert „Hello World“ und die Methode zum Zeichnen von Linien

Three.js implementiert „Hello World“ und die Methode zum Zeichnen von Linien

小云云Original: 2018-02-01 13:33:241402Durchsuche

Dieser Artikel stellt Ihnen hauptsächlich die relevanten Informationen über „Hello World“ für den Einstieg in Three.js vor und zeigt Ihnen, wie Sie Linien zeichnen. Der Artikel stellt es anhand von Beispielcodes ausführlich vor . Ich hoffe, es kann jedem helfen.

Hallo Welt

Zuerst verwenden wir three.js, um einen Fall vom Typ „Würfel 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) Führen Sie zunächst die Bibliotheksdatei three.js ein, genau wie die Einführung 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 zum Zeichnen von Linien

Das Obige ist der Effekt, der nach Abschluss der Zeichnung angezeigt wird.

<!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 Textur der Linie festzulegen, und verwenden dann ein geometrisches Objekt oder ein geometrisches Pufferobjekt um die Scheitelpunktkoordinaten zu generieren und schließlich die Line-Methode aufzurufen, um die Linie zu zeichnen.

Verwandte Empfehlungen:

Detaillierte Einführung in HTML5 Canvas-Codebeispiele für grundlegende Zeichenliniensegmente

Das obige ist der detaillierte Inhalt vonThree.js implementiert „Hello World“ und die Methode zum Zeichnen von Linien. 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, um die interaktive Funktion des Modells zu erhöhenNächster Artikel：Three.js verwendet das Trackball-Plugin, um die interaktive Funktion des Modells zu erhöhen

In Verbindung stehende Artikel

Mehr sehen