前言
本文屬于學習Three.js 的入門教程，文中通過示例介紹了hello world和線的實現，下面話不多說了，來一起看看詳細的介紹吧。
hello world
首先使用我們先用three.js創建一個立方體的hello world類型的案例。
<!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> 上面的代碼案例解析：
（1）首先引入了three.js的庫文件，就和引入jq一樣。
（2）創建場景（17行）
（3）創建相機，并設置視野，顯示的寬高比，近裁剪面，遠裁剪面（19行）
（4）創建渲染器，并設置屬性，放置到dom中（21-25行）
（5）創建一個立方體模型，并放入到場景（28-34）
（6）設置相機的位置（36行）
（7）設置一個動畫函數，并使用渲染器把場景和相機渲染出來，每秒60幀，顯示出來，就變成了動畫。
利用Three.js繪制線
上面就是繪制完成后顯示的效果。
<!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> 相對于上一節來說，只是模型方面有區別，這里是先使用線紋理的方法設置線的紋理，然后使用幾何對象或者緩沖區幾何對象生成頂點坐標，最后調用Line方法繪制出來線。
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對武林網的支持。
新聞熱點
疑難解答
