Three.js入門之hello world以及如何繪制線
更新時間：2017年09月25日 10:15:11 作者：專注前端30年
這篇文章主要給大家介紹了關于Three.js入門之hello world以及如何繪制線的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。
前言
本文屬于學習Three.js 的入門教程，文中通過示例介紹了hello world和線的實現(xiàn)，下面話不多說了，來一起看看詳細的介紹吧。
hello world
首先使用我們先用three.js創(chuàng)建一個立方體的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>
//創(chuàng)建場景
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 );
//使用網(wǎng)孔基礎材料（MeshBasicMaterial）進行著色器，這里只繪制了一個綠色
var material = new THREE.MeshBasicMaterial( { color: 0x00ffff } );
//使用網(wǎng)孔(Mesh)來承載幾何模型
var cube = new THREE.Mesh( geometry, material );
//將模型添加到場景當中
scene.add( cube );
//將相機沿z軸偏移5
camera.position.z = 5;
//設置一個動畫函數(shù)
var animate = function () {
//一秒鐘調(diào)用60次，也就是以每秒60幀的頻率來繪制場景。
requestAnimationFrame( animate );
//console.log(cube.rotation);
//每次調(diào)用模型的沿xy軸旋轉(zhuǎn)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）創(chuàng)建場景（17行）
（3）創(chuàng)建相機，并設置視野，顯示的寬高比，近裁剪面，遠裁剪面（19行）
（4）創(chuàng)建渲染器，并設置屬性，放置到dom中（21-25行）
（5）創(chuàng)建一個立方體模型，并放入到場景（28-34）
（6）設置相機的位置（36行）
（7）設置一個動畫函數(shù)，并使用渲染器把場景和相機渲染出來，每秒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>
//創(chuàng)建場景
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）或緩沖區(qū)幾何（BufferGeometry）設置頂點位置，看名字就知道了，一個是直接將數(shù)據(jù)保存在js里面的，另一個是保存在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方法將線初始化
var line = new THREE.Line(geometry, material);
//將線添加到場景
scene.add(line);
//使用渲染器渲染出場景和相機
renderer.render(scene, camera);
</script>
</body>
</html>
相對于上一節(jié)來說，只是模型方面有區(qū)別，這里是先使用線紋理的方法設置線的紋理，然后使用幾何對象或者緩沖區(qū)幾何對象生成頂點坐標，最后調(diào)用Line方法繪制出來線。
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關文章
在實際項目中，進度條的用處還是非常大的。這篇文章主要是要介紹幾種制作進度條的方法。通過學習，你也能制作屬于自己的進度條了。2009-05-05
js正則表達式最長匹配(貪婪匹配)和最短匹配(懶惰匹配)用法分析
這篇文章主要介紹了js正則表達式最長匹配(貪婪匹配)和最短匹配(懶惰匹配)用法,結(jié)合實例形式分析了貪婪匹配與懶惰匹配的具體用法與相關注意事項,需要的朋友可以參考下2016-12-12
JavaScript實現(xiàn)動態(tài)生成表格案例詳解
本文主要介紹了通過JavaScript實現(xiàn)一個動態(tài)添加表格的案例，當點擊添加按鈕時，可以彈出一個表單，然后將輸入的內(nèi)容添加到表格中，也可以將表格中的整行內(nèi)容清除。感興趣的可以學習一下2021-12-12
使用JavaScript實現(xiàn)node.js中的path.join方法
Node.JS中的 path.join 非常方便，能直接按相對或絕對合并路徑，有時侯前端也需要這種方法，如何實現(xiàn)呢？感興趣的朋友跟隨腳本之家小編一起看看吧2018-08-08
這篇文章主要介紹了JavaScript 實現(xiàn)下雪特效的示例代碼，幫助大家利用JavaScript制作特效，感興趣的朋友可以了解下2020-09-09
基于JavaScript實現(xiàn)一個簡單的事件觸發(fā)器
這篇文章主要為大家詳細介紹了如何使用JavaScript實現(xiàn)一個簡單的事件觸發(fā)器,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-01-01
這篇文章主要為大家詳細介紹了JS實現(xiàn)簡單打磚塊彈球小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
淺析JavaScript的幾種Math函數(shù),random(),ceil(),round(),floor()
本文主要對JavaScript的幾種Math函數(shù),random(),ceil(),round(),floor()的作用進行簡要解析，具有很好的參考價值，需要的朋友一起來看下吧2016-12-12
輸入自動提示搜索提示功能的javascript:sugggestion.js
該js文件中的代碼實現(xiàn)了[輸入自動搜索提示]功能,如百度、google搜索框中輸入一些字符會以下拉列表形式給出一些提示，提高了用戶體驗2013-09-09
這篇文章主要為大家詳細介紹了bootstrapTable實現(xiàn)合并相同行，fastadmin框架同樣使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07