学习ThreeJS 02 最简单的demo

创建最简单的demo

• 建立一个空网页
• 在body后面添加引擎接口

• 在网页内, 或者新建一个js用于模块开发, 在这里我使用了扩展js方式开发
  扩展开发的好处:
  1. 可扩展灵活
  2. 可方便压缩
  3. 不局限于当前网页本身

• 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();

上面几句就可以实现在网页上看到一个旋转的方块
animate更新方式有些特殊, 它并不是定时器来控制的, 而是通过请求引擎是否可以再次循环, 貌似是可以在后台切换时优化

这里有对requestAnimationFrame 详细说明
https://www.jianshu.com/p/98e32000b0c9