【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
)
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
上一篇: Koltin09.继承
推荐阅读
-
在Python的Django框架的视图中使用Session的方法
-
在Django的视图中使用form对象的方法
-
在Django的视图中使用数据库查询的方法
-
在Python的Django框架的视图中使用Session的方法
-
在Django的视图中使用form对象的方法
-
在Django的视图中使用数据库查询的方法
-
在Bootstrap开发框架的前端视图中使用@RenderPage实现页面内容模块化的隔离,减少复杂度
-
Dash-在一个图中两条数据共用x轴并且两条数据使用左右两边的不同y轴
-
使用store中的index遍历store中的数组,因为数组无法改变,即使index改变也无法在视图中更新
-
在Django的视图中使用数据库查询的方法