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)
如对本文有疑问， 点击进行留言回复！！
Agora 开源 | 一个 Demo，帮你快速实现社交直播四大场景
vuejs （2）- Vue 生命周期 和 VueJS ajax
网友评论