欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-01 10:38:05
现有这么一个需求,使用OribitControls作为控制器,制作一个全景图查看器。但是OribitControls是绕着target的控制器,不是第一人称控制器,无法做到lookAt功能,事实上,OribitControls内部每次update都会调用传入相机的lookAt函数。虽然不执行OribitControls的update可以强制调用camera的lookAt,但是在下一次操作结束后,又会恢复。本文主要记录解决这个问题过程。为什么要用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示意图:
【Three.js】OribitControls 在全景图中的使用
如果直接调用camera的lookAt看先蓝色三角形:
【Three.js】OribitControls 在全景图中的使用
这并未改变那么OribitControls的target和内部累计的操作delta/offset值,下次操作还是会从黄色三角形所在区域视角开始。

最合适的方法是更新camera自身的位置,如下图:
【Three.js】OribitControls 在全景图中的使用
事实上,camera的位置总是在半径为0.01(经验值,尽量小于贴全景图的sphere的半径或box的边长)的球上:
【Three.js】OribitControls 在全景图中的使用
因此当看需要看向某一物体时,位置 p = ( x , y , z ) p=(x, y, z) p=(x,y,z),应该将camera位置设置为 q = − p l e n g t h ( p ) / 0.01 q=-\frac{p}{length(p)/0.01} q=length(p)/0.01p,代码:

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

相关标签: # js 图形学