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 服务器环境才能运行