本文介绍如何完全使用Three.js代码搭建室内场景，避免加载外部模型。通过自定义地板几何、利用ThreeBSP处理墙体开洞、以及组合基础几何体构建门窗家具，实现灵活交互。同时结合TWEEN库与FBX动画模块，实现开门与人物行走效果，为Web端可视化应用提供完整方案。
引言：纯代码建模的必要性
在商城、消防及用电监控等项目开发中，楼层与设备的可视化展示至关重要。以往方案多依赖外部建模工具生成整体模型，再通过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.js方案。但在参考同行使用Three.js完全创建Minicity项目的案例后，重拾信心。最终实现思路为：定位并旋转4条椅腿、构建椅面、定位并旋转2条靠背腿，最后定位并旋转靠背，从而完成椅子创建。因代码细节繁杂且不够优雅，此处未附代码。效果如下：
场景交互与动画实现
7. 开门动画
开门动画功能借助TWEEN库实现。Tween.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.js的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端建立用户交互式的建模方式，旨在以更高标准、更快速度搭建室内场景。
以上就是本文的全部内容，希望对各位的学习有所帮助，也欢迎大家继续支持本站。