创建最简单的demo
- 建立一个空网页
- 在body后面添加引擎接口
<script src="http://threejs.org/build/three.min.js"></script>
- 在网页内, 或者新建一个js用于模块开发, 在这里我使用了扩展js方式开发
扩展开发的好处:- 可扩展灵活
- 可方便压缩
- 不局限于当前网页本身
<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();
上面几句就可以实现在网页上看到一个旋转的方块
animate更新方式有些特殊, 它并不是定时器来控制的, 而是通过请求引擎是否可以再次循环, 貌似是可以在后台切换时优化
这里有对requestAnimationFrame 详细说明
https://www.jianshu.com/p/98e32000b0c9
