three.js搭建室内场景教程


Posted in Javascript onDecember 30, 2018

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

效果:

three.js搭建室内场景教程

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); //添加填充
}

效果:

three.js搭建室内场景教程

3.门框

在添加门之前,为了更加形象一点,我添加了门框。先使用墙体减去门框的洞,再添加减去门洞的门框,跟前面类似,具体代码不放了。

效果:

three.js搭建室内场景教程

4.门、窗、主机、显示屏、桌子

门、窗、主机、显示屏、桌子 我都是使用BoxGeometry的形式,再给相应的面贴纹理,跟前面类似,效果如下:

three.js搭建室内场景教程

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);
}

效果(很粗燥):

three.js搭建室内场景教程

6.椅子

椅子的模型有点复杂,因为这个差点放弃用three创建椅子,但看到一个同行完全用three创建的minicity,又有了信心和勇气。于是:4条椅子腿定位+旋转、椅子面、2条靠背腿定位+旋转、靠背定位+旋转,最终创建完成,代码太丑陋就不上了。效果:

three.js搭建室内场景教程

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();
}

效果:

three.js搭建室内场景教程

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搭建室内场景教程

会议室建模告一段落,这也是一次探索吧。后续的目标是封装常用的模型、在web中建立用户交互的建模方式,更加标准、快速的搭建室内场景。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
异步JavaScript编程中的Promise使用方法
Jul 28 Javascript
jquery背景跟随鼠标滑动导航
Nov 20 Javascript
一道关于JavaScript变量作用域的面试题
Mar 08 Javascript
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
Apr 01 Javascript
Extjs实现下拉菜单效果
Apr 01 Javascript
去除字符串左右两边的空格(实现代码)
May 12 Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
Jun 21 Javascript
axios拦截设置和错误处理方法
Mar 05 Javascript
AngularJS中的作用域实例分析
May 16 Javascript
vue模式history下在iis中配置流程
Apr 17 Javascript
小程序使用分包的示例代码
Mar 23 Javascript
vue开发中遇到的问题总结
Apr 07 Javascript
Three.JS实现三维场景
Dec 30 #Javascript
Three.js实现简单3D房间布局
Dec 30 #Javascript
JavaScript数组特性与实践应用深入详解
Dec 30 #Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
Dec 30 #Javascript
微信小程序使用setData修改数组中单个对象的方法分析
Dec 30 #Javascript
微信小程序提交form操作示例
Dec 30 #Javascript
bootstrap下拉分页样式 带跳转页码
Dec 29 #Javascript
You might like
ThinkPHP字符串函数及常用函数汇总
2014/07/18 PHP
微信公众平台开发之天气预报功能
2015/08/31 PHP
详解Yii2 定制表单输入字段的标签和样式
2017/01/04 PHP
php图像验证码生成代码
2017/06/08 PHP
如何用javascript控制上传文件的大小
2006/10/26 Javascript
jQuery Select(单选) 模拟插件 V1.3.62 改进版
2010/07/17 Javascript
jquery实现兼容浏览器的图片上传本地预览功能
2013/10/14 Javascript
JQuery做的一个简单的点灯游戏分享
2014/07/16 Javascript
Jquery实现鼠标移动放大图片功能实例
2015/03/25 Javascript
javascript实时显示当天日期的方法
2015/05/20 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
2016/01/06 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
2016/04/17 Javascript
关于javascript的一些知识以及循环详解
2016/09/12 Javascript
JavaScript交换两个变量值的七种解决方案
2016/12/01 Javascript
js实现定时进度条完成后切换图片
2017/01/04 Javascript
利用原生js实现html5小游戏之打砖块(附源码)
2018/01/03 Javascript
JS逻辑运算符短路操作实例分析
2018/07/09 Javascript
微信小程序调用摄像头隐藏式拍照功能
2018/08/22 Javascript
vue-cli项目无法用本机IP访问的解决方法
2018/09/20 Javascript
vue中v-text / v-html使用实例代码详解
2019/04/02 Javascript
redux.js详解及基本使用
2019/05/24 Javascript
python中的协程深入理解
2019/06/10 Python
详解python 内存优化
2020/08/17 Python
Python Map 函数的使用
2020/08/28 Python
python定时截屏实现
2020/11/02 Python
找到您丢失的钥匙、钱包和手机:Tile
2017/05/19 全球购物
思想品德自我鉴定
2013/10/12 职场文书
计算机应用与科学个人的自我评价
2013/11/15 职场文书
募捐倡议书
2014/04/14 职场文书
市级三好学生评语
2014/12/29 职场文书
专家推荐信怎么写
2015/03/25 职场文书
教师岗位职责范本
2015/04/02 职场文书
被告代理词范文
2015/05/25 职场文书
浅谈什么是SpringBoot异常处理自动配置的原理
2021/06/21 Java/Android
JS数组去重详情
2021/11/07 Javascript
Python进程池与进程锁之语法学习
2022/04/11 Python