javascript 3d网页控制器与水面简单示例 ( three.js r114 初探二)

1 控制器(在原控制器插件上新添加了一个控制功能)

func.js/class Three

 1 //初始化
 2     init(object){
 3         if (WEBGL.isWebGLAvailable() === false){
 4             document.body.appendChild(WEBGL.getWebGLErrorMessage());
 5             return;
 6         }
 7         var o = object || {};
 8         Three.prototype.cmtp = o.cmtp || { //鼠标平移视角功能 的 属性
 9             speed:10, //平移速度
10             state:{x:0, y:0}, //平移状态
11             size:20, //鼠标距显示器边框的大小(如果鼠标当前位置符合这个范围则平移视角)
12             run:false //是否启用鼠标平移视角功能
13         };
14         Three.prototype.view = new View();
15         THREE.Cache.enabled = true;//加载器启用缓存
16         Three.prototype.animateFunc = [];
17         Three.prototype.sceneSize = 10000;
18         Three.prototype.clock = new THREE.Clock();//跟踪时间
19         Three.prototype.scene = this.createScene();//场景
20         Three.prototype.camera = this.createCamera();//相机
21         Three.prototype.renderer = this.createRenderer();//渲染器
22         Three.prototype.light = this.createLight(this.scene);//灯光
23         Three.prototype.createControl(this.camera, this.renderer);//控制器
24         Three.prototype.animate(this.scene, this.camera, this.renderer);//动画循环
25         Three.prototype.textures = this.createTexture();//纹理
26         Three.prototype.materials = this.createMaterial();//材质
27         return this;
28     }
29 
30 //创建 控制器
31     createControl(camera, renderer){
32         var create = ()=>{
33             let control = new THREE.OrbitControls(camera, renderer.domElement);
34             control.target = new THREE.Vector3(0, 100, 0);//相机焦点
35             //control.minPolarAngle = Math.PI * 0.3;//向上最大角度
36             //control.maxPolarAngle = Math.PI * 0.4;//向下最大角度
37             control.minDistance = 1;//最小距离
38             control.maxDistance = 1000;//最大距离
39             control.autoRotateSpeed = 10;//自动旋转速度
40             //control.panSpeed = 100;//鼠标旋转速度
41             control.enableZoom = true;//是否启用缩放
42             control.enableKeys = true;//是否启用键盘
43             control.panSpeed = 1;//鼠标平移速度
44             control.keyPanSpeed = 100;//按键平移的速度
45             control.keys.LEFT = 65;//key a左
46             control.keys.UP = 87;//key w前
47             control.keys.RIGHT = 68;//key d右
48             control.keys.BOTTOM = 83;//key s后
49             this.control = control;
50             this.controlMousePanTargetInit(control);//初始化鼠标平移
51             this.animateFunc.push(()=>{//加入实时更新队列
52                 if(!this.control || !this.clock){return;}
53                 this.control.update(this.clock.getDelta());//更新控制器
54                 if(this.cmtp.run === true){this.control.myRunPan(this.cmtp);}//鼠标平移视角, myRunPan 方法是我在控制器插件上新加的方法(OrbitControls.js/900)
55             });
56         }
57         loadFile("./js/lib/OrbitControls.js", create);//加载 控制器 插件
58     }
59

func.js/class Water

 1 /** 水面
 2 
 3 */
 4 class Water extends Three{
 5     
 6     constructor(){
 7         super();
 8         
 9         var geometry = new THREE.PlaneBufferGeometry(10000, 10000, 20, 20);
10         geometry.rotateX( - Math.PI / 2 );
11         var time, position, i;
12         var mesh = new THREE.Mesh(geometry, this.materials.ground); 
13         this.scene.add(mesh);
14         this.animateFunc.push(()=>{//加入更新队列
15             time = this.clock.getElapsedTime();//获取时间
16             position = mesh.geometry.attributes.position;//获取位置
17             for(i = 0; i < position.count; i ++){//修改y坐标
18                 position.setY(i, Math.sin(i + time) * 50);
19             }
20             position.needsUpdate = true;//更新矩阵
21         });
22     
23     }
24 
25 }
26 
27 
28 /** 地面
29 
30 */
31 class Land extends Three{}