主要研究three.js在3D场景中基本使用:画一个简单的房子、房子上画门和玻璃、房间内放一个床、定义鼠标事件可以移动场景、动画的使用等。

1.Three.js画的一个简单的房子，模拟地板以及四堵墙 

准备素材:

3.jpg模拟地板

 

4.jpg模拟墙

 

 

代码:

结果:

 

 2.增加鼠标事件和键盘事件控制摄像头进而模拟在房间内行走

　　控制器的使用，主要的控制器如下:

 

• 轨迹球控制器的使用:(使用鼠标改变场景以及在界面实时显示相机的位置)

可用的鼠标事件如下:

 

(1)引入相关JS:

(2)创建控制器并绑定到相机上

//鼠标控制动画相关组件    var trackballControls, clock;    function initTrackballControls(){        clock = new THREE.Clock();        trackballControls = new THREE.TrackballControls(camera);        trackballControls.rotateSpeed = 1.0;        trackballControls.zoomSpeed = 1.0;        trackballControls.panSpeed = 1.0;        //        trackballControls.noZoom=false;        //        trackballControls.noPan=false;        trackballControls.staticMoving = true;        //        trackballControls.dynamicDampingFactor=0.3;    }

(3)摄像机的位置更新在render循环中完成

function render() {        requestAnimationFrame(render);        webGLRenderer.render(scene, camera);        //鼠标事件        var delta = clock.getDelta();        trackballControls.update(delta);        logCameraPosition();        if(stats){            stats.update();        }    }    function logCameraPosition(){        var logInfo = "[info]: x - " + camera.position.x + " ;y - " + camera.position.y + " ;z - " + camera.position.z;        $("#logInfo").html(logInfo);    }

如果禁用鼠标缩放可以将noZoom设为true。 

 

代码如下:

效果:

 

• 轨道控制器(支持鼠标和键盘事件)

其支持的事件如下:

(1)使用的类库是:

(2)初始化control即可

function initOrbitControls(){        controls = new THREE.OrbitControls(camera,webGLRenderer.domElement);        controls.minDistance = 1;        controls.maxDistance = 5000;    }

代码如下:

 

 

3.场景中添加一个床 (六面体),并且自定义鼠标点击事件悬浮在床上的时候弹出框

 　　这个都采用的是git上封装过的JS库来实现的，参考git地址:

　　three.js的事件机制用到的是onEvent，参考:

　　也通过tags、userData、name进行数据的绑定。

 

代码如下:

结果:

4.  在墙上挖一个玻璃

　　在墙上挖玻璃需要用到ThreeBSP.js,实际上就是求两个物体的差集之后进行添加；如果需要挖一个门，需要做的操作是:先在墙上求墙和门的差集得到一个mesh对象添加到scene中，并将门也添加到scene即可实现。

代码如下:

结果:

5.Tween动画实现旋转床

　　tween.js是一款可生成平滑动画效果的js动画库。你只需要告诉tween你想修改什么值，以及动画结束时它的最终值是什么，动画花费多少时间等信息，tween引擎就可以计算从开始动画点到结束动画点之间值，来产生平滑的动画效果。  其详细用法参考: 

 代码:

结果:

　　床会一直旋转。。。

 

6.   增加一个玻璃天窗，完成最终的房子 

　　旋转床、鼠标和键盘对场景缩放。

结果:

 

git源码地址: 

 

总结:

　　一般物体的y取的是高度是1/2；

　　旋转角度的单位是Math.PI (乘以对应的角度，1就是180度，0.5就是90度)