three.js如何搭建室内场景

这篇文章给大家分享的是有关three.js如何搭建室内场景的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

创新互联专注于企业营销型网站建设、网站重做改版、城子河网站定制设计、自适应品牌网站建设、H5开发、商城开发、集团公司官网建设、外贸网站制作、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为城子河等各大城市提供网站开发制作服务。

公司做商城、消防、用电等项目，需要实现楼层和设备的可视化，以前都是使用其他建模工具创建的整体模型，再使用three.js的加载器加载到场景中，但是这样的加载存在缺陷，比如不能给模型的元素赋属性、不能单个点击元素、渲染单调等。所以本次参考了一些资料，不使用模型倒入，完全使用three.js搭建场景，代码有些粗燥勿怪。

three.js如何搭建室内场景

1.创建地板

地板是一个类似盒子，有顶部有底部有侧面，但是不一定是规则的盒子，因此我放弃了常用的BoxGeometry的方式，改用顶点+面的形式创建任意多边形地板，已知多边形底部坐标，底部坐标加上高度得到顶部坐标，通过Earcut可以计算出底部和顶部的三角面，侧面的三角面可以直接通过坐标序号得到，由此可以创建一个通用的Geometry。

Floor.prototype.getGeometry = function(points,height){
 var topPoints = [];
 for(var i=0;i效果：
2.创建墙体
墙体我使用了BoxGeometry，墙体上的窗户的洞、门洞，我们可以使用ThreeBSP库中差集函数来进行模型相减来实现。
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效果：
3.门框
在添加门之前，为了更加形象一点，我添加了门框。先使用墙体减去门框的洞，再添加减去门洞的门框，跟前面类似，具体代码不放了。
效果：
4.门、窗、主机、显示屏、桌子
门、窗、主机、显示屏、桌子 我都是使用BoxGeometry的形式，再给相应的面贴纹理，跟前面类似，效果如下：
5.盆栽
盆栽的盆体可以使用CylinderBufferGeometry来创建顶部大于底部的圆台，盆栽的叶子是使用多个PlaneGeometry贴上植物纹理以不同的角度展示，代码如下：
//盆栽
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);
}
效果(很粗燥)：
6.椅子
椅子的模型有点复杂，因为这个差点放弃用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);
}
效果：
在播放动画的同时，我们可以更改人物模型的位置、角度，达到在场景中走动的效果：
会议室建模告一段落，这也是一次探索吧。
感谢各位的阅读！关于“three.js如何搭建室内场景”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！            
            
                            

                当前名称：three.js如何搭建室内场景                

                本文路径：http://azwzsj.com/article/pspshp.html

three.js如何搭建室内场景

其他资讯