携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第6天，点击查看活动详情 >
通过鼠标mousemove时间绑定实现相机位置
模型相机跟随鼠标移动,理解相机的位置对于场景的影响; 分析:监听鼠标的移动事件(mousemove),在每次移动时获取其偏移量,并将其转换为我们需要的格式,在场景渲染时将值赋值给相机的position
//width height为WebGLRenderer的宽高
// cursor 光标控制
let cursor = {x:0,y:0}
// 监听mousemove事件
window.addEventListener('mousemove',(event)=>{
// 将鼠标取值转换为-0.5 - 0.5之间
// 脑海中画一个坐标系,以场景原点为坐标原点,所以有正负之分
// event.clientX/width与event.clientY/height为0-1的取值
cursor.x = (event.clientX/width - 0.5)
// 此时y取﹣是因为页面中的clientY是从上至下是从0到1的,减去0.5则变成从-0.5到0.5的,而相机的position.y从上之下是0.5之-0.5的;
cursor.y = -(event.clientY/height - 0.5)
console.log(cursor.x)
console.log(cursor.y)
})
// 渲染器执行函数
function renderScene() {
// 设置相机的位置
camera.position.x = cursor.x*10;
camera.position.y = cursor.y*10;
// 使相机始终看着模型
camera.lookAt(mesh.position)
renderer.render(scene, camera)
// requestAnimationFrame 浏览器自带，一半每秒60帧,在dom不可见时不进行重绘/回流
requestAnimationFrame(renderScene)
}
renderScene()
实现效果 (网上找了个mp4转gif的,所以有水印,请无视!)
// 在渲染时通过cos与sin实现圆周运动就可以使得相机旋转至任意位置 Math.PI * 2的值可以看作从最左至最右的旋转角度，我设置的为刚好一圈，当>=Math.PI*2时即可以实现圆周运动
// 实现左右圆周运动
camera.position.x = Math.sin(cursor.x * Math.PI * 2) * 3;
camera.position.z = Math.cos(cursor.x * Math.PI * 2) * 3;
// 上下旋转过小则增大5，过大则减少；
camera.position.y= cursor.y * 5;
通过THREE中自带的控制器实现
DeviceOrientationControls 设备朝向控制器
通过使用设备的朝向来决定相机的朝向，常用于手机游戏中，但目前ios已停止支持；
FlyControls 飞行控制器
类似于一艘宇宙飞船飞行于模型之间，可以去设置他的移动速度和旋转速度，自动巡游；
FirstPersonControls 第一人称控制器
threejs上面描述该类是 FlyControls的另一个实现，第一人称视角并没有我们想象中那么自由，他不能改变向上的轴，导致我们无法看到顶部；
PointerLockControls 指针锁定控制器
在该控制器下，我们的鼠标指针不可见，但我们的相机由我们的鼠标控制，可以通过wasd或者键盘上的上下左右健实现相机与鼠标的移动；该控制器完美应用于游戏中；
OrbitControls 轨道控制器
该控制器就是我在（1）中使用的控制器，也是我们场景中最常用的控制器，可以使得相机围绕目标进行轨道运动，可以放大缩小相机（改变相机的position.Z值）；
// 引入轨道控制器
// 此为安装了threejs的模块引入方式 非模块的将jsm改为js
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
// 创建控制器需要传入camera与承载的画布dom
const controls = new OrbitControls(camera, renderer.domElement);
// 改变控制器的中心点，也将会是整个场景模型旋转的中心点
controls.target.y = 2;
// 此时我们的控制器以及可以正常使用，可它比较粗糙，因为当我们的鼠标移动的过快时，他的旋转会停止的更快，动画比较生硬；
// 添加阻尼，是我们的控制变得更加的真实平滑； 默认为false
controls.enableDamping = true;
介绍了轨道控制器中很少的一部分，大家可以去官方文档看全面的介绍 轨道控制链接🔗
TrackballControls 轨迹球控制器
类似于轨道控制器，但他可以无限的旋转场景；
TransformControls 变化控制器
该控制器与相机无关，用于模型的变换
如果有哪里描述不准确或者有问题,欢迎大佬指正!
(≖ᴗ≖)✧
