three.js搭建室內(nèi)場景教程
公司做商城、消防、用電等項目，需要實現(xiàn)樓層和設(shè)備的可視化，以前都是使用其他建模工具創(chuàng)建的整體模型，再使用three.js的加載器加載到場景中，但是這樣的加載存在缺陷，比如不能給模型的元素賦屬性、不能單個點擊元素、渲染單調(diào)等。所以本次參考了一些資料，不使用模型倒入，完全使用three.js搭建場景，代碼有些粗燥勿怪。
1.創(chuàng)建地板
地板是一個類似盒子，有頂部有底部有側(cè)面，但是不一定是規(guī)則的盒子，因此我放棄了常用的BoxGeometry的方式，改用頂點+面的形式創(chuàng)建任意多邊形地板，已知多邊形底部坐標(biāo)，底部坐標(biāo)加上高度得到頂部坐標(biāo)，通過Earcut可以計算出底部和頂部的三角面，側(cè)面的三角面可以直接通過坐標(biāo)序號得到，由此可以創(chuàng)建一個通用的Geometry。
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++){ //側(cè)面生成三角形
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;
}
效果：
2.創(chuàng)建墻體
墻體我使用了BoxGeometry，墻體上的窗戶的洞、門洞，我們可以使用ThreeBSP庫中差集函數(shù)來進(jìn)行模型相減來實現(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<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); //添加填充
}
效果：
3.門框
在添加門之前，為了更加形象一點，我添加了門框。先使用墻體減去門框的洞，再添加減去門洞的門框，跟前面類似，具體代碼不放了。
效果：
4.門、窗、主機(jī)、顯示屏、桌子
門、窗、主機(jī)、顯示屏、桌子 我都是使用BoxGeometry的形式，再給相應(yīng)的面貼紋理，跟前面類似，效果如下：
5.盆栽
盆栽的盆體可以使用CylinderBufferGeometry來創(chuàng)建頂部大于底部的圓臺，盆栽的葉子是使用多個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.椅子
椅子的模型有點復(fù)雜，因為這個差點放棄用three創(chuàng)建椅子，但看到一個同行完全用three創(chuàng)建的minicity，又有了信心和勇氣。于是：4條椅子腿定位+旋轉(zhuǎn)、椅子面、2條靠背腿定位+旋轉(zhuǎn)、靠背定位+旋轉(zhuǎn)，最終創(chuàng)建完成，代碼太丑陋就不上了。效果：
7.開門動畫
開門動畫我使用了TWEEN庫，Tween.js是一個包含各種經(jīng)典動畫算法的JS資源，動態(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.行走動畫
行走動畫我使用了three的animation模塊,導(dǎo)入帶動畫的fbx模型，關(guān)于模型動畫的制作很復(fù)雜，我們可以在網(wǎng)絡(luò)上下載。導(dǎo)入動畫之后播放動畫。
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)前點和下一個點計算
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á)到在場景中走動的效果：
會議室建模告一段落，這也是一次探索吧。后續(xù)的目標(biāo)是封裝常用的模型、在web中建立用戶交互的建模方式，更加標(biāo)準(zhǔn)、快速的搭建室內(nèi)場景。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Javascript 繪制 sin 曲線過程,需要的朋友可以參考下2014-08-08
對動態(tài)加載腳本，需要重點關(guān)注的一個問題是，所動態(tài)加載的JS腳本的接口依賴問題。2011-01-01
這篇文章主要介紹了JavaScript實現(xiàn)按Ctrl鍵打開新頁面的例子,本文方法適用HTML5環(huán)境中,需要的朋友可以參考下2014-09-09
HBuilderX開發(fā)一個簡單的微信小程序的實現(xiàn)步驟
本文主要介紹了HBuilderX開發(fā)一個簡單的微信小程序的實現(xiàn)步驟，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
JavaScript設(shè)計模式--簡單工廠模式實例分析【XHR工廠案例】
這篇文章主要介紹了JavaScript設(shè)計模式--簡單工廠模式,結(jié)合實例形式分析了JavaScript設(shè)計模式中簡單工廠模式原理與XHR工廠應(yīng)用案例,需要的朋友可以參考下2020-05-05
這篇文章主要為大家詳細(xì)介紹了Auto.js自動收取自己和好友螞蟻森林能量腳本，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-06-06
js項目中雙向數(shù)據(jù)綁定的簡單實現(xiàn)方法
雙向數(shù)據(jù)綁定指的就是，綁定對象屬性的改變到用戶界面的變化的能力,反之亦然,下面這篇文章主要給大家介紹了關(guān)于js項目中雙向數(shù)據(jù)綁定的簡單實現(xiàn)方法,需要的朋友可以參考下2021-08-08
原生JavaScript和Vue實現(xiàn)從百度地圖抓取經(jīng)緯度
在前端開發(fā)中,使用百度地圖 API 來獲取用戶的經(jīng)緯度是一種常見需求,本文提供了使用原生 JavaScript 和 Vue.js 實現(xiàn)從百度地圖抓取經(jīng)緯度的詳細(xì)示例,需要的可以了解下2024-11-11
這篇文章主要介紹了js實現(xiàn)磁性吸附的示例，幫助大家更好的制作js特效，美化自己的網(wǎng)頁，感興趣的朋友可以了解下2020-10-10
JavaScript運(yùn)行過程中的“預(yù)編譯階段”和“執(zhí)行階段”
這篇文章主要介紹了JavaScript運(yùn)行過程中的“預(yù)編譯階段”和“執(zhí)行階段”的相關(guān)資料,需要的朋友可以參考下2015-12-12