Three.js实现3D机房效果-创新互联

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;