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{}

2 图片展示:

 

3 完整代码下载

https://pan.baidu.com/s/1jjyvcp2kqxsd5g6eaypghq

提取码 3fzt (压缩包名： 2020-3-10-demo.zip)