Three.js用鼠标控制场景移动的代码

来源：互联网发布：linux 用户环境变量编辑：程序博客网时间：2024/05/17 08:36

Three.js中的场景移动主要是通过摄像机移动来实现的。

下面是自己写的代码，主要是鼠标滚轮实现前进与后退和四个方向的移动。

windowAddMouseWheel();addTouchListener();/** * 鼠标滚轮前进雨后退 */function windowAddMouseWheel() {    var scrollFunc = function (e) {        var positionZ=0;        e = e || window.event;        if (e.wheelDelta) {  //判断浏览器IE，谷歌滑轮事件       camera.position.z=camera.position.z+e.wheelDelta*0.1;            console.log(e.wheelDelta);        } else if (e.detail) {  //Firefox滑轮事件            camera.position.z=camera.position.z+e.detail*0.1;            console.log(e.detail);        }        if(positionZ<=1000&&positionZ>=0.1){            camera.position.z=positionZ;        }    };    //给页面绑定滑轮滚动事件    if (document.addEventListener) {        document.addEventListener('DOMMouseScroll', scrollFunc, false);    }//滚动滑轮触发scrollFunc方法    window.onmousewheel = document.onmousewheel = scrollFunc;}/** * 上下左右移动相机 */function addTouchListener() {    var startX,endX,startY,endY;    document.body.onmousedown=function (event) {        startX = event.clientX;        startY = event.clientY;    };    document.body.onmousemove=function (event) {        if (event.button == 1 ) {            endX = event.clientX;            endY = event.clientY;            var x=endX-startX;            var y=endY-startY;            if (Math.abs(x)>Math.abs(y)) {                camera.position.x=camera.position.x-x*0.05;            } else {                camera.position.y=camera.position.y+y*0.05;            }            startX=endX;            startY=endY;        }    };}

阅读全文

0 0