Three.js实现3D机房效果


Posted in Javascript onDecember 30, 2018

3D机房系统是最近用户的需求,通过相关了解最后使用Three.js,也发现最近有东西可以写出来分享:

  • webGL可以让我们在canvas上实现3D效果。而three.js是一款webGL框架,由于其易用性被广泛应用
  • Three.js是通过对WebGL接口的封装与简化而形成的一个易用的图形库

分步实现3D效果

  • 初始化3D模型参数
  • 开始搭建场景
  • 初始化渲染器
  • 初始化摄像机
  • 创建场景
  • 灯光布置
  • 创建网格线
  • 循环渲染界面
  • 创建鼠标控制器
  • 添加对象到场景中

一 . 初始化3D模型参数

//参数处理 
this.option = new Object(); 
this.option.antialias = option.antialias || true; 
this.option.clearCoolr = option.clearCoolr || 0x1b7ace; 
this.option.showHelpGrid = option.showHelpGrid || false; 
//对象 
this.id = id; 
this.width = width(); 
this.height = height(); 
this.renderer = null;//渲染器 
this.scene = null;//场景 
this.camera = null;//摄像机 
this.selected=null; 
this.objects = []; 
this.mouseClick = new THREE.Vector2(); 
this.raycaster = new THREE.Raycaster(); 
this.controls = null;//鼠标控制器 
this.trsnaformControls = null;//鼠标控制器 
this.dragcontrols = null; 
this.objList = json.objects;//对象列表 
this.eventList = json.events;//事件对象列表 
this.dragList = []; 
this.objectStatusList = {}; 
this.clickList = []; 
var that = this;

对于一些需要使用的参数,开始加载进行初始化操作。

二 . 开始搭建场景

搭建场景包含一些具体的初始化操作 一些初始化方法(之后才对具体方法加以说明):

var that = this; 
room3dObj = that; 
that.initThree(that.id); //初始化渲染器 
that.initCamera(); //初始化摄像机 
that.initScene();//创建场景 
that.initHelpGrid();//创建网格 
that.initLight();//灯光布置 
//添加3D对象 
$.each(that.objList, function (index,obj) { 
that.InitAddObject(obj);//添加对象到场景中 
}); 
that.initMouseCtrl();//创建鼠标控制器 
that.animation();//循环渲染界面

三 . 初始化渲染器

渲染器 WebGLRenderer 定义语法:

var that = this; 
that.renderer = new THREE.WebGLRenderer({ alpha: true, antialias: that.option.antialias }); 
that.renderer.setSize(that.width, that.height); 
$(“#” + that.id).append(that.renderer.domElement); 
that.renderer.setClearColor(that.option.clearCoolr, 1.0); 
that.renderer.shadowMap.enabled = true; 
that.renderer.shadowMapSoft = true; 
//事件 
that.renderer.domElement.addEventListener(‘mousedown',that.onDocumentMouseDown, false); 
that.renderer.domElement.addEventListener(‘mousemove',that.onDocumentMouseMove, false);

四 . 初始化摄像机

采用PerspectiveCamera 相机:

var that = this;
  that.camera = new THREE.PerspectiveCamera(45, that.width / that.height, 1, 100000);
  that.camera.name = 'mainCamera';
  that.camera.position.x =0;
  that.camera.position.y =2000;
  that.camera.position.z =1800;
  that.camera.up.x = 0;
  that.camera.up.y =1;
  that.camera.up.z =0;
  that.camera.lookAt({ x: 100, y: 0, z: 100 });
  that.objects.push(that.camera);
  that.dragList.push(that.camera);
  that.clickList.push(that.camera);

五 . 创建场景

var that = this; 
that.scene = new THREE.Scene();

六 . 灯光布置

/* 
AmbientLight: 环境光,基础光源,它的颜色会被加载到整个场景和所有对象的当前颜色上。 
PointLight:点光源,朝着所有方向都发射光线 
SpotLight :聚光灯光源:类型台灯,天花板上的吊灯,手电筒等 
DirectionalLight:方向光,又称无限光,从这个发出的光源可以看做是平行光. 
*/ 
var that = this; 
var light = new THREE.AmbientLight(0xcccccc); 
light.position.set(0, 0,0); 
that.scene.add(light); 
var light2 = new THREE.PointLight(0x555555); 
light2.shadow.camera.near =1; 
light2.shadow.camera.far = 5000; 
light2.position.set(0, 350, 0); 
light2.castShadow = true;//表示这个光是可以产生阴影的 
that.scene.add(light2);

七 . 创建网格

var that = this; 
if (that.option.showHelpGrid) { 
var helpGrid = new THREE.GridHelper(1000, 50); 
that.scene.add(helpGrid); 
}

八 . 循环渲染界面

var that = room3dObj; 
if (TWEEN != null && typeof (TWEEN) != ‘undefined') { 
TWEEN.update(); 
} 
requestAnimationFrame(that.animation); 
that.renderer.render(that.scene, that.camera);

九 . 创建鼠标控制器

var that = this; 
that.controls = new THREE.OrbitControls(that.camera,that.renderer.domElement); 
that.controls.addEventListener(‘change', that.updateControls);

十 . 添加对象到场景中

var that = room3dObj; 
that.scene.add(obj); 
that.objects.push(obj);

最后效果

Three.js实现3D机房效果

浏览器兼容

  • 目前,本编辑器对Chrome浏览器支持最为完整。建议大家使用较新版本的Chrome.
  • IE11以下不支持

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

Javascript 相关文章推荐
asp.net+jquery滚动滚动条加载数据的下拉控件
Jun 25 Javascript
两种方法实现文本框输入内容提示消失
Mar 17 Javascript
简单常用的幻灯片播放实现代码
Sep 25 Javascript
jQuery html()方法使用不了无法显示内容的问题
Aug 06 Javascript
JavaScript中Null与Undefined的区别解析
Jun 30 Javascript
基于javascript实现表格的简单操作
May 21 Javascript
Javascript vue.js表格分页,ajax异步加载数据
Oct 24 Javascript
微信小程序实现顶部普通选项卡效果(非swiper)
Jun 19 Javascript
jQuery实现html双向绑定功能示例
Oct 09 jQuery
小程序scroll-view安卓机隐藏横向滚动条的实现详解
May 16 Javascript
layui table 获取分页 limit的方法
Sep 20 Javascript
有趣的JavaScript隐式类型转换操作实例分析
May 02 Javascript
JavaScript对象的特性与实践应用深入详解
Dec 30 #Javascript
three.js搭建室内场景教程
Dec 30 #Javascript
Three.JS实现三维场景
Dec 30 #Javascript
Three.js实现简单3D房间布局
Dec 30 #Javascript
JavaScript数组特性与实践应用深入详解
Dec 30 #Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
Dec 30 #Javascript
微信小程序使用setData修改数组中单个对象的方法分析
Dec 30 #Javascript
You might like
PHP设计模式之注册树模式分析
2018/01/26 PHP
php如何获取Http请求
2020/04/30 PHP
ie和firefox中img对象区别的困惑
2006/12/27 Javascript
JS中==与===操作符的比较
2009/03/21 Javascript
JS+XML 省份和城市之间的联动实现代码
2009/10/14 Javascript
常用一些Javascript判断函数
2012/08/14 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
2014/03/16 Javascript
jquery文本框中的事件应用以输入邮箱为例
2014/05/06 Javascript
jquery实现网页的页面平滑滚动效果代码
2015/11/02 Javascript
浅析node连接数据库(express+mysql)
2015/11/30 Javascript
详解WordPress开发中get_current_screen()函数的使用
2016/01/11 Javascript
老生常谈js数据类型
2017/08/03 Javascript
使用JS编写的随机抽取号码的小程序
2017/08/11 Javascript
详解搭建es6+devServer简单开发环境
2018/09/25 Javascript
JS开发 富文本编辑器TinyMCE详解
2019/07/19 Javascript
使用preload预加载页面资源时注意事项
2020/02/03 Javascript
详解vue-template-admin三级路由无法缓存的解决方案
2020/03/10 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
2020/11/04 Javascript
[02:12]打造更好的电竞完美世界:完美盛典回顾篇
2018/12/19 DOTA
python实现猜数字游戏(无重复数字)示例分享
2014/03/29 Python
Python实现统计给定字符串中重复模式最高子串功能示例
2018/05/16 Python
kafka-python批量发送数据的实例
2018/12/27 Python
Python微医挂号网医生数据抓取
2019/01/24 Python
windows 10 设定计划任务自动执行 python 脚本的方法
2019/09/11 Python
python多线程并发及测试框架案例
2019/10/15 Python
pytorch点乘与叉乘示例讲解
2019/12/27 Python
关于初始种子自动选取的区域生长实例(python+opencv)
2020/01/16 Python
解决tensorflow 释放图,删除变量问题
2020/06/23 Python
一款纯css3实现的鼠标经过按钮特效教程
2014/11/09 HTML / CSS
利用Storage Event实现页面间通信的示例代码
2018/07/26 HTML / CSS
夏洛特和乔治婴儿和儿童时装精品店:Charlotte and George
2018/06/06 全球购物
便利店投资的创业计划书
2014/01/12 职场文书
群众路线教育实践活动民主生活会个人检查对照思想汇报
2014/10/04 职场文书
11.9消防日宣传标语
2014/10/08 职场文书
小学班主任个人总结
2015/03/03 职场文书
Java结构型设计模式之组合模式详解
2022/09/23 Java/Android