快捷導(dǎo)航

Three.js入門(mén)之hello world以及如何繪制線(xiàn)

更新時(shí)間：2017年09月25日 10:15:11 作者：專(zhuān)注前端30年

這篇文章主要給大家介紹了關(guān)于Three.js入門(mén)之hello world以及如何繪制線(xiàn)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。

前言

本文屬于學(xué)習(xí)Three.js 的入門(mén)教程，文中通過(guò)示例介紹了hello world和線(xiàn)的實(shí)現(xiàn)，下面話(huà)不多說(shuō)了，來(lái)一起看看詳細(xì)的介紹吧。

hello world

首先使用我們先用three.js創(chuàng)建一個(gè)立方體的hello world類(lèi)型的案例。

<!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> 
 //創(chuàng)建場(chǎng)景 
 var scene = new THREE.Scene(); 
 //設(shè)置相機(jī)（視野，顯示口的寬高比，近裁剪面，遠(yuǎn)裁剪面） 
 var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); 
 //渲染器 
 var renderer = new THREE.WebGLRenderer(); 
 //設(shè)置渲染器的高度和寬度，如果加上第三個(gè)值 false，則按場(chǎng)景大小顯示，等比例縮放 
 renderer.setSize( window.innerWidth, window.innerHeight,false); 
 //將渲染器添加到html當(dāng)中 
 document.body.appendChild( renderer.domElement ); 
 
 //盒子模型（BoxGeometry），這是一個(gè)包含立方體所有頂點(diǎn)和填充面的對(duì)象。 
 var geometry = new THREE.BoxGeometry( 1, 2, 1 ); 
 //使用網(wǎng)孔基礎(chǔ)材料（MeshBasicMaterial）進(jìn)行著色器，這里只繪制了一個(gè)綠色 
 var material = new THREE.MeshBasicMaterial( { color: 0x00ffff } ); 
 //使用網(wǎng)孔(Mesh)來(lái)承載幾何模型 
 var cube = new THREE.Mesh( geometry, material ); 
 //將模型添加到場(chǎng)景當(dāng)中 
 scene.add( cube ); 
 //將相機(jī)沿z軸偏移5 
 camera.position.z = 5; 
 
 //設(shè)置一個(gè)動(dòng)畫(huà)函數(shù) 
 var animate = function () { 
 //一秒鐘調(diào)用60次，也就是以每秒60幀的頻率來(lái)繪制場(chǎng)景。 
 requestAnimationFrame( animate ); 
 
 //console.log(cube.rotation); 
 //每次調(diào)用模型的沿xy軸旋轉(zhuǎn)0.01 
 cube.rotation.x += 0.01; 
 cube.rotation.y += 0.01; 
 //使用渲染器把場(chǎng)景和相機(jī)都渲染出來(lái) 
 renderer.render(scene, camera); 
 }; 
 
 animate(); 
</script> 
</body> 
</html>

上面的代碼案例解析：

（1）首先引入了three.js的庫(kù)文件，就和引入jq一樣。

（2）創(chuàng)建場(chǎng)景（17行）

（3）創(chuàng)建相機(jī)，并設(shè)置視野，顯示的寬高比，近裁剪面，遠(yuǎn)裁剪面（19行）

（4）創(chuàng)建渲染器，并設(shè)置屬性，放置到dom中（21-25行）

（5）創(chuàng)建一個(gè)立方體模型，并放入到場(chǎng)景（28-34）

（6）設(shè)置相機(jī)的位置（36行）

（7）設(shè)置一個(gè)動(dòng)畫(huà)函數(shù)，并使用渲染器把場(chǎng)景和相機(jī)渲染出來(lái)，每秒60幀，顯示出來(lái)，就變成了動(dòng)畫(huà)。

利用Three.js繪制線(xiàn)

上面就是繪制完成后顯示的效果。

<!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> 
 //創(chuàng)建場(chǎng)景 
 var scene = new THREE.Scene(); 
 //設(shè)置相機(jī)（視野，顯示口的寬高比，近裁剪面，遠(yuǎn)裁剪面） 
 var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); 
 //設(shè)置相機(jī)的視點(diǎn) 
 camera.position.set(0,0,100); 
 //設(shè)置相機(jī)的朝向 
 camera.lookAt(new THREE.Vector3(0,0,0)); 
 //渲染器 
 var renderer = new THREE.WebGLRenderer(); 
 //設(shè)置渲染器的高度和寬度，如果加上第三個(gè)值 false，則按場(chǎng)景大小顯示，等比例縮放 
 renderer.setSize( window.innerWidth, window.innerHeight,false); 
 //將渲染器添加到html當(dāng)中 
 document.body.appendChild( renderer.domElement ); 
 
 //定義線(xiàn)的基本材料，我們可以使用LineBasicMaterial（實(shí)線(xiàn)材料）和LineDashedMaterial（虛線(xiàn)材料） 
 var material = new THREE.LineBasicMaterial({color:0x0000ff}); 
 //設(shè)置具有幾何頂點(diǎn)的幾何（Geometry）或緩沖區(qū)幾何（BufferGeometry）設(shè)置頂點(diǎn)位置，看名字就知道了，一個(gè)是直接將數(shù)據(jù)保存在js里面的，另一個(gè)是保存在WebGL緩沖區(qū)內(nèi)的，而且肯定保存到WebGL緩沖區(qū)內(nèi)的效率更高 
 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方法將線(xiàn)初始化 
 var line = new THREE.Line(geometry, material); 
 //將線(xiàn)添加到場(chǎng)景 
 scene.add(line); 
 
 //使用渲染器渲染出場(chǎng)景和相機(jī) 
 renderer.render(scene, camera); 
</script> 
</body> 
</html>

相對(duì)于上一節(jié)來(lái)說(shuō)，只是模型方面有區(qū)別，這里是先使用線(xiàn)紋理的方法設(shè)置線(xiàn)的紋理，然后使用幾何對(duì)象或者緩沖區(qū)幾何對(duì)象生成頂點(diǎn)坐標(biāo)，最后調(diào)用Line方法繪制出來(lái)線(xiàn)。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章: