1 "use strict" 2 3 //加載js檔案 4 loadFile([ 5 "./js/lib/WebGL.js",//檢查 是否支持webGL 插件 6 "./js/lib/three_114.min.js",//3d庫 7 "js/func.js" 8 ], main); 9 10 //創建一個ajax請求, 前往index.php驗證用戶是否已登錄 11 //如果Ajax回傳的是false說明用戶還沒有登錄成功，并前往 view.php, 12 //否則ajax回傳用戶資訊物件 13 function main(){ 14 new Ajax({ 15 url:"./php/index.php", 16 method:"get", 17 success:(data)=>{ 18 let d = JSON.parse(data); 19 if(d === false){location.href = "https://www.cnblogs.com/weihexinCode/p/login/view.php"; return;} 20 showUserInfo(d.val, new View());//用戶資訊視圖 21 showThreeView();//場景3d視圖 22 } 23 }); 24 } 25 26 //退出 27 function exit(){ 28 if(new Func().isRun({id:"testId"}) !== true){console.log("你點得太快了,服務器跟不上"); return;} 29 new Ajax({ 30 url:"./php/exit.php", 31 method:"get", 32 success:(data)=>{main();} 33 }); 34 } 35 36 //創建html p元素 37 function create(v, fel, content){ 38 let p = v.add(fel, "p"); 39 p.innerHTML = content || ""; 40 return p; 41 } 42 43 //創建登錄成功后的主頁內容 44 function showUserInfo(user, v){//console.log(user); 45 46 var lid = v.get("loginBoxId"); 47 48 var elem_name = create(v, lid, "你好: " + user.UserName); 49 elem_name.innerHTML += "<input type = 'button' id = 'exitId' value = 'https://www.cnblogs.com/weihexinCode/p/退 出' />"; 50 v.get('exitId').onclick = ()=>{exit();}//退出按鈕 51 52 create(v, lid, "我知道你的郵箱是: " + user.Email); 53 54 switch(user.Like.length){ 55 case 1 : 56 create(v, lid, "我還知道你喜歡: " + user.Like[0]); 57 break; 58 case 2 : 59 create(v, lid, "我還知道你喜歡: " + user.Like[0]); 60 create(v, lid, "還有: " + user.Like[1]); 61 break; 62 case 3 : 63 create(v, lid, "我還知道你喜歡: " + user.Like[0]); 64 create(v, lid, "還有: " + user.Like[1]); 65 create(v, lid, "還有: " + user.Like[2]); 66 break; 67 default : break; 68 } 69 lid.style = "visibility:visible;"; 70 //lid居中顯示 71 /* let x = Math.round((v.client.w/2) - (lid.offsetWidth/2)); 72 let y = Math.round((v.client.h/2) - (lid.offsetHeight/2)) - 16; 73 lid.style = "left:"+x+"px; top:"+y+"px; visibility:visible;"; */ 74 } 75 76 77 //創建 主頁 3d 視圖 78 /* 79 鍵盤 w a s d移動 80 滑鼠 點擊滑動旋轉 81 */ 82 function showThreeView(){ 83 84 var three = new Three(); 85 86 //場景 87 var scene = three.createScene(); 88 89 //相機 90 var camera = three.createCamera(); //console.log(camera); 91 92 //渲染器 93 var renderer = three.createRenderer(); 94 95 //燈光 96 var light = three.createLight(scene); 97 98 //控制器 99 three.createControl(camera, renderer); 100 101 //影片回圈 102 three.animate(scene, camera, renderer); 103 104 //創建地面 105 three.createGround(); 106 107 //創建院墻 108 three.createWall({isSetY:true}); 109 110 //創建鐵門 111 three.createGate(); 112 113 console.log(three); 114 alert("鍵盤 w a s d移動, 滑鼠 點擊滑動旋轉"); 115 }
1 "use strict" 2 3 /**方法類 4 5 */ 6 class Func{ 7 8 constructor(){} 9 10 //獲取一個字串的長度 包含中文 11 getStrLen(str){ 12 let len = 0, i, c; 13 for (i = 0; i < str.length; i++){ 14 c = str.charCodeAt(i); 15 if((c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f)){len++;}else{len+=2;} 16 } 17 return len; 18 } 19 20 //獲取目標范圍亂數(n保留浮點數數量) 21 getran(min, max, n){ 22 return Number((Math.random() * (max - min) + min).toFixed(n || 0));//包含max 23 } 24 25 //獲取2點距離 26 getPosLen(sdot, edot){ 27 return parseInt(Math.sqrt(Math.pow(Math.abs(sdot.x - edot.x), 2) + Math.pow(Math.abs(sdot.y - edot.y), 2))); 28 } 29 30 //檢測是否是pc端 31 isPC(){ 32 let userAgent = navigator.userAgent; 33 let agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"]; 34 let ispc = true, v; 35 for(v = 0; v < agents.length; v++){ 36 if (userAgent.indexOf(agents[v]) > 0){ispc = false; break;} 37 } 38 return ispc; 39 } 40 41 //防止多次提交或執行(在規定時間段內只允許執行一次) 默認 3000ms 42 isRun(object){ 43 //object = {id: string 必須, isExit, time} 44 //isEnit : boolean 可選 如果為 true 則洗掉對應 id 的物件 45 //time : number 可選 默認間隔時間 3000 秒 46 var v = object || {}; 47 if(this.list === undefined){Func.prototype.list = {};} 48 if(v.id === undefined || typeof(v.id) !== "string"){return "引數id錯誤";} 49 if(v.isExit === true){delete(this.list[v.id]); return "洗掉物件: "+v.id;} 50 var o = this.list[v.id]; 51 if(!o){this.list[v.id] = {time:v.time || 3000, nowTime:new Date().getTime()}; return true;} 52 var t = new Date().getTime() - o.nowTime; 53 if(t < o.time){return o.time - t;} 54 o.nowTime = new Date().getTime(); 55 return true; 56 } 57 58 } 59 60 61 62 /** 創建Ajax請求: 63 obj = { 64 url: string 必須, 請求路徑 65 method: string 可選, post 或 get請求， 默認post請求 66 data: string 可選, 要發送的資料, 默認為"" 67 asy: boolean 可選, 是否異步執行, 默認為true 68 success: function 可選, 成功回呼 69 error: function 可選, 失敗回呼 70 run: function 可選, 請求中回呼 71 } 72 73 xhr.readyState: 74 0: 請求未初始化 75 1: 服務器連接已建立 76 2: 請求已接收 77 3: 請求處理中 78 4: 請求已完成，且回應已就緒 79 xhr.status: 80 200: "OK" 81 404: 未找到頁面 82 */ 83 class Ajax{ 84 85 constructor(obj){ 86 let o = obj || {} 87 this.url = o.url || null; 88 this.method = o.method || "post"; 89 this.data = https://www.cnblogs.com/weihexinCode/p/o.data ||""; 90 this.asy = o.asy || true; 91 this.callback_suc = o.success || function (){}; 92 this.callback_err = o.error || function (){}; 93 this.callback_run = o.run || function (){}; 94 this.request(); 95 } 96 97 request(){ 98 if(!this.url){this.callback_err(); return;} 99 let xhr = new XMLHttpRequest(); 100 xhr.onreadystatechange = (e)=>{ 101 if(e.target.readyState === 4 && e.target.status === 200){ 102 this.callback_suc(e.target.responseText); 103 return; 104 } 105 this.callback_run(e); 106 } 107 xhr.onerror = (e)=>{ 108 this.callback_err(e); 109 } 110 if(this.method == "get"){ 111 xhr.open(this.method, this.url, this.asy); 112 xhr.send(); 113 return; 114 } 115 xhr.open(this.method, this.url, this.asy); 116 xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 117 xhr.send(this.data); 118 } 119 120 } 121 122 123 124 /** 視圖類 125 126 */ 127 class View{ 128 129 constructor(){ 130 if(!this.client){View.prototype.client = this.getClient();} 131 } 132 133 //創建html元素 134 add(fel, elemName, id, cls){ 135 //創建一個元素 136 let el = document.createElement(elemName); 137 //設定el id 和 class 138 if(id){el.setAttribute('id',id);} 139 if(cls){el.className = cls;} 140 //把el添加到fel并顯示（渲染el） 141 if(fel){fel.appendChild(el);} 142 return el; 143 } 144 145 //洗掉html元素 146 remove(){ 147 let k, arg = arguments, err = []; 148 for(k = 0; k < arg.length; k++){ 149 if(this.isEl(arg[k]) === false){err.push(arg[k]); continue;} 150 arg[k].parentNode.removeChild(arg[k]); 151 } 152 if(err.length > 0){return {err:'這里有一些洗掉失敗的元素', arr:err};} 153 return true; 154 } 155 156 //id獲取html元素 157 get(id){ 158 return document.getElementById(id); 159 } 160 161 //獲取可視寬高 162 getClient(){ 163 return { 164 w:document.documentElement.clientWidth || document.body.clientWidth, 165 h:document.documentElement.clientHeight || document.body.clientHeight 166 }; 167 } 168 169 //通過parentNode檢查元素是否存在于頁面中 170 isEl(el){ 171 if(typeof(el) !== 'object'){return false;} 172 //被洗掉之后的html元素object的 parentNode等于null 173 if(!el.parentNode){return false;} 174 return true; 175 } 176 177 //元素系結事件 178 addEvent(target, ev, callback){ 179 target.addEventListener(ev, function(e){if(callback){callback(e);}}, false); 180 } 181 182 } 183 184 185 186 /** 3d庫 187 three.js --- version number 114 188 create scene 189 */ 190 class Three{ 191 192 constructor(){ 193 if (WEBGL.isWebGLAvailable() === false){ 194 alert("你不支持WebGL"); 195 return; 196 } 197 this.view = new View(); 198 THREE.Cache.enabled = true;//加載器啟用快取 199 this.clock = new THREE.Clock();// 200 this.group = new THREE.Group();//創建一個 分組 201 this.textures = this.createTexture();//存放 紋理 的物件 202 } 203 204 //創建 場景 205 createScene(){ 206 var scene = new THREE.Scene(); 207 //scene.fog = new THREE.Fog(0xcce0ff, 800, 1000);//線性霧 208 scene.background = new THREE.CubeTextureLoader() 209 .setPath('img/cube/skyboxsun25deg/') 210 .load( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ] ); 211 if(this.group){scene.add(this.group);} 212 return scene; 213 } 214 215 //創建 相機 216 createCamera(){ 217 var camera = new THREE.PerspectiveCamera(75, this.view.client.w/this.view.client.h, 1, 5000); 218 camera.position.set(0, 150, 300);//相機起始位置 219 return camera; 220 } 221 222 //創建 渲染器 223 createRenderer(){ 224 var renderer = new THREE.WebGLRenderer({ 225 antialias : true,//抗割齒 226 powerPreference:"high-performance"//選擇高性能GPU渲染 227 }); 228 renderer.setSize(this.view.client.w, this.view.client.h);//設定渲染大小 229 renderer.setPixelRatio(window.devicePixelRatio);//渲染矯正 230 renderer.gammaFactor = 2.2;//著色校正 231 renderer.physicallyCorrectLights = true;//使其精確照明 232 renderer.shadowMap.enabled = true;//渲染陰影 233 //renderer.autoClear = true;//每幀自動清理快取 234 if(!renderer.extensions.get('WEBGL_depth_texture')){console.log("深度紋理擴展獲取失敗:WEBGL_depth_texture");} 235 document.body.appendChild(renderer.domElement); 236 renderer.domElement.style.zIndex = "0"; 237 renderer.domElement.style.position = "absolute"; 238 renderer.domElement.style.top = "0px"; 239 renderer.domElement.style.left = "0px"; 240 return renderer; 241 } 242 243 //創建 燈光 244 createLight(scene){ 245 scene.add(new THREE.AmbientLight(0x696969));//環境光(無處不在的光，太陽光) 246 var l_d = 1000, light = new THREE.DirectionalLight(0xF0F8FF, 1);//平行光(產生陰影的光) 247 light.position.set(-3000, 3000, -3000); 248 light.position.multiplyScalar(1); 249 //陰影 250 light.castShadow = true; 251 light.shadow.mapSize.width = 1024; 252 light.shadow.mapSize.height = 1024; 253 light.shadow.camera.left = -l_d; 254 light.shadow.camera.right = l_d; 255 light.shadow.camera.top = l_d; 256 light.shadow.camera.bottom = -l_d; 257 light.shadow.camera.near = 1; 258 light.shadow.camera.far = 6000; 259 scene.add(light); 260 return light; 261 } 262 263 //創建 控制器 264 createControl(camera, renderer){ 265 var create = ()=>{ 266 let control = new THREE.OrbitControls(camera, renderer.domElement); 267 control.target = new THREE.Vector3(0, 100, 0);//相機焦點 268 //control.minPolarAngle = Math.PI * 0.3;//向上最大角度 269 //control.maxPolarAngle = Math.PI * 0.4;//向下最大角度 270 control.minDistance = 1;//最小距離 271 control.maxDistance = 1000;//最大距離 272 control.autoRotateSpeed = 10;//自動旋轉速度 273 control.panSpeed = 100;//滑鼠旋轉速度 274 control.enableZoom = true;//是否啟用縮放 275 control.enableKeys = true;//是否啟用鍵盤 276 control.keyPanSpeed = 100;//按鍵速度 277 control.keys.LEFT = 65;//key a左 278 control.keys.UP = 87;//key w前 279 control.keys.RIGHT = 68;//key d右 280 control.keys.BOTTOM = 83;//key s后 281 this.control = control; 282 } 283 loadFile("./js/lib/OrbitControls.js", create);//加載 控制器 插件 284 } 285 286 //創建 影片回圈 287 animate(scene, camera, renderer){ 288 requestAnimationFrame(()=>{this.animate(scene, camera, renderer);}); 289 if(this.control !== undefined && this.clock !== undefined){ 290 this.control.update(this.clock.getDelta());//更新控制器 291 } 292 renderer.render(scene, camera); 293 } 294 295 //創建紋理 296 createTexture(){ 297 var load = new THREE.TextureLoader(); 298 299 var texture_ground = load.load("img/texture/ground.jpg"); 300 texture_ground.wrapS = texture_ground.wrapT = THREE.RepeatWrapping; 301 texture_ground.repeat.set(20, 20);//x y 平鋪次數 302 texture_ground.anisotropy = 2;//紋理的清晰度(值為2的幕:1, 2, 4, 8, ... 512, 1024, 2048, ...) 303 304 var texture_wall = load.load("img/texture/wall.jpg"); 305 texture_wall.wrapS = texture_wall.wrapT = THREE.RepeatWrapping; 306 texture_wall.repeat.set(2.2, 2.2); 307 texture_wall.anisotropy = 1024;//貼圖畫質 308 texture_wall.minFilter = THREE.NearestFilter;//深度紋理貼圖: 309 texture_wall.magFilter = THREE.NearestFilter;//深度紋理貼圖: 310 311 var texture_gate = load.load("img/texture/gate.jpg"); 312 texture_gate.wrapS = texture_gate.wrapT = THREE.RepeatWrapping; 313 texture_gate.repeat.set(0.03, 0.03); 314 texture_gate.anisotropy = 1024; 315 316 return {ground:texture_ground, wall:texture_wall, gate:texture_gate}; 317 } 318 319 //創建地面 land 320 createGround(group){ 321 var gro = group || this.group, w = 10000, h = 10000; 322 //gro.add(new THREE.GridHelper(w, 100));//添加網格輔助線 323 var mesh = new THREE.Mesh(//創建 物體 324 new THREE.PlaneBufferGeometry(w, h), // geometry 幾何體 325 new THREE.MeshLambertMaterial({map:this.textures.ground}) // material 材質 326 ); 327 mesh.receiveShadow = true;//接受陰影 328 mesh.rotation.x = -(Math.PI*0.5);//旋轉90度 329 mesh.matrixAutoUpdate = false;//不實時更新矩陣，提升性能 330 mesh.updateMatrix();//更新一次矩陣, 讓其旋轉90度 331 gro.add(mesh); 332 return mesh; 333 } 334 335 //創建圍墻 336 createWall(object){ 337 var o = object || {}; 338 var gro = o.group || this.group; 339 var w = 256, h = 256, d = 40; 340 var mesh = new THREE.Mesh( 341 new THREE.BoxBufferGeometry(w, h, d), 342 new THREE.MeshLambertMaterial({map:this.textures.wall}) 343 ); 344 mesh.castShadow = true;//投射陰影 345 mesh.receiveShadow = true;//接收陰影 346 mesh.customDepthMaterial = new THREE.MeshDepthMaterial({depthPacking: THREE.RGBADepthPacking});//添加陰影 347 if(o.isSetY === true){mesh.position.y = h / 2 + 1;}//調整坐標 y 348 mesh.matrixAutoUpdate = false;//不實時更新矩陣，提升性能 349 mesh.updateMatrix();//更新一次矩陣 350 gro.add(mesh); 351 return mesh; 352 } 353 354 //創建一塊 小鋼門... 355 createGate(group){ 356 var gro = group || this.group, w = 256, h = 256; 357 var shape = new THREE.Shape(), w2 = w/2, h2 = h/2; 358 shape.moveTo(-w2, h2); shape.lineTo(w2, h2); shape.lineTo(w2, -h2); 359 shape.lineTo(-w2, -h2); shape.lineTo(-w2, h2); 360 var geometry = new THREE.ExtrudeBufferGeometry(shape, { 361 depth:0, 362 bevelThickness:2, 363 bevelSize:3, 364 bevelSegments:1 365 }); 366 var material = new THREE.MeshLambertMaterial({map:this.textures.gate}); 367 var mesh = new THREE.Mesh(geometry, [material, material]); 368 mesh.castShadow = true; 369 mesh.receiveShadow = true; 370 mesh.customDepthMaterial = new THREE.MeshDepthMaterial({depthPacking: THREE.RGBADepthPacking}); 371 mesh.position.set(300, h/2+1, 0); 372 gro.add(mesh); 373 return mesh; 374 } 375 376 }Func.js
展示:
three.js 版本號為 114 (需要 php 服務器環境才能運行, 如果此demo不能運行 或 有什么疑問 請聯系我: [email protected])
完整代碼: https://pan.baidu.com/s/1qVt50gecNB2wTr8doMMwmw
提取碼: 53i3
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/143990.html
標籤：JavaScript
上一篇：VUE實作Studio管理后臺（十三）：按鈕點選輸入控制元件，input輸入框系列
下一篇：vue中的事件修飾符