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 图片展示
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 }
推荐阅读
-
javascript 3d网页 基于 three.js (一)
-
javascript 3d网页 示例 ( three.js 初探 七)
-
javascript 3d网页 简单的 图形界面 搭建几何体 示例 ( three.js r114 初探 五)
-
javascript 3d网页 封装简单的Gui控制器视图类 和 ThreeBSP网格组合 ( three.js r114 初探 三)
-
javascript 3d网页 简单几行代码创建一个动态水潭, 湖面 示例 ( three.js r114 初探 四)
-
javascript 3d网页 控制器 与 水面 简单示例 ( three.js r114 初探 二)
-
javascript 简单的3d网页应用(3d网页可视化编辑器), 搭建几何体 选配材质 纹理 , 导入 导出 示例 ( three.js 初探 六)
-
javascript 3d网页 控制器 与 水面 简单示例 ( three.js r114 初探 二)
-
javascript 3d网页 封装简单的Gui控制器视图类 和 ThreeBSP网格组合 ( three.js r114 初探 三)
-
javascript 3d网页 简单的 图形界面 搭建几何体 示例 ( three.js r114 初探 五)