創(chuàng)建最簡(jiǎn)單的demo

• 建立一個(gè)空網(wǎng)頁(yè)
• 在body后面添加引擎接口

<script src="http://threejs.org/build/three.min.js"></script>

• 在網(wǎng)頁(yè)內(nèi), 或者新建一個(gè)js用于模塊開(kāi)發(fā), 在這里我使用了擴(kuò)展js方式開(kāi)發(fā)
  擴(kuò)展開(kāi)發(fā)的好處:
  1. 可擴(kuò)展靈活
  2. 可方便壓縮
  3. 不局限于當(dāng)前網(wǎng)頁(yè)本身

<script src="src/major.js" ></script>

• major.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, false );
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;

function animate() {
    requestAnimationFrame( animate );
    cube.geometry.rotateX(.01);
    cube.geometry.rotateZ(.02);
    cube.geometry.rotateY(-.015);
    renderer.render( scene, camera );
}
animate();

上面幾句就可以實(shí)現(xiàn)在網(wǎng)頁(yè)上看到一個(gè)旋轉(zhuǎn)的方塊
animate更新方式有些特殊, 它并不是定時(shí)器來(lái)控制的, 而是通過(guò)請(qǐng)求引擎是否可以再次循環(huán), 貌似是可以在后臺(tái)切換時(shí)優(yōu)化

這里有對(duì)requestAnimationFrame 詳細(xì)說(shuō)明
http://www.lxweimin.com/p/98e32000b0c9