three.js第一个实例，运动的立方体

1.three.js在使用之前要先创建一个场景，一个画布，一个相机，

2.样式中

body{

margin:0;

padding:0;

}

canvas{

width:100%;

height:100%;

}

3.把下面代码写在你的script标签里面，

// 创建一个场景，一个画布，一个相机

var scene=new THREE.Scene();

va rcamera=new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);

var renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth/2,window.innerHeight/2);

document.body.appendChild(renderer.domElement);

// 具体实例(立方体)

vargeometry=newTHREE.BoxGeometry(1,1,1);

varmaterial=newTHREE.MeshBasicMaterial({color:0x00ff00});

varcube=newTHREE.Mesh(geometry,material);

scene.add(cube);

camera.position.z=5;

// 渲染

functionrender() {

requestAnimationFrame(render);

cube.rotation.x+=0.1;

cube.rotation.y+=0.1;

renderer.render(scene,camera);

}

render();

4.运行一个运动的立方体就成了

5.代码截图

Document