椅子的模型有点复杂，因为这个差点放弃用three创建椅子，但看到一个同行完全用three创建的minicity，又有了信心和勇气。于是：4条椅子腿定位+旋转、椅子面、2条靠背腿定位+旋转、靠背定位+旋转，最终创建完成，代码太丑陋就不上了。效果：
7.开门动画
开门动画我使用了TWEEN库，Tween.js是一个包含各种经典动画算法的JS资源，动态改变门在z轴方向上的值。
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(); }
效果：
8.行走动画
行走动画我使用了three的animation模块,导入带动画的fbx模型，关于模型动画的制作很复杂，我们可以在网络上下载。导入动画之后播放动画。
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); }
效果：
在播放动画的同时，我们可以更改人物模型的位置、角度，达到在场景中走动的效果：
会议室建模告一段落，这也是一次探索吧。后续的目标是封装常用的模型、在web中建立用户交互的建模方式，更加标准、快速的搭建室内场景。