欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

javascript 3d网页 示例 ( three.js 初探 七)

程序员文章站 2022-07-02 09:37:38
1 完整代码下载 https://pan.baidu.com/s/1JJyVcP2KqXsd5G6eaYpgHQ 提取码 3fzt (压缩包名: 2020-4-5-demo.zip) 2 图片展示 3 主要代码 1 "use strict" 2 3 class InitControl{ 4 5 co ......

1 完整代码下载

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

  提取码 3fzt (压缩包名: 2020-4-5-demo.zip)

2 图片展示

javascript 3d网页 示例 ( three.js 初探 七)

3 主要代码

  1 "use strict"
  2 
  3 class initcontrol{
  4     
  5     constructor(view, three){
  6         this.view = view;
  7         this.three = three;
  8         this.target = {object: null, isdown: false, ismove: false};
  9         this.dragtarget = {};
 10         this.group = this.add(new three.group(), null, true);
 11         this.setdrag(three.scene, three.camera, three.renderer, this.group.children);
 12         this.setorbit(three.scene, three.camera, three.renderer);
 13         this.settransform(three.scene, three.camera, three.renderer);
 14         this.setevents(view, three);
 15         this.view.updatelanguage(this.group, "ch");//更改为中文字体
 16     }
 17     
 18     add (a, b, c){ // a 添加至-> b, c 如果没有定义,新添加的对象将自动获得焦点
 19         a = this.three.add(a, b);
 20         this.view.addlist(a, b);
 21         if(c === undefined) this.settarget(a, {focuslist: true});
 22         return a;
 23     }
 24         
 25     remove (a){
 26         this.removetarget(a);
 27         this.view.removelist(a);
 28         this.three.remove(a);
 29         this.three.update();
 30     }
 31     
 32     setdrag(scene, camera, renderer, children){
 33         let drag = new three.dragcontrols(children, camera, renderer.domelement);
 34         drag.addeventlistener('hoveron', (e)=>{
 35             this.dragtarget.old = null;
 36             this.dragtarget.now = e.object;
 37         });
 38         drag.addeventlistener('hoveroff', (e)=>{
 39             this.dragtarget.now = null;
 40             this.dragtarget.old = e.object;
 41         });
 42         drag.enabled = false;
 43         this.drag = drag;
 44     }
 45     
 46     setorbit(scene, camera, renderer){
 47         let orbit = new three.orbitcontrols(camera, renderer.domelement);
 48         orbit.target = new three.vector3(0, 0, 0);//控件焦点
 49         //orbit.minpolarangle = math.pi * 0.3;//向上最大角度
 50         //orbit.maxpolarangle = math.pi * 0.4;//向下最大角度
 51         orbit.mindistance = camera.near;//最小距离
 52         orbit.maxdistance = camera.far;//最大距离
 53         orbit.autorotatespeed = 10;//自动旋转速度
 54         //orbit.panspeed = 100;//鼠标旋转速度
 55         orbit.enablezoom = true;//是否启用缩放
 56         orbit.enablekeys = true;//是否启用键盘
 57         orbit.panspeed = 1;//鼠标平移速度
 58         orbit.keypanspeed = 100;//按键平移的速度
 59         orbit.keys.left = 65;//key a左
 60         orbit.keys.up = 87;//key w前
 61         orbit.keys.right = 68;//key d右
 62         orbit.keys.bottom = 83;//key s后
 63         orbit.addeventlistener("change", ()=>{renderer.render(scene, camera);});
 64         this.orbit = orbit;
 65     }
 66     
 67     settransform(scene, camera, renderer){
 68         var transform = new three.transformcontrols(camera, renderer.domelement);
 69         transform.size = 1;
 70         scene.add(transform);
 71         this.transform = transform;
 72         transform.addeventlistener( 'dragging-changed', (e)=>{this.orbit.enabled = !e.value;});
 73         transform.addeventlistener('change', (e)=>{
 74             let type = transform.getmode(), mesh = this.target.object || e.target.object;
 75             let hc = mesh.whx.elem.listcontent.mesh.object;
 76             switch(type){
 77                 case "translate": 
 78                     hc.position.x = mesh.position.x;
 79                     hc.position.y = mesh.position.y;
 80                     hc.position.z = mesh.position.z;
 81                 break;    
 82                 case "rotate": 
 83                     hc.rotation.x = mesh.rotation.x;
 84                     hc.rotation.y = mesh.rotation.y;
 85                     hc.rotation.z = mesh.rotation.z;
 86                 break;
 87                 case "scale": 
 88                     hc.scale.x = mesh.scale.x;
 89                     hc.scale.y = mesh.scale.y;
 90                     hc.scale.z = mesh.scale.z;
 91                 break;
 92                 default: break;
 93             }
 94             this.three.boxhelper.update();
 95             renderer.render(scene, camera);
 96         });
 97     }
 98     
 99     settarget(object, param){
100         this.removetarget(this.target.object);
101         if(!object || !object.whx) return;
102         param = param || {};
103         this.three.boxhelper.setfromobject(object);
104         this.three.boxhelper.visible = true;
105         this.transform.attach(object);
106         if(param.focusliststyle === undefined) this.view.focusliststyle(object.whx.elem.son);
107         if(param.focuslist === true) this.view.focuslist(object);
108         object.whx.elem.listcontent.mesh.father.style.display = "block";//if(param.listcontent === undefined) this.view.objectcontents(object);
109         this.target.object = object;
110         this.three.update();
111     }
112     
113     removetarget(object){
114         if(!object || !object.whx) return;
115         this.three.boxhelper.visible = false;
116         this.transform.detach(object);
117         this.view.focusliststyle(object.whx.elem.son, "remove");
118         object.whx.elem.listcontent.mesh.father.style.display = "none"; //this.view.objectcontents();
119         this.target.object = null;
120         this.three.update();
121     }
122     
123     setevents(view, three){
124         
125         let _holdgroup = null, getobject = (a)=>{
126             if(a.whx_id === undefined){return;}
127             let o = three.scene.getobjectbyid(a.whx_id);
128             if(o === undefined){console.log("获取对象失败"); return;}
129             //let object = a.tagname === "summary" ? o.whx.backgroup : o;
130             return o;
131         }
132         
133         
134         //scene -> list
135         let down = ()=>{this.target.isdown = true;}
136         let move = ()=>{if(this.target.isdown === true && this.target.ismove === false) this.target.ismove = true;}
137         let up = ()=>{
138             if(this.target.ismove === false) this.settarget(this.dragtarget.now, {focuslist:true});
139             this.target.ismove = false;
140             this.target.isdown = false;
141             three.renderer.domelement.removeeventlistener("mousedown", down);
142             three.renderer.domelement.removeeventlistener("mousemove", move);
143             three.renderer.domelement.removeeventlistener("mouseup", up);
144         }
145         view.addevent(three.renderer.domelement, "mousedown", down);
146         view.addevent(three.renderer.domelement, "mousemove", move);
147         view.addevent(three.renderer.domelement, "mouseup", up);
148         
149         
150         //list -> scene
151         view.targetcallback = (a)=>{
152             if(a.whx_control_id !== undefined){ //whx_control_id = 0 删除  1 复制  2 子级
153                 if(_holdgroup !== null) _holdgroup = null;
154                 if(a.whx_control_id === 2) a.style.background = "rgba(0, 0, 200, 0.5)";
155                 let o = this.target.object;
156                 switch(a.whx_control_id){
157                     case 0: this.remove(o); break;
158                     case 1: this.settarget(this.add(o.clone(true), o)); break;
159                     case 2: _holdgroup = o; this.settarget(o); break;
160                     default: break;
161                 }
162                 return;
163             }
164             
165             if(_holdgroup !== null){//分组操作
166                 let o = getobject(a);
167                 if(o){
168                     this.remove(o);
169                     this.add(o, _holdgroup);
170                 }
171                 _holdgroup = null; 
172                 view.right.t_control[3].style.background = "";
173                 this.settarget(o); return;
174             }
175             
176             this.settarget(getobject(a));
177         }
178         
179     }
180 
181 }