javascript 3d网页 封装简单的Gui控制器视图类 和 ThreeBSP网格组合 ( three.js r114 初探 三)
程序员文章站
2022-06-25 08:43:16
1 完整代码下载 https://pan.baidu.com/s/1JJyVcP2KqXsd5G6eaYpgHQ 提取码 3fzt (压缩包名: 2020-3-12-demo.zip) 2 图片展示 3 代码展示 1 (function(v, f){ 2 'use strict'; 3 4 if(! ......
1 完整代码下载
https://pan.baidu.com/s/1jjyvcp2kqxsd5g6eaypghq
提取码 3fzt (压缩包名: 2020-3-12-demo.zip)
2 图片展示
3 代码展示
1 (function(v, f){ 2 'use strict'; 3 4 if(!v || !f || window.three !== undefined){return;} 5 6 if(webgl.iswebglavailable() === false){//是否支持webgl 7 document.body.appendchild(webgl.getwebglerrormessage()); 8 return; 9 } 10 11 three.cache.enabled = true;//加载器启用缓存 12 13 var three = function (){ 14 //鼠标平移视角功能 的 属性 15 this.cmtp = { 16 speed:10, //平移速度 17 state:{x:0, y:0}, //平移状态 18 size:20, //鼠标距显示器边框的大小(如果鼠标当前位置符合这个范围则平移视角) 19 run:false //是否启用鼠标平移视角功能 20 }; 21 22 this.animatefunc = [];//每帧自动执行的函数列表 23 this.scenesize = scenesize;//场景大小 24 this.clock = new three.clock();//跟踪时间 25 this.scene = scene//场景 26 this.camera = createcamera(this.scenesize);//相机 27 this.renderer = createrenderer();//渲染器 28 this.light = createlight(this.scene);//灯光 29 this.control = createcontrol(this.camera, this.renderer, this.clock, this.animatefunc, this.cmtp);//控制器 30 this.land = land; 31 32 animate(this.scene, this.camera, this.renderer, this.animatefunc);//动画循环 33 } 34 35 //布尔运算 type = intersect 交集、重合的部分 union 并集、组合、相加 subtract 差集、相减 36 three.prototype.getbsp = (mesha, meshb, type)=>{ 37 if(!mesha || !meshb || !type){return;} 38 var bsp_a = new threebsp(mesha);//生成threebsp对象 39 var bsp_b = new threebsp(meshb);//生成threebsp对象 40 var bsp = bsp_a[type](bsp_b);//进行 type 计算 41 var mesh = bsp.tomesh();//转换为mesh模型 42 mesh.geometry.computefacenormals();//更新模型的面 43 mesh.geometry.computevertexnormals();//更新模型的顶点 44 mesh.geometry = new three.buffergeometry().fromgeometry(mesh.geometry);//转换为 buff缓冲几何体 45 mesh.material = mesha.material;//重赋值纹理 46 return mesh; 47 } 48 49 //创建 场景 50 var createscene = ()=>{ 51 var sce = new three.scene(); 52 //sce.fog = new three.fog(0xcce0ff, 800, 1000);//线性雾 53 sce.background = new three.cubetextureloader() 54 .setpath('img/cube/skyboxsun25deg/') 55 .load( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ] ); 56 return sce; 57 } 58 59 //创建 相机 60 var createcamera = (scenesize)=>{ 61 var camera = new three.perspectivecamera(75, v.client.w/v.client.h, 1, scenesize/2); 62 camera.position.set(0, 0, 100);//相机起始位置 63 return camera; 64 } 65 66 //创建 渲染器 67 var createrenderer = ()=>{ 68 var renderer = new three.webglrenderer({ 69 antialias : true,//抗割齿 70 powerpreference:"high-performance"//选择高性能gpu渲染 71 }); 72 renderer.setsize(v.client.w, v.client.h);//设置渲染大小 73 renderer.setpixelratio(window.devicepixelratio);//渲染矫正 74 renderer.gammafactor = 2.2;//着色校正 75 renderer.physicallycorrectlights = true;//使其精确照明 76 renderer.shadowmap.enabled = true;//渲染阴影 77 //renderer.autoclear = true;//每帧自动清理缓存 78 if(!renderer.extensions.get('webgl_depth_texture')){console.log("深度纹理扩展获取失败:webgl_depth_texture");} 79 renderer.domelement.style.zindex = "0"; 80 renderer.domelement.style.position = "absolute"; 81 renderer.domelement.style.top = "0px"; 82 renderer.domelement.style.left = "0px"; 83 document.body.appendchild(renderer.domelement); 84 return renderer; 85 } 86 87 //创建 灯光 88 var createlight = (scene)=>{ 89 scene.add(new three.ambientlight(0x696969));//环境光(无处不在的光,太阳光) 90 var l_d = 1000, light = new three.directionallight(0xf0f8ff, 1);//平行光(产生阴影的光) 91 light.position.set(-3000, 3000, -3000); 92 light.position.multiplyscalar(1); 93 //阴影 94 light.castshadow = true; 95 light.shadow.mapsize.width = 1024; 96 light.shadow.mapsize.height = 1024; 97 light.shadow.camera.left = -l_d; 98 light.shadow.camera.right = l_d; 99 light.shadow.camera.top = l_d; 100 light.shadow.camera.bottom = -l_d; 101 light.shadow.camera.near = 1; 102 light.shadow.camera.far = 6000; 103 scene.add(light); 104 return light; 105 } 106 107 //创建 控制器 108 var createcontrol = (camera, renderer, clock, animatefunc, cmtp)=>{ 109 var control = new three.orbitcontrols(camera, renderer.domelement); 110 control.target = new three.vector3(0, 0, 0);//相机焦点 111 //control.minpolarangle = math.pi * 0.3;//向上最大角度 112 //control.maxpolarangle = math.pi * 0.4;//向下最大角度 113 control.mindistance = 1;//最小距离 114 control.maxdistance = 10000;//最大距离 115 control.autorotatespeed = 10;//自动旋转速度 116 //control.panspeed = 100;//鼠标旋转速度 117 control.enablezoom = true;//是否启用缩放 118 control.enablekeys = true;//是否启用键盘 119 control.panspeed = 1;//鼠标平移速度 120 control.keypanspeed = 100;//按键平移的速度 121 control.keys.left = 65;//key a左 122 control.keys.up = 87;//key w前 123 control.keys.right = 68;//key d右 124 control.keys.bottom = 83;//key s后 125 controlmousepantargetinit(control, cmtp);//初始化鼠标平移 126 animatefunc.push(()=>{//加入实时更新队列 127 if(!control || !clock){return;} 128 control.update(clock.getdelta());//更新控制器 129 //鼠标平移视角, myrunpan 方法是我在控制器插件上新加的方法(orbitcontrols.js/900) 130 //有些用户的浏览器设置并占用了鼠标右键(默认平移键), 131 if(cmtp.run === true){control.myrunpan(cmtp);} 132 }); 133 return control; 134 } 135 136 //控制鼠标平移视角 初始化 137 var controlmousepantargetinit = (control, cmtp)=>{ 138 var w, h; 139 v.addevent(document.body, "mousemove", (e)=>{ 140 e.preventdefault(); 141 if(cmtp.run !== true){return;} 142 w = v.client.w - e.clientx; 143 h = v.client.h - e.clienty; 144 145 if(w < cmtp.size){cmtp.state.x = 2;} 146 else if(w > v.client.w - cmtp.size){cmtp.state.x = 1;} 147 else{cmtp.state.x = 0;} 148 149 if(h < cmtp.size){cmtp.state.y = 2;} 150 else if(h > v.client.h - cmtp.size){cmtp.state.y = 1;} 151 else{cmtp.state.y = 0;} 152 }); 153 } 154 155 //创建 动画循环 156 var k, len, animate = (scene, camera, renderer, animatefunc)=>{ 157 requestanimationframe(()=>{animate(scene, camera, renderer, animatefunc);}); 158 len = animatefunc.length; 159 for(k = 0; k < len; k++){animatefunc[k]();} 160 renderer.render(scene, camera); 161 } 162 163 164 165 var land = function (){ 166 land.group.add(new three.gridhelper(scenesize, 100));//添加网格辅助线 167 scene.add(land.group); 168 this.name = land.name; 169 this.group = land.group; 170 this.meshs = land.meshs; 171 } 172 173 //创建 所有的成形纹理 174 var land_texture = (object)=>{ 175 //parameter: 176 //texnum:number 加载纹理数量 默认值为最大值 this.texturemax 177 //texture.repeat.set(25, 25);//x y 贴图平铺次数 178 //texture.anisotropy = 1024;//纹理的清晰度(值为2的幕:1, 2, 4, 8, ... 512, 1024, 2048, ...) 179 //texture.matrixautoupdate = false;//是否自动更新矩阵 180 //texture.updatematrix();//手动更新矩阵 181 //texture.needsupdate = true;//下次使用纹理时触发一次更新 182 var o = object || {}; 183 var num = o.texnum === undefined ? land.texturemax : o.texnum; 184 if(typeof(num) !== "number" || num === 0){return;} 185 186 var map = new map(), load = new three.textureloader(); 187 var k, loading = (index, url)=>{ 188 let texture = load.load(url); 189 texture.wraps = texture.wrapt = three.repeatwrapping; 190 texture.anisotropy = 1024; 191 texture.matrixautoupdate = false; 192 texture.updatematrix(); 193 map.set(index, texture); 194 } 195 for(k = 0; k < num; k++){loading(k, "img/texture/land/"+k+".jpg");} 196 //settimeout(()=>{if(map.size === num){console.log("下载图片完成");}}, 3000); 197 return map; 198 } 199 200 //创建 所有的 成形材质 201 var land_material = ()=>{ 202 var k, map = new map(); 203 for(k = 0; k < land.textures.size; k++){ 204 map.set(k, new three.meshlambertmaterial({map:land.textures.get(k), transparent:false})); 205 } 206 map.set(land.textures.size, new three.meshlambertmaterial({color:land.color, transparent:false})); 207 return map; 208 } 209 210 //创建 所有的 成形的几何体 211 var land_geometry = ()=>{ 212 213 } 214 215 //all mesh 216 var land_mesh = ()=>{ 217 var map = new map(); 218 var g = new three.boxgeometry(256, 256, 50); 219 map.set(0, new three.mesh(g, land.materials.get(0))); 220 map.set(1, new three.mesh(g, land.materials.get(1))); 221 222 return map; 223 } 224 225 226 227 var scenesize = 5000; 228 var scene = createscene(); 229 var land = { 230 name : "land", 231 texturemax : 5, 232 color : 0x00ff00, 233 group : new three.group() 234 } 235 land.group.name = "group_land"; 236 land.textures = land_texture(); 237 land.materials = land_material(); 238 land.geometrys = land_geometry(); 239 land.meshs = land_mesh(); 240 241 242 243 window.three = new three(); 244 245 }(new view(), new func()))
1 /** 视图类 2 gui(a, b, c, d, e): 3 //介绍: 通过 修改控制器可视视图 来 更新 a引用对象里的属性值, (gui类的位置在view类的原型里) 4 //暂支持属性类型: number(计量控制器), function(按钮), boolean(复选框) 5 //在默认渲染所有a对象属性的时候,不符合的属性会自动忽略掉 6 //控制器视图 与 a引用对象 默认是双向绑定的, 所以它会覆盖掉原有的get与set 7 a : object 必须, 目标对象(引用) 8 b : array 可选, 选择性的渲染a里面属性, 如果不等于array则默认渲染全部a对应的属性名, 反之通过b数组里的字符串渲染对应a对象里的属性名 9 c : array[min -1, max 1, step 0.1] 可选, a对象如果有多个number类型并有不同的min max step值,则需要用对象包裹,{string:[min, max, step], ...} (string必须对应a对象的属性名) 10 d : string 可选, 块的标题, 默认 "class" 11 e : boolean 可选, 是否双向绑定, 默认为 true 12 例: v = new view()//,每new一次gui都会新增一个 标题分格线 就是 块, 点击title会隐藏此块 13 new v.view().gui(three); 14 new v.gui(three);//渲染全部three对象里符合类型的属性 15 new v.gui(three, ["neverdepth"]);//c默认为[-1, 1, 0.1] 16 new v.gui(three, ["neverdepth"], {neverdepth:[-200, 200, 10]}); 17 new v.gui(three, ["neverdepth"], [-200, 200, 10]); 18 new new view().gui(three, null, {neverdepth:[-200, 200, 10]}); 19 */ 20 class view{ 21 22 constructor(){ 23 if(!this.client){this.getclient();} 24 if(!this.gui){this.getgui();} 25 } 26 27 //创建html元素 28 add(fel, elemname, id, cls){ 29 //创建一个元素 30 let el = document.createelement(elemname); 31 //设置el id 和 class 32 if(id){el.setattribute('id',id);} 33 if(cls){el.classname = cls;} 34 //把el添加到fel并显示(渲染el) 35 if(fel){fel.appendchild(el);} 36 return el; 37 } 38 39 //删除html元素 40 remove(){ 41 let k, arg = arguments, err = []; 42 for(k = 0; k < arg.length; k++){ 43 if(this.isel(arg[k]) === false){err.push(arg[k]); continue;} 44 arg[k].parentnode.removechild(arg[k]); 45 } 46 if(err.length > 0){return {err:'这里有一些删除失败的元素', arr:err};} 47 return true; 48 } 49 50 //id获取html元素 51 get(id){ 52 return document.getelementbyid(id); 53 } 54 55 //获取可视宽高 56 getclient(){ 57 view.prototype.client = { 58 w:document.documentelement.clientwidth || document.body.clientwidth || window.innerwidth, 59 h:document.documentelement.clientheight || document.body.clientheight || window.innerheight, 60 }; 61 } 62 63 //通过parentnode检查元素是否存在于页面中 64 isel(el){ 65 if(typeof(el) !== 'object'){return false;} 66 //被删除之后的html元素object的 parentnode等于null 67 if(!el.parentnode){return false;} 68 return true; 69 } 70 71 //元素绑定事件 72 addevent(target, ev, callback){ 73 target.addeventlistener(ev, function(e){e.preventdefault(); if(callback){callback(e);}}, false); 74 } 75 76 removeevent(target, ev, callback){ 77 target.removeeventlistener(ev, (e)=>{if(callback)callback(e);}, false); 78 } 79 80 //创建控制器元素 81 getgui(){ 82 var tar = this, timer = 0, timermax = 10, _isbind = true; 83 var elem = this.add(document.body, 'div', 'guiid', 'box-shadown box-scroll-block'); 84 85 var o = function (obj, data, info, title, isbind){ 86 this.obj = obj; 87 if(typeof(this.obj) !== "object"){return;} 88 if(typeof(isbind) === "boolean"){_isbind = isbind;} 89 this.arr = []; 90 var k, bs = [], fs = [], ns = []; 91 var ti = title || "calss", fel = line(ti, timer++); 92 var t = typeof(data), a = array.isarray(data); 93 94 if(!data){for(k in this.obj){this.arr.push(k);}} 95 else if(a === true){this.arr = data;} 96 else if(t !== "object"){this.arr.push(data);} 97 else{return;} 98 99 var len = this.arr.length; 100 for(k = 0; k < len; k++){ 101 t = typeof(this.obj[this.arr[k]]); 102 if(t === "boolean"){bs.push(this.arr[k]);} 103 else if(t === "function"){fs.push(this.arr[k]);} 104 else if(t === "number"){ns.push(this.arr[k]);} 105 else{continue;} 106 } 107 check(obj, bs, fel); 108 click(obj, fs, fel); 109 range(obj, ns, info || {}, fel); 110 } 111 112 o.prototype.elem = elem; 113 114 //添加 复选框(boolean) fel.appendchild(el); 115 var check = function (obj, arr, fel){ 116 var p = tar.add(fel, 'p'), size = 0; 117 118 var create = (val)=>{ 119 let i = tar.add(p, 'input'); 120 let s = tar.add(p, 'span'); 121 i.type = "checkbox"; 122 i.checked = obj[val]; 123 s.innerhtml = " "+val+", "; 124 tar.addevent(i, 'change', (e)=>{obj[val] = e.target.checked;}); 125 size += i.offsetwidth; 126 size += s.offsetwidth; 127 return {i:i, s:s}; 128 } 129 130 var k, len = arr.length; 131 for(k = 0; k < len; k++){ 132 let el_f = create(arr[k]); 133 if(size > 280 && k !== 0){ 134 tar.remove(el_f.i, el_f.s); 135 arr.splice(0, k); 136 check(obj, arr, fel); 137 return; 138 } 139 bind(obj, arr[k], (old, now)=>{el_f.i.checked = now; return now;}); 140 } 141 } 142 143 //添加 按钮(function) 144 var click = function (obj, arr, fel){ 145 var p = tar.add(fel, 'p'), size = 0; 146 147 var create = (val)=>{ 148 let i = tar.add(p, 'input'); 149 let s = tar.add(p, 'span'); 150 i.type = "button"; 151 i.value = val; 152 s.innerhtml = ", "; 153 tar.addevent(i, 'click', obj[val]); 154 size += i.offsetwidth; 155 size += s.offsetwidth; 156 return {i:i, s:s}; 157 } 158 159 var k, len = arr.length; 160 for(k = 0; k < len; k++){ 161 let el_f = create(arr[k]); 162 if(size > 280 && k !== 0){ 163 tar.remove(el_f.i, el_f.s); 164 arr.splice(0, k); 165 click(obj, arr, fel); 166 return; 167 } 168 } 169 } 170 171 //添加 计量控制器(number) info: object 可选 默认[min -1, max 1, step0.1] 172 var range = function (obj, arr, info, fel){ 173 var di = [-1, 1, 0.1]; if(array.isarray(info) === true){di = info;} 174 175 var create = (val)=>{ 176 let c = info[val] || di; if(c[2] < 0){c[2] = 1;} 177 if(obj[val] < c[0] || obj[val] > c[1]){return;} 178 let p = tar.add(fel, 'p'), i = tar.add(p, 'input'); 179 i.type = "range"; i.value = obj[val]; i.min = c[0]; i.max = c[1]; i.step = c[2]; 180 let nul = tar.add(p, 'span'); nul.innerhtml = " "; 181 let is = tar.add(p, 'input'); is.type = "tel"; is.value = obj[val]; 182 let key = false, x, xs, s = tar.add(p, 'span'); s.innerhtml = " "+val; 183 184 let getnum = (num)=>{ 185 if(num === obj[val]){return;} 186 if(typeof(num) !== "number" || isnan(num) === true){ 187 i.value = obj[val]; is.value = obj[val]; 188 return; 189 } 190 if(num > c[0] && num < c[1]){ 191 return num; 192 }else if(num > c[0]){ 193 return c[1]; 194 }else if(num < c[1]){ 195 return c[0]; 196 } 197 } 198 199 let setnum = (num)=>{ 200 if(num !== undefined){ 201 i.value = num; 202 is.value = num; 203 obj[val] = num; 204 } 205 } 206 207 tar.addevent(is, 'blur', (e)=>{setnum(getnum(math.round(number(e.target.value)/c[2])*c[2]));}); 208 tar.addevent(i, 'mousedown', (e)=>{i.focus(); x = e.offsetx; key = true;}); 209 tar.addevent(document.body, 'mouseup', (e)=>{key = false;}); 210 tar.addevent(document.body, 'mousemove', (e)=>{ 211 if(key === true){ 212 if(e.offsetx < x){xs = obj[val] - c[2];} 213 else if(e.offsetx > x){xs = obj[val] + c[2];} 214 setnum(getnum(xs)); 215 216 x = e.offsetx; 217 } 218 }); 219 220 bind(obj, arr[k], (old, now)=>{ 221 let num = getnum(math.round(number(now)/c[2])*c[2]); 222 i.value = num; 223 is.value = num; 224 return num; 225 }); 226 } 227 228 var k, len = arr.length; 229 for(k = 0; k < len; k++){create(arr[k]);} 230 } 231 232 //添加 颜色选择器(16进制数) 233 var color = function (){ 234 235 } 236 237 //添加 标题, 分格功能, 隐藏或显示 ← ↑ → ↓ ↖ ↙ ↗ ↘ ↕ 238 var line = function (title, timer){ 239 var t_con_b = timer + " " + title + " " + " ↓"; 240 var t_con_t = timer + " " + title + " " + " ↑"; 241 var l = tar.add(elem, 'p', null, "p-min-shadown-a"); 242 l.style.cursor = "pointer"; 243 var t = tar.add(elem, "p"); 244 t.innerhtml = t_con_b; 245 t.style = "color:#bd810e; cursor:pointer;"; 246 var fel = tar.add(elem, "div"), dis = false; 247 248 var ev_run = ()=>{ 249 dis = !dis; 250 if(dis === true){ 251 fel.style.display = "none"; l.classname = "p-min-shadown-b"; 252 t.innerhtml = t_con_t; 253 }else{ 254 fel.style.display = "block"; l.classname = "p-min-shadown-a"; 255 t.innerhtml = t_con_b; 256 } 257 } 258 259 tar.addevent(l, 'click', ev_run); 260 tar.addevent(t, 'click', ev_run); 261 return fel; 262 } 263 264 //绑定 obj属性 265 var bind = function (obj, pro, fun){ 266 if(_isbind === false){return;} 267 var _val = obj[pro]; 268 object.defineproperty(obj, pro, { 269 get(){return _val;}, 270 set(val){ 271 if(fun) _val = fun(_val, val); 272 } 273 }); 274 } 275 276 view.prototype.gui = o; 277 delete(view.prototype.getgui); 278 } 279 280 }
index.js
1 //创建 主页 3d 视图 键盘 w a s d移动 鼠标 点击滑动旋转 2 function showthreeview(v){ 3 var o = { 4 aaa : false, 5 bbb : true, 6 ccc: true, 7 eee : 0, 8 fff : 25, 9 ggg : 52, 10 hhh : ()=>{console.log(1);}, 11 iii : ()=>{}, 12 mmm : ()=>{}, 13 14 j : "123", 15 k : {}, 16 p : [], 17 q : null, 18 u : undefined 19 } 20 var ceshi = new v.gui(o, null, [0, 100, 0.1]); console.log(ceshi); 21 new v.gui(three, null, null, "three"); 22 new v.gui(three.cmtp, null, [0, 100, 1], "鼠标平移功能"); 23 24 25 26 var land = new three.land(); //地面 27 //land.group.remove(mesh) 28 29 var mesh_a = land.meshs.get(0);//创建物体 a 30 var mesh_b = land.meshs.get(1);//创建物体 b 31 mesh_a.rotatex(math.pi * 0.5); 32 land.group.add(mesh_a, mesh_b); 33 34 //组合运算 35 var mesh_bsp = three.getbsp(mesh_a, mesh_b, "subtract");//获取组合后的 物体 bsp(已经转换为buff缓冲几何体了) 36 mesh_bsp.position.set(300, 0, 0); 37 land.group.add(mesh_bsp); 38 39 40 }
1 "use strict" 2 3 function loadfile(data, success, run){ 4 var arr = []; 5 if(typeof(data) === 'string') arr.push(data); 6 if(array.isarray(data) === true) arr = data; 7 var max = 50, len = arr.length, t = 0, load = (url)=>{ 8 if(run) run(t, len); 9 if(t === len || t > max){ 10 if(success) success(t, len); 11 return; 12 } 13 let script = document.createelement('script'); 14 script.type = "text/javascript"; 15 script.src = url; 16 document.body.appendchild(script); 17 script.onload = (e)=>{t++; load(arr[t]);} 18 } 19 load(arr[t]); 20 } 21 22 loadfile([ 23 "./js/lib/webgl.js", //是否支持webgl 24 "./js/lib/three_114.min.js", //threejs 3d库 25 "./js/lib/orbitcontrols.js", //控制器 26 "./js/lib/tween.min.js", //动画库 27 "./js/lib/threebsp.js", //布尔运算 28 29 "js/func.js", //methods 30 "js/initthree.js" //init threejs r114 31 ], main, (num, allnum)=>{console.log("已下载: " + num + "/ " + allnum);}); 32 33 //创建一个ajax请求, 前往index.php验证用户是否已登录 34 //如果ajax返回的是false说明用户还没有登录成功,并前往 view.php, 35 //否则ajax返回用户信息对象 36 function main(){ 37 new ajax({ 38 url:"./php/index.php", 39 method:"get", 40 success:(data)=>{ 41 let d = json.parse(data), v = new view(); 42 if(d === false){location.href = "./login/view.php"; return;} 43 showuserinfo(d.val, v);//用户信息视图 44 showthreeview(v);//场景3d视图 45 } 46 }); 47 } 48 49 //退出 50 function exit(){ 51 if(new func().isrun({id:"testid"}) !== true){console.log("你点得太快了,服务器跟不上"); return;} 52 new ajax({ 53 url:"./php/exit.php", 54 method:"get", 55 success:(data)=>{main();} 56 }); 57 } 58 59 //创建html p元素 60 function create(v, fel, content){ 61 let p = v.add(fel, "p"); 62 p.innerhtml = content || ""; 63 return p; 64 } 65 66 //创建登录成功后的主页内容 67 function showuserinfo(user, v){//console.log(user); 68 69 var lid = v.get("loginboxid"); 70 71 var elem_name = create(v, lid, "你好: " + user.username); 72 elem_name.innerhtml += "<input type = 'button' id = 'exitid' value = '退 出' />"; 73 v.get('exitid').onclick = ()=>{exit();}//退出按钮 74 75 create(v, lid, "我知道你的邮箱是: " + user.email); 76 77 switch(user.like.length){ 78 case 1 : 79 create(v, lid, "我还知道你喜欢: " + user.like[0]); 80 break; 81 case 2 : 82 create(v, lid, "我还知道你喜欢: " + user.like[0]); 83 create(v, lid, "还有: " + user.like[1]); 84 break; 85 case 3 : 86 create(v, lid, "我还知道你喜欢: " + user.like[0]); 87 create(v, lid, "还有: " + user.like[1]); 88 create(v, lid, "还有: " + user.like[2]); 89 break; 90 default : break; 91 } 92 lid.style = "visibility:visible;"; 93 //lid居中显示 94 /* let x = math.round((v.client.w/2) - (lid.offsetwidth/2)); 95 let y = math.round((v.client.h/2) - (lid.offsetheight/2)) - 16; 96 lid.style = "left:"+x+"px; top:"+y+"px; visibility:visible;"; */ 97 } 98 99 100 101 //创建 主页 3d 视图 键盘 w a s d移动 鼠标 点击滑动旋转 102 function showthreeview(v){ 103 var o = { 104 aaa : false, 105 bbb : true, 106 ccc: true, 107 eee : 0, 108 fff : 25, 109 ggg : 52, 110 hhh : ()=>{console.log(1);}, 111 iii : ()=>{}, 112 mmm : ()=>{}, 113 114 j : "123", 115 k : {}, 116 p : [], 117 q : null, 118 u : undefined 119 }//gui使用示例: 120 new v.gui(o); 121 new v.gui(three, null, null, "three"); 122 new v.gui(three.cmtp, null, [0, 100, 1], "鼠标平移功能"); 123 124 125 126 var land = new three.land(); //地面 127 //land.group.remove(mesh) 128 129 var mesh_a = land.meshs.get(0);//物体a 130 var mesh_b = land.meshs.get(1);//物体b 131 mesh_a.rotatex(math.pi * 0.5); 132 land.group.add(mesh_a, mesh_b); 133 //物体 bsp 134 var mesh_bsp = three.getbsp(mesh_a, mesh_b, "subtract");//组合运算 135 mesh_bsp.position.set(300, 0, 0); 136 land.group.add(mesh_bsp); 137 138 139 }