THREE.js Orbit控制缩放限制

时间:2018-06-16 06:13:58

标签: javascript three.js 3d

我使用的是Orbit控件,它们有一个奇怪的限制。

变焦取决于相机相对于轨道轴的球面坐标的半径。我将尝试解释它是如何工作的:

每次用户滚动时,scale的值都会发生这样的变化:

(如果用户放大)

scale *= Math.pow(0.95, scope.zoomSpeed)

(或者如果用户缩小)

scale /= Math.pow(0.95, scope.zoomSpeed)

然后,半径值会随着每次更新而改变,如下所示: spherical.radius *= scale

然后将比例值重新分配为其默认值 scale = 1 所以每次更新时半径都不会改变

spherical.radius的值决定了你对相机看到的距离有多近,所以当你放大时你有一个限制,因为半径只能变得那么小(参见放大)将半径值乘以.95,使其每次都接近0)

问题是如果你靠近轨道轴(spherical.radius〜= 0)进行缩放,然后旋转相机并向下看(或向上或向上),你无法放大那个方向,因为{{1不能再小了!

所以,我的问题是,如何使用Orbit控件实现该行为(当半径达到极限时向上或向下缩放)。

P.S。此代码可以在spherical.radius库的OrbitControl.js中找到,更具体地说,可以在THREE.js函数中找到。这是github repo

2 个答案:

答案 0 :(得分:1)

我设法通过pailhead解决了这个问题(再次感谢!)

this.update()

中的OrbitControls.js功能中添加了以下内容

获取相机所在的矢量

var cameraWorldDir = new THREE.Vector3();
scope.object.getWorldDirection(cameraWorldDir);

魔术:

if (spherical.radius <= 2) {
    scope.target.add(cameraWorldDir.multiplyScalar(0.4));
}

所以,如果我足够接近中心,我只是沿着lookAt向量移动目标(轨道中心),也就是我把它推回去。

请参阅threejs论坛here

中的完整主题

答案 1 :(得分:0)

您可能会对elements

中使用的术语感到困惑

什么&#34;缩放&#34;被称为&#34; dolly&#34;在现实世界。它是用于创建相机移动的设备:

https://en.wikipedia.org/wiki/Camera_dolly

在现实世界中,&#34;缩放相机&#34;意味着不同的东西 https://en.wikipedia.org/wiki/Zooming_(filmmaking)

它需要改变镜头的焦距,使视野更窄或更宽(从同一有利位置在屏幕上捕捉的世界多少)。

当您点击OrbitControls值时,您实际上没有进行任何缩放,您已尽可能靠近您的轨道中心。

您可以尝试禁用&#34;缩放&#34;或者minZoom上的小车,并尝试实现您自己的控制器,只需更改OrbitControls(缩放)。