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 相关文章推荐
Javascript 实现复制(Copy)动作方法大全
Jun 20 Javascript
JavaScript中实现Map的示例代码
Sep 09 Javascript
jQuery遮罩层效果实例分析
Jan 14 Javascript
JS实现的幻灯片切换显示效果
Sep 07 Javascript
前端构建工具之gulp的配置与搭建详解
Jun 12 Javascript
Vue Socket.io源码解读
Feb 07 Javascript
js canvas实现二维码和图片合成的海报
Nov 19 Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
Dec 06 Javascript
原理深度解析Vue的响应式更新比React快
Apr 04 Javascript
简单了解前端渐进式框架VUE
Jul 20 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
Oct 24 Javascript
vue项目实现减少app.js和vender.js的体积操作
Nov 12 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
也谈截取首页新闻 - 范例
2006/10/09 PHP
php session劫持和防范的方法
2013/11/12 PHP
php实现的数字验证码及数字运算验证码
2015/07/30 PHP
Yii+MYSQL锁表防止并发情况下重复数据的方法
2016/07/14 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
PHP+MySQL实现模糊查询员工信息功能示例
2018/06/01 PHP
php unlink()函数使用教程
2018/07/12 PHP
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
2006/06/26 Javascript
用js实现键盘方向键翻页功能的代码
2007/06/03 Javascript
jQuery 表单验证扩展代码(二)
2010/10/20 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
2013/10/25 Javascript
checkbox勾选判断代码分析
2014/06/11 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
2014/06/30 Javascript
jQuery新的事件绑定机制on()示例应用
2014/07/18 Javascript
js实现网页随机切换背景图片的方法
2014/11/01 Javascript
js实现按钮加背景图片常用方法
2014/11/01 Javascript
javascript实现验证身份证号的有效性并提示
2015/04/30 Javascript
JavaScript必知必会(五) eval 的使用
2016/06/08 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
2017/03/02 Javascript
JavaScript之iterable_动力节点Java学院整理
2017/06/29 Javascript
js单页hash路由原理与应用实战详解
2017/08/14 Javascript
浅谈vuejs实现数据驱动视图原理
2018/02/23 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
2018/11/28 Javascript
微信小程序如何修改本地缓存key中单个数据的详解
2019/04/26 Javascript
Vue路由之JWT身份认证的实现方法
2019/08/26 Javascript
ES6实现图片切换特效代码
2020/01/14 Javascript
vue 如何从单页应用改造成多页应用
2020/10/23 Javascript
连接Python程序与MySQL的教程
2015/04/29 Python
Python编程实现从字典中提取子集的方法分析
2018/02/09 Python
对python修改xml文件的节点值方法详解
2018/12/24 Python
python连接打印机实现打印文档、图片、pdf文件等功能
2020/02/07 Python
Canvas图片分割效果的实现
2019/07/29 HTML / CSS
Lands’ End英国官方网站:高质量男女服装
2017/10/07 全球购物
GOLFINO英国官网:高尔夫服装
2020/04/11 全球购物
工艺技术员岗位职责
2015/02/04 职场文书
运动会新闻稿
2015/07/17 职场文书