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

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.οnmοusedοwn=function (event) {
startX = event.clientX;
startY = event.clientY;
};
document.body.οnmοusemοve=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;
}
};
}

Three.js用鼠标控制场景移动的代码相关推荐

实现鼠标控制场景的视野及移动
1.移动场景中的物体 using UnityEngine; using System.Collections;public class DragAndDrog : MonoBehaviour {pri ...
HTML鼠标悬浮空心圆点切换图片,js实现鼠标切换图片（无定时器）
本文实例为大家分享了js实现鼠标切换图片的具体代码,供大家参考,具体内容如下实现效果,可以利用鼠标移动在对应的小点点上,或者点击左右两侧的箭头切换图片,并在图片的上方显示出图片的页数,下方显示出对应 ...
Unity3d C# 实现纯鼠标平滑控制场景摄像头(相机)实现自由旋转、移动和围绕节点移动旋转等功能(含源码工程)
相机控制前言效果漫游效果围绕节点效果实现过程功能范围搭建场景编码实现变量设置自由漫游观察节点功能使用项目工程瑕疵前言在很多情况下我们都会用到如题的功能,在一般情况下我们 ...
计算机视觉课程第六讲-带你简单快速学习2021年春晚背后刘德华与背景分离切换到另一场景视觉算法（上集）：OpenCV4鼠标控制图像和视频任意位置放大和缩小
计算机视觉课程第六讲-带你简单快速学习2021年春晚背后刘德华与背景分离切换到另一场景视觉算法(上集):OpenCV4鼠标控制图像和视频任意位置放大和缩小本专栏将会带大家学习 <计算机视觉与图 ...
js鼠标移动到指定位置_Python: pyautogui模块之鼠标控制
文章背景:PyAutoGUI是一个纯Python的GUI自动化工具,其目的是可以用程序自动控制鼠标和键盘操作,利用它可以实现自动化任务.pyautogui模块中包含了一些函数,可以模拟鼠标移动.按键和 ...
html点击控制盒子左右移动,JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例...
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例发布时间:2020-10-04 12:47:25 来源:脚本之家阅读:121 作者:s_psycho 本文实例讲述了JS实现鼠标拖拽盒子移动及右键 ...
Three.js使用PointerLockControls控制相机实现第一人称视角
上传视频麻烦,所以直接上代码.自己看官网案例写的 <template><div><div id="container"></div> ...
用three.js写一个小场景
上次我们用three.js写了一个下雨的动画,主要是用粒子.这次是用three.js搭建了一个小场景. 项目地址依然是:https://github.com/alasolala/threejs-tut ...
【企业数字化转型】数据可视化技术：Three.js 用Physijs在场景中添加物理效果
Three.js 极简教程简介 Three.JS 是什么 Three.JS是基于WebGL的Javascript开源框架,简言之,就是能够实现3D效果的JS库. Three.JS 能做什么利用Th ...

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

Three.js用鼠标控制场景移动的代码相关推荐

最新文章

热门文章