3 d机房系统是最近用户的需求,通过相关了解最后使用Three.js,也发现最近有东西可以写出来分享:
<李> webGL可以让我们在画布上实现3 d效果。而three.js是一款webGL框架,由于其易用性被广泛应用李
<李> 3。js是通过对WebGL接口的封装与简化而形成的一个易用的图形库
李
分步实现3 d效果
<李>初始化三维模型参数
<李>开始搭建场景李
<李>初始化渲染器李
<李>初始化摄像机李
<李>创建场景李
<李>灯光布置李
<李>创建网格线李
<李>循环渲染界面李
<李>创建鼠标控制器李
<李>添加对象到场景中
李
<强>一。初始化三维模型参数
//参数处理
这一点。选择=新对象();
this.option。抗锯齿选项。抗锯齿| |正确;
this.option。clearCoolr=选项。clearCoolr | | 0 x1b7ace;
this.option。showHelpGrid=选项。showHelpGrid | |假;//对象
这一点。id=id;
这一点。宽度=宽度();
这一点。高度=高度();
这一点。渲染器=零;//渲染器
这一点。现?零;//场景
这一点。相机=零;//摄像机
this.selected=零;
这一点。对象=[];
这一点。mouseClick=new THREE.Vector2 ();
这一点。raycaster=new THREE.Raycaster ();
这一点。控制=零;//鼠标控制器
这一点。trsnaformControls=零;//鼠标控制器
这一点。dragcontrols=零;
这一点。objList=json.objects;//对象列表
这一点。eventList=json.events;//事件对象列表
这一点。dragList=[];
这一点。objectStatusList={};
这一点。clickList=[];
var=这个;
对于一些需要使用的参数,开始加载进行初始化操作。
<强>二。开始搭建场景
搭建场景包含一些具体的初始化操作一些初始化方法(之后才对具体方法加以说明):
var=这个;
room3dObj=;
that.initThree (that.id);//初始化渲染器
that.initCamera ();//初始化摄像机
that.initScene();//创建场景
that.initHelpGrid();//创建网格
that.initLight();//灯光布置//添加3 d对象
. each(美元。objList,函数(指数、obj) {
that.InitAddObject (obj);//添加对象到场景中
});
that.initMouseCtrl();//创建鼠标控制器
that.animation();//循环渲染界面
<强>三。初始化渲染器
渲染器WebGLRenderer定义语法:
var=这个;
那渲染器=new三人。WebGLRenderer({α:真的,平滑:that.option。抗锯齿});
that.renderer.setSize (。宽度,that.height);
$ (" # " + that.id) .append (that.renderer.domElement);
that.renderer.setClearColor (that.option。clearCoolr, 1.0);
that.renderer.shadowMap。启用=true;
that.renderer。shadowMapSoft=true;//事件
that.renderer.domElement.addEventListener (“mousedown”。onDocumentMouseDown、假);
that.renderer.domElement.addEventListener (“mousemove”。 onDocumentMouseMove、假);
<强>四。初始化摄像机
采用PerspectiveCamera相机:
var=这个;
那相机=new三人。PerspectiveCamera(45岁。宽/Ｉ砀?100000);
that.camera.name=癿ainCamera”;
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。看看人家({x: 100 y: 0 z: 100});
that.objects.push (that.camera);
that.dragList.push (that.camera);
that.clickList.push (that.camera);
<强>五。创建场景
var=这个;
那现?new THREE.Scene ();
<强>六。灯光布置
/*
AmbientLight:环境光,基础光源,它的颜色会被加载到整个场景和所有对象的当前颜色上。
PointLight:点光源,朝着所有方向都发射光线
焦点:聚光灯光源:类型台灯,天花板上的吊灯,手电筒等
方向性光源:方向光,又称无限光,从这个发出的光源可以看做是平行光。
*/var=这个;
光var=new THREE.AmbientLight (0 xcccccc);
light.position。集(0,0,0);
that.scene.add(光);
var light2=new THREE.PointLight (0 x555555);
light2.shadow.camera。附近=1;
light2.shadow.camera。远=5000;
light2.position。设置(0 350 0);
light2。castShadow=true;//表示这个光是可以产生阴影的
that.scene.add (light2);
