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;

网站题目：Three.js实现3D机房效果-创新互联
标题来源：http://cdkjz.cn/article/dcshce.html