創(chuàng)建最簡單的demo
- 建立一個空網(wǎng)頁
- 在body后面添加引擎接口
<script src="http://threejs.org/build/three.min.js"></script>
- 在網(wǎng)頁內(nèi), 或者新建一個js用于模塊開發(fā), 在這里我使用了擴(kuò)展js方式開發(fā)
擴(kuò)展開發(fā)的好處:- 可擴(kuò)展靈活
- 可方便壓縮
- 不局限于當(dāng)前網(wǎng)頁本身
<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)頁上看到一個旋轉(zhuǎn)的方塊
animate更新方式有些特殊, 它并不是定時器來控制的, 而是通過請求引擎是否可以再次循環(huán), 貌似是可以在后臺切換時優(yōu)化
這里有對requestAnimationFrame 詳細(xì)說明
http://www.reibang.com/p/98e32000b0c9
