【Three.js】OribitControls 在全景图中的使用

现有这么一个需求，使用OribitControls作为控制器，制作一个全景图查看器。但是OribitControls是绕着target的控制器，不是第一人称控制器，无法做到lookAt功能，事实上，OribitControls内部每次update都会调用传入相机的lookAt函数。虽然不执行OribitControls的update可以强制调用camera的lookAt，但是在下一次操作结束后，又会恢复。本文主要记录解决这个问题过程。

为什么要用OribitControls？
项目里已经在用这个控制器，本人对Three.js生疏，OribitControls提供阻尼系数等，提供更多方便的API调用。

对于全景查看，Threejs官方示例提供2种实现方法：
基于OribitControls： panorama / cube
基于自定义事件监听：panorama / equirectangular

基于OribitControls示意图：

如果直接调用camera的lookAt看先蓝色三角形：

这并未改变那么OribitControls的target和内部累计的操作delta/offset值，下次操作还是会从黄色三角形所在区域视角开始。

最合适的方法是更新camera自身的位置，如下图：

事实上，camera的位置总是在半径为0.01(经验值，尽量小于贴全景图的sphere的半径或box的边长)的球上：

因此当看需要看向某一物体时，位置$p=(x,y,z)$，应该将camera位置设置为$q=-\frac{p}{length(p)/0.01}$，代码：

public cameraLook(position: THREE.Vector3){
	let cameraPosition = position.clone().divideScalar( this.position.length()/1e-3 || 1 ).negate();
	//this.camera.position.set(cameraPosition.x, cameraPosition.y, cameraPosition.z);
	this.oribitControls.object.position.set(cameraPosition.x, cameraPosition.y, cameraPosition.z);
}

其他：
注意需要移动时，target和camera的position都需要改变！
以下模拟俯视视角时，水平移动：

public cameraLook(position: THREE.Vector3){
	this.orbitControls.object.position.setX(position.x);
	this.orbitControls.object.position.setY(position.y);
	this.orbitControls.target.setX(position.x);
	this.orbitControls.target.setY(position.y);
}

---

以下可不看。

由于用的是npm安装的threejs，所以是不太方便直接修改库文件，否则可以对库文件修改(可以用钩子修改，不过并不是nodejs大佬，不会用)，把rotationLeft和pan设为public直接调用。
还尝试过模拟事件触发：

public simulationRotation(offset: THREE.Vector2){
	console.log("pointerdown")
	let pointerdownEvent = new PointerEvent("pointerdown", {pointerType: "mouse", button: 0});
	this.renderer.domElement.dispatchEvent(pointerdownEvent)
	
	console.log("pointermove")
	let pointermoveEvent = new PointerEvent("pointermove", {pointerType: "mouse",
		clientX:offset.x,
		clientY:offset.y,
	});
	this.renderer.domElement.dispatchEvent(pointermoveEvent)
	
	console.log("onPointerUp")
	let onPointerUpEvent = new PointerEvent("onPointerUp", {pointerType: "mouse"});
	this.renderer.domElement.dispatchEvent(onPointerUpEvent);

}

计算复杂，并且也是行不通的，虽然能够触发pointerdown事件，但是pointermove和真实的鼠标事件发生冲突，导致触发不正常，所以没有继续尝试。

本文地址：https://blog.csdn.net/qq_29598161/article/details/110148418