利用HTML5构筑物理模拟环境2.26

会飞的鱼

例２：TUTORIAL2.HTML（实现动画）
拷贝&粘贴下面这段javascript代码，看一看效果吧。
var width, height;

var renderer;

function initThree() {

  width = document.getElementById('canvas-frame').clientWidth;

  height = document.getElementById('canvas-frame').clientHeight;

  renderer = new THREE.WebGLRenderer({antialias: ***e});

  renderer.setSize(width, height );

  document.getElementById('canvas-frame').appendChild(renderer.domElement);

  renderer.setClearColorHex(0xFFFFFF, 1.0);

}
var camera;

function initCamera() {

  camera = new THREE.PerspectiveCamera( 45 , width / height , 1 , 10000 );

  camera.position.x = 400;

  camera.position.y = 20;

  camera.position.z = 50;

  camera.up.x = 0;

  camera.up.y = 0;

  camera.up.z = 1;

  camera.lookAt( {x:0, y:0, z:0 } );

}

var scene;

function initScene() {

  scene = new THREE.Scene();

}

var light;

function initLight() {

  light = new THREE.DirectionalLight(0xFF0000, 1.0, 0);

  light.position.set( 100, 100, 200 );

  scene.add(light);

}

var cube = Array();

function initObject(){

  for(var i=0; i<3; i++){

    cube = new THREE.Mesh(

         new THREE.CubeGeometry(50,50,50),                //形状の設定

         new THREE.MeshLambertMaterial({color: 0xff0000}) //材質の設定

    );

    scene.add(cube);

    cube.position.set(0,-100+100*i,0);

  }

}

var t=0;

function loop() {

  t++;

  cube[0].rotation.set( t/100, 0, 0 );

  cube[1].rotation.set( 0, t/100, 0 );

  cube[2].rotation.set( 0, 0, t/100 );

  renderer.clear();

  renderer.render(scene, camera);

  window.requestAnimationFrame(loop);

}

function threeStart() {

  initThree();

  initCamera();

  initScene();

  initLight();

  initObject();

  loop();

}例2的执行结果： 三个立方体分别按照「x」「y」「z」轴进行回转。