公司做商城、消防、用电等项目，需要实现楼层和设备的可视化，以前都是使用其他建模工具创建的整体模型，再使用three.js的加载器加载到场景中，但是这样的加载存在缺陷，比如不能给模型的元素赋属性、不能单个点击元素、渲染单调等。所以本次参考了一些资料，不使用模型倒入，完全使用three.js搭建场景，代码有些粗燥勿怪。
1.创建地板
地板是一个类似盒子，有顶部有底部有侧面，但是不一定是规则的盒子，因此我放弃了常用的boxgeometry的方式，改用顶点+面的形式创建任意多边形地板，已知多边形底部坐标，底部坐标加上高度得到顶部坐标，通过earcut可以计算出底部和顶部的三角面，侧面的三角面可以直接通过坐标序号得到，由此可以创建一个通用的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++){ //侧面生成三角形
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.创建墙体
墙体我使用了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<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.门、窗、主机、显示屏、桌子
门、窗、主机、显示屏、桌子 我都是使用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);
}
效果：
在播放动画的同时，我们可以更改人物模型的位置、角度，达到在场景中走动的效果：
会议室建模告一段落，这也是一次探索吧。后续的目标是封装常用的模型、在web中建立用户交互的建模方式，更加标准、快速的搭建室内场景。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
JavaScript中某一标签内函数用this获取不到当前标签的问题笔记
MSAL.js 2.0发布 支持授权代码流 (authorization code flow)
网友评论