這篇文章給大家分享的是有關(guān)three.js如何搭建室內(nèi)場(chǎng)景的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

創(chuàng)新互聯(lián)專注于企業(yè)營(yíng)銷型網(wǎng)站建設(shè)、網(wǎng)站重做改版、城子河網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5開(kāi)發(fā)、商城開(kāi)發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為城子河等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。

公司做商城、消防、用電等項(xiàng)目，需要實(shí)現(xiàn)樓層和設(shè)備的可視化，以前都是使用其他建模工具創(chuàng)建的整體模型，再使用three.js的加載器加載到場(chǎng)景中，但是這樣的加載存在缺陷，比如不能給模型的元素賦屬性、不能單個(gè)點(diǎn)擊元素、渲染單調(diào)等。所以本次參考了一些資料，不使用模型倒入，完全使用three.js搭建場(chǎng)景，代碼有些粗燥勿怪。

1.創(chuàng)建地板

地板是一個(gè)類似盒子，有頂部有底部有側(cè)面，但是不一定是規(guī)則的盒子，因此我放棄了常用的BoxGeometry的方式，改用頂點(diǎn)+面的形式創(chuàng)建任意多邊形地板，已知多邊形底部坐標(biāo)，底部坐標(biāo)加上高度得到頂部坐標(biāo)，通過(guò)Earcut可以計(jì)算出底部和頂部的三角面，側(cè)面的三角面可以直接通過(guò)坐標(biāo)序號(hào)得到，由此可以創(chuàng)建一個(gè)通用的Geometry。

Floor.prototype.getGeometry = function(points,height){
 var topPoints = [];
 for(var i=0;i
效果：
2.創(chuàng)建墻體
墻體我使用了BoxGeometry，墻體上的窗戶的洞、門洞，我們可以使用ThreeBSP庫(kù)中差集函數(shù)來(lái)進(jìn)行模型相減來(lái)實(shí)現(xiàn)。
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.門框
在添加門之前，為了更加形象一點(diǎn)，我添加了門框。先使用墻體減去門框的洞，再添加減去門洞的門框，跟前面類似，具體代碼不放了。
效果：
4.門、窗、主機(jī)、顯示屏、桌子
門、窗、主機(jī)、顯示屏、桌子 我都是使用BoxGeometry的形式，再給相應(yīng)的面貼紋理，跟前面類似，效果如下：
5.盆栽
盆栽的盆體可以使用CylinderBufferGeometry來(lái)創(chuàng)建頂部大于底部的圓臺(tái)，盆栽的葉子是使用多個(gè)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.椅子
椅子的模型有點(diǎn)復(fù)雜，因?yàn)檫@個(gè)差點(diǎn)放棄用three創(chuàng)建椅子，但看到一個(gè)同行完全用three創(chuàng)建的minicity，又有了信心和勇氣。于是：4條椅子腿定位+旋轉(zhuǎn)、椅子面、2條靠背腿定位+旋轉(zhuǎn)、靠背定位+旋轉(zhuǎn)，最終創(chuàng)建完成，代碼太丑陋就不上了。效果：
7.開(kāi)門動(dòng)畫
開(kāi)門動(dòng)畫我使用了TWEEN庫(kù)，Tween.js是一個(gè)包含各種經(jīng)典動(dòng)畫算法的JS資源，動(dòng)態(tài)改變門在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.行走動(dòng)畫
行走動(dòng)畫我使用了three的animation模塊,導(dǎo)入帶動(dòng)畫的fbx模型，關(guān)于模型動(dòng)畫的制作很復(fù)雜，我們可以在網(wǎng)絡(luò)上下載。導(dǎo)入動(dòng)畫之后播放動(dòng)畫。
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;  //角度 根據(jù)當(dāng)前點(diǎn)和下一個(gè)點(diǎn)計(jì)算 
 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);
}
效果：
在播放動(dòng)畫的同時(shí)，我們可以更改人物模型的位置、角度，達(dá)到在場(chǎng)景中走動(dòng)的效果：
會(huì)議室建模告一段落，這也是一次探索吧。
感謝各位的閱讀！關(guān)于“three.js如何搭建室內(nèi)場(chǎng)景”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！
            
            
                        

            新聞名稱：three.js如何搭建室內(nèi)場(chǎng)景            

            網(wǎng)站鏈接：http://weahome.cn/article/pspshp.html