javascript 3d網頁 基于 three.js

  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 = "./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 = '退 出' />";
 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 }

展示:

three.js 版本號為 114 (需要 php 服務器環境才能運行