在Three.js中使用轨道控制旋转相机时发生奇怪的晃动 [英] Strange shaking while rotating the camera with Orbit Controls in Three.js

查看:533
本文介绍了在Three.js中使用轨道控制旋转相机时发生奇怪的晃动的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在为太阳系建模。这是我当前的指标:

I'm making a model of the Solar System. This is my current metric:

scale = 0.001;
// 1 unit - 1 kilometer
var AU = 149597871 * scale;

这是我定义相机,渲染器和控件的方式:

This is how i define the camera, renderer and controls:

camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1 * scale, 0.1 * AU);
renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
controls = new THREE.OrbitControls(camera, renderer.domElement);

然后我为用户提供了在对象之间跳转的选项,因此这是我设置相机的方式用户选择一个行星/月球:

Then i give the user the option to jump between the objects so this is how i set the camera after user selects a planet/moon:

function cameraGoTo() {
    for (var i = scene.children.length - 1; i >= 0 ; i--) {
        var obj = scene.children[i];
        if (obj.name == parameters.selected) {
            controls.target = obj.position;
            camera.position.copy(obj.position);
            camera.position.y += obj.radius * 2;
        }
    }
}

问题是表示,对于小行星/月球(半径<= 1000 km),相机在绕天体旋转时会发抖。我只有计算机图形学的基本知识,所以我不知道这是Orbit Controls的问题,还是它与渲染器本身有关...所以我尝试设置 logarithmicDepthBuffer = true ,但没有帮助。尝试使用不同的比例也没有任何改变。

The problem is that for small planets/moons ( <= 1000 km in radius) camera is shaking while rotating around the object. I have only basic knowledge of computer graphics so i don't know either this is the problem of Orbit Controls or it has something to with renderer itself...so I've tried to set logarithmicDepthBuffer = true but it didn't help. Also trying different scale didn't change anything.

在此先感谢您的帮助/提示。

Thank in advance for any help/clues.

编辑:

这是小提琴:
http://jsfiddle.net/twxyz/8kxcdkjj/

您可以看到以下任何一种情况都会增加抖动:

You can see that shaking increases with any of the following:


  • 对象越小

  • 对象离原点越远

这是什么原因?显然,这似乎与相机的近/远光谱值无关,但与物体离场景中心的距离有关。

What is the cause of this? It clearly seems it has nothing to do with the camera near/far spectrum values but is related to the distance the objects are from the center of the scene.

推荐答案

我想出了解决方案。

我的问题是处理对象而不是对象时出现浮点精度错误。原点。事实证明这是一个众所周知的问题,并且有各种解决方案。我曾经用过这个:

My problem was with the floating point precision errors when dealing with objects far from the point of origin. This turns out to be a very known problem and there are various solutions. I've used this one:

http://answers.unity3d.com/questions/54739/any-solution-for-extreamly-large-gameworlds-single.html

发生的事情基本上不是移动摄像机/播放器,而是相对于始终位于原点的摄像机/播放器转换整个场景。在这种情况下,Orbit Controls的目标始终是起点。

What happens is basically instead of moving the camera/player, we transform whole scene relative to the camera/player that is always at the point of origin. In this case, Orbit Controls' target is always point of origin.

这篇关于在Three.js中使用轨道控制旋转相机时发生奇怪的晃动的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆