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 相关文章推荐
表单元素事件 (Form Element Events)
Jul 17 Javascript
基于jquery的DIV随滚动条滚动而滚动的代码
Jul 20 Javascript
node.js中的path.extname方法使用说明
Dec 09 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
Oct 09 Javascript
JavaScript常见JSON操作实例分析
Aug 08 Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
Sep 12 Javascript
Javascript 实现 Excel 导入生成图表功能
Oct 22 Javascript
Vue数据双向绑定的深入探究
Nov 27 Javascript
jQuery实现动态添加和删除input框代码实例
Mar 29 jQuery
深入理解JS异步编程-Promise
Jun 03 Javascript
js神秘的电报密码 哈弗曼编码实现
Sep 10 Javascript
浅析JavaScript 函数防抖和节流
Jul 13 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
PHP生成静态页
2006/11/25 PHP
FleaPHP的安全设置方法
2008/09/15 PHP
PHP自定义函数收代码
2010/08/01 PHP
php实现的Cookies操作类实例
2014/09/24 PHP
PHP中foreach()用法汇总
2015/07/02 PHP
php等比例缩放图片及剪切图片代码分享
2016/02/13 PHP
Zend Framework入门应用实例详解
2016/12/11 PHP
JS中处理与当前时间间隔的函数代码
2012/05/23 Javascript
js如何调用qq互联api实现第三方登录
2014/03/28 Javascript
jquery处理json对象
2014/11/03 Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
2016/01/25 Javascript
jQuery获得字体颜色16位码的方法
2016/02/20 Javascript
jquery ajax局部加载方法详解(实现代码)
2016/05/12 Javascript
微信小程序  audio音频播放详解及实例
2016/11/02 Javascript
微信小程序 loading 详解及实例代码
2016/11/09 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
2016/12/13 Javascript
详解nodejs微信公众号开发——5.素材管理接口
2017/04/11 NodeJs
js自定义弹框插件的封装
2020/08/24 Javascript
Three.js利用性能插件stats实现性能监听的方法
2017/09/25 Javascript
js canvas实现红包照片效果
2018/08/21 Javascript
vue-cli3 karma单元测试的实现
2019/01/18 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
2019/09/25 Javascript
[01:52]深扒TI7聊天轮盘语音出处7
2017/05/11 DOTA
Python中pillow知识点学习
2018/04/30 Python
Python合并多个Excel数据的方法
2018/07/16 Python
pyqt5实现登录界面的模板
2020/05/30 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧(自定义信号与槽)详解与实例
2020/03/06 Python
出门问问全球官方商城:Tichome音箱和TicWatch智能手表
2017/12/02 全球购物
英国领先的电视购物零售商:Ideal World
2019/03/18 全球购物
电大毕业自我鉴定
2014/02/03 职场文书
幼儿园中班教师个人工作总结
2015/02/06 职场文书
2015年信访工作总结
2015/04/07 职场文书
道歉情书大全
2015/05/12 职场文书
贷款担保书范本
2015/09/22 职场文书
2016年安康杯竞赛活动总结
2016/04/05 职场文书
Mysql官方性能测试工具mysqlslap的使用简介
2021/05/21 MySQL