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下的keyCode键码值表
Apr 10 Javascript
JavaScript库 开发规则
Jan 31 Javascript
juqery 学习之五 文档处理 插入
Feb 11 Javascript
javascript中RegExp保留小数点后几位数的方法分享
Aug 13 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
Nov 06 Javascript
javascript实现表格排序 编辑 拖拽 缩放
Jan 02 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
Nov 24 Javascript
原生js实现商品筛选功能
Oct 28 Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
Dec 04 Javascript
JS脚本实现定时到网站上签到/签退功能
Apr 22 Javascript
vue 导航守卫和axios拦截器有哪些区别
Dec 19 Vue.js
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
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
PHP数据库操作面向对象的优点
2006/10/09 PHP
php.ini中文版
2006/10/09 PHP
smtp邮件发送一例
2006/10/09 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
网页常用特效代码整理
2006/06/23 Javascript
求得div 下 img的src地址的js代码
2007/02/28 Javascript
js跨域问题之跨域iframe自适应大小实现代码
2010/07/17 Javascript
《JavaScript高级程序设计》阅读笔记(二) ECMAScript中的原始类型
2012/02/27 Javascript
js克隆对象、数组的常用方法介绍
2013/09/26 Javascript
jquery批量设置属性readonly和disabled的方法
2014/01/24 Javascript
easyui datagrid 键盘上下控制选中行示例
2014/03/31 Javascript
推荐8款jQuery轻量级树形Tree插件
2014/11/12 Javascript
bootstrap改变按钮加载状态
2014/12/01 Javascript
鼠标经过子元素触发mouseout,mouseover事件的解决方案
2015/07/26 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
2016/06/25 Javascript
基于JS实现翻书效果的页面切换样式
2017/02/16 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
2017/02/20 Javascript
React Native中TabBarIOS的简单使用方法示例
2017/10/13 Javascript
搭建基于express框架运行环境的方法步骤
2018/11/15 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
2019/04/24 Javascript
微信小程序实现页面分享onShareAppMessage
2019/08/12 Javascript
Vue 开发必须知道的36个技巧(小结)
2019/10/09 Javascript
python在windows下创建隐藏窗口子进程的方法
2015/06/04 Python
在python中使用正则表达式查找可嵌套字符串组
2017/10/24 Python
Python字典,函数,全局变量代码解析
2017/12/18 Python
使用50行Python代码从零开始实现一个AI平衡小游戏
2018/11/21 Python
selenium3+python3环境搭建教程图解
2018/12/07 Python
Python3 pip3 list 出现 DEPRECATION 警告的解决方法
2019/02/16 Python
Python 写了个新型冠状病毒疫情传播模拟程序
2020/02/14 Python
python中if嵌套命令实例讲解
2021/02/25 Python
Antler英国官网:购买安特丽行李箱、拉杆箱
2019/08/25 全球购物
简述安装Slackware Linux系统的过程
2012/05/08 面试题
致100米运动员广播稿
2014/02/14 职场文书
无偿献血倡议书
2014/04/14 职场文书
2016大一新生军训心得体会
2016/01/11 职场文书
2016年小学植树节活动总结
2016/03/16 职场文书