Three.js-交互

交互

Camera的lookAt与Control的冲突问题

参考这个文章：

之所以直接修改camera的lookAt无效，是因为与controls的target起了冲突，所以我每次需要修改camera朝向时，顺便将controls的target也一并修改，问题就解决了：

let v = new THREE.Vector3(100, 0, 100)
dragControls.target = v
trackballControls.target = v
camera.lookAt(v)

控制器类型

类名	名称	描述
ArcballControls	弧形球控制器	在一个球体轨迹上控制物体的旋转，类似Unity的操控。比较特别的是，这个控制器是通过事件控制的，而不是在RAF中控制。支持start、end、change事件。
DragControls	拖动控制器	这个也是通过事件控制的，支持dragstart、drag、dragend、hoveron、hoveroff事件。
FirstPersonControls	第一人称控制器	This class is an alternative implementation of FlyControls.
FlyControls	飞行控制器	行模拟器控件,用键盘和鼠标控制相机移动和旋转，动作类型很多
OrbitControls	轨道控制器	注意在修改camera信息后，记得调用控制器的update()方法
PointerLockControls	指针锁定控制器	基于浏览器的Pointer Lock API实现，这是3D游戏最好的控制器，这个也是通过事件控制的，支持change、lock、unlock事件。注意：这个只是锁定鼠标，具体的前进后退、跳跃、平移等等，是额外通过键盘事件实现的，详见Demo的代码。
TrackballControls	轨迹球控制器	最常用的控件,用鼠标控制相机移动和转动，适合球形空间的操控。和OrbitControls很类似，区别在于没有up的向量方向，这意味着，如果相机在“北”和“南”两极上空运行，它不会翻转到“正上方”。
TransformControls	位移控制器	x、y、z三个轴移动，类似Unity的操控。和其他控制器不同，这个控制器不操控场景的Camera，直接操控场景中具体的3D物体。

• 翻滚控件RollControls(翻滚控件是飞行控件的简化版,控制相机绕Z轴旋转)；
• 路径控件PathControls(控制相机在预定义的轨道上移动和旋转)；

从FlyControls看控制器的实现原理

最终还是修改Camera或者物体的position和rotation

缩放、旋转、平移

需要安装three-orbitcontrols这个库。

npm i three three-orbitcontrols --save

lookAt： https://blog.csdn.net/qq_42206266/article/details/80566992

矩阵变换与旋转： https://www.cnblogs.com/chenjy1225/p/9640580.html

这里给个默认的简单设置，可以支持控制，包括缩放、旋转、平移等：

new THREE.OrbitControls(camera, renderer.domElement);

不知道是不是我笔记本核显的性能问题，这个移动起来有拖影，响应不够快。可以晚上回家用台式独显测试下。

点击

THREE.Raycaster：

https://threejs.org/docs/#api/en/core/Raycaster

原理解读：

https://www.cnblogs.com/lst619247/p/9071233.html

特别注意：

mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

是针对全屏的情况，如果是一个div范围，窗口的宽度与高度要改成div的宽度与高度，event.clientX与ent.clientY也要改成event.layerX 与event.layerY：

onMouseMove(event:any) {
    event.preventDefault();
    this.mouse.x = (event.layerX / this.dom.offsetWidth) * 2 - 1;
    this.mouse.y = -(event.layerY / this.dom.offsetHeight) * 2 + 1;
}

参考资料

很不错的一个练手项目，了解各种交互操控方式：

https://threejs.org/examples/misc_controls_transform.html