Three.js纯代码构建室内场景：从几何体到交互动画

Floor.prototype.getGeometry = function(points,height){
 var topPoints = [];
 for(var i=0;i<points.length;i++){
  var vertice = points[i];
  topPoints.push([vertice[0],vertice[1]+height,vertice[2]]);
 }
 var totalPoints = points.concat(topPoints);
 var vertices =[];   //所有的顶点
 for(var i=0;i<totalPoints.length;i++){
  vertices.push(new THREE.Vector3(totalPoints[i][0],totalPoints[i][1],totalPoints[i][2]))
 }
 var length = points.length;
 var faces = [];
 for(var j=0;j<length;j++){  //侧面生成三角形
  if(j!=length-1){
   faces.push(new THREE.Face3(j,j+1,length+j+1));
   faces.push(new THREE.Face3(length+j+1,length+j,j));
  }else{
   faces.push(new THREE.Face3(j,0,length));
   faces.push(new THREE.Face3(length,length+j,j));
  }
 }
 var data=[];
 for(var i=0;i<length;i++){
  data.push(points[i][0],points[i][2]);
 }
 var triangles = Earcut.triangulate(data);
 if(triangles && triangles.length != 0){
  for(var i=0;i<triangles.length;i++){
   var tlength = triangles.length;
   if(i%3==0 && i < tlength-2){
    faces.push(new THREE.Face3(triangles[i],triangles[i+1],triangles[i+2])); //底部的三角面
    faces.push(new THREE.Face3(triangles[i]+length,triangles[i+1]+length,triangles[i+2]+length)); //顶部的三角面
   }
  }
 }
 var geometry = new THREE.Geometry();
 geometry.vertices = vertices;
 geometry.faces = faces;
 geometry.computeFaceNormals();  //自动计算法向量
 return geometry;
}

Floor.prototype.addWall = function(size,position,rotation,holes){
 var geometry = new THREE.BoxGeometry(size[0], size[1], size[2]);
 var materials = new THREE.MeshLambertMaterial({color: 0xb0cee0,side:THREE.DoubleSide})
 var result = new THREE.Mesh(geometry,materials);
 if(holes){
  result = cube;
  for(var i=0;i<holes.length;i++){
   var totalBSP = new ThreeBSP(result);
   var hole = holes[i];
   var holeGeometry = new THREE.BoxGeometry(hole.size[0], hole.size[1], hole.size[2]);
   var holeCube = new THREE.Mesh( holeGeometry); 
   holeCube.position.x = hole.position[0];
   holeCube.position.y = hole.position[1] + hole.size[1]/2;
   holeCube.position.z = hole.position[2];
   var clipBSP = new ThreeBSP(holeCube);
   var resultBSP = totalBSP.subtract(clipBSP);
   result = resultBSP.toMesh();
  }
  result.material = materials;
 }
 this.container.add(result); //添加填充
}

//盆栽
Floor.prototype.addPlant = function(position,scale){
 var plant = new THREE.Object3D();
 var geometry = new THREE.CylinderBufferGeometry( 0.15, 0.1, 0.4, 22 );
 var material = new THREE.MeshLambertMaterial( {color: 0xffffff} );
 
 var cylinder = new THREE.Mesh( geometry, material );
 cylinder.position.x = 0;
 cylinder.position.y = 0.2;
 cylinder.position.z = 0;
 plant.add( cylinder );
 
 var leafTexture = new THREE.TextureLoader().load('meeting/plant.png');
 var leafMaterial = new THREE.MeshBasicMaterial({map:leafTexture,side:THREE.DoubleSide,transparent:true});
 var geom = new THREE.PlaneGeometry(0.4, 0.8);
 for(var i=0;i<4;i++){
  var leaf = new THREE.Mesh( geom, leafMaterial );
  leaf.position.y = 0.8;
  leaf.rotation.y = -Math.PI/(i+1);
  plant.add(leaf);
 }
 plant.position.x = position[0];
 plant.position.y = position[1];
 plant.position.z = position[2];
 this.container.add(plant);
}

if(status == "close"){
 status = "open";
 var desRotation = Math.PI/2;
 new TWEEN.Tween(door.rotation).to({
  y: desRotation
 }, 10000).easing(TWEEN.Easing.Elastic.Out).onComplete(function(){
 }).start();
}else{
 status = "close";
 new TWEEN.Tween(door.rotation).to({
  y: 0
 }, 10000).easing(TWEEN.Easing.Elastic.Out).onComplete(function(){
 }).start();
}

var Mixers = [];
var animation;
var walkingMan;

var loader = new THREE.FBXLoader();
loader.load('file/walkingman.fbx', function ( object ) { //Samba Dancing.fbx
 object.mixer = new THREE.AnimationMixer( object );
 Mixers.push( object.mixer );            //AnimationMixer
 animation = object.mixer.clipAction( object.animations[ 0 ] );   //AnimationAction AnimationClip
 walkingMan = object;
 walkingMan.scale.x = walkingMan.scale.y = walkingMan.scale.z = 0.8;
 walkingMan.position.x = firstPoint[0];
 walkingMan.position.y = firstPoint[1];
 walkingMan.position.z = firstPoint[2];
 walkingMan.rotation.y = rotation;  //角度 根据当前点和下一个点计算 
 scene.add( walkingMan );
 animation.play();
});

function updateWalkingMan(){
 if ( Mixers.length > 0 ) {
  for ( var i = 0; i < Mixers.length; i ++ ) {
   Mixers[ i ].update(clock.getDelta());//clock.getDelta()
  }
 }
}

function render() {
 updateWalkingMan();
 requestAnimationFrame(render);
 renderer.render(scene, camera);
}