隨著HTML5的普及赦拘，網(wǎng)頁的表現(xiàn)能力越來越強大，瀏覽器提供了WebGL接口马靠，可以通過調(diào)用對應API進行3D圖形的繪制，Three.js在這些基礎接口之上又做了一層封裝对室。
原文鏈接
特點
Three.js特點：
- 掩蓋了3D渲染細節(jié)
- 面向?qū)ο?/li>
- 功能豐富
- 速度快
- 支持交互
- 內(nèi)置文件支持
- 拓展性強
- 同時支持HTML5隧甚、2D、Canvas
動畫示例
簡介
本文通過three.js中基礎的場景實現(xiàn)簡單了解一下
引入
首先需要引入three.js庫文件峦树，可以下載到本地或直接引用線上地址辣辫。
<script src='http://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js'></script>
創(chuàng)建場景
為了three.js顯示，需要三件事情：場景魁巩、相機和渲染器
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
1急灭、先建立一塊場景。
2谷遂、在three.js中有不同的相機葬馋，上面使用的是PerspectiveCamera
第一個參數(shù)是視野。是在任何給定時刻在顯示器上看到的場景的范圍肾扰，以度為單位畴嘶。
第二個是寬高比。最好使用元素的寬度除以高度集晚，不然圖像看起來很凹陷窗悯。
接下來的兩個屬性是近端和遠端剪切平面。如果對象遠離相機比的數(shù)值偷拔，遠或近于附近將不會被渲染蒋院。
3、接下來是渲染器莲绰。除了使用的WebGLRenderer之外欺旧，three.js還帶有一些其他的功能，通常用于舊版瀏覽器或者因為某些原因沒有WebGL支持的用戶蛤签。
4切端、除了創(chuàng)建渲染器實例外，還需要設置渲染應用程序的大小顷啼√ぴ妫可以設置成瀏覽器窗口的寬度和高度。但對于性能密集型場景钙蒙，可以用setSize設置較小的值茵瀑，如window.innerWidth/2和window.innerHeight/2，使應用程序呈現(xiàn)一半的大小躬厌。
如果想保持應用程序的大小马昨，以較低的分辨率渲染它竞帽，可以通過以false第三個參數(shù)來調(diào)用setSize。例如鸿捧，setSize(window.innerWidth/2,window.innerHeight/2,false)屹篓，將以一半分辨率呈現(xiàn)應用程序。
添加立方體
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
1匙奴、使用BoxGeometry創(chuàng)建一個多維數(shù)據(jù)集堆巧，包含數(shù)據(jù)集中的點(頂點)和面的對象。
2泼菌、接著是進行上色谍肤，three.js中有幾種材料，可以使用MeshBasicMaterial方法哗伯。
3荒揣、創(chuàng)建一個網(wǎng)格對象Mesh，帶入之前創(chuàng)建的幾何體和材質(zhì)焊刹，然后添加到場景中系任。默認情況下，調(diào)用scene.add()虐块，添加的東西會被顯示到坐標（0,0,0）赋除。會導致相機和立方體在彼此內(nèi)部。為了避免這種情況非凌，只需將攝像頭移出一點举农。
渲染場景
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();
利用requestAnimationFrame在刷新屏幕時不斷渲染場景。
動起來
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
在場景刷新時修改一些立方體屬性敞嗡，使其運動颁糟。
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<title>first three.js</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src='http://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js'></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
var animate = function () {
requestAnimationFrame( animate );
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
renderer.render(scene, camera);
};
animate();
</script>
</body>
</html>
總結(jié)
根據(jù)Threejs官方示例簡單了解一下threejs概念和基礎布局場景，通過提供的api可以繪制出有趣的場景喉悴，實現(xiàn)復雜的動畫棱貌。
