三.js pov 相机环视 bug [英] three.js pov camera look around bug

问题描述

我使用three.js创建了一个基本场景.我的目标是制作一个基于 FirstPersonControls.js 的 pov 相机

I created a basic scene using three.js. My goal is to make a pov camera based on FirstPersonControls.js

我修改了它的代码以满足我的需要(鼠标点击时移动视图等)我快完成了，但一个错误仍然存​​在:当我第一次移动相机时，它没有从对象的位置开始移动我正在查看场景负载.

I modified its code to fit my needs (moving view on mouse click, etc.) I m almost done but a bug remains: when I move the camera on the first time, it doesn't start moving from the object's position I m looking at on the scene load.

这仅在我设置相机位置时发生.否则，它几乎有效，正如您在此链接上看到的:http://jsfiddle.net/42qeojs0/一个>

This only happens when I set a camera's position. Otherwise, it almost works, as you can see on this link: http://jsfiddle.net/42qeojs0/

只需取消注释这 3 行(第 60 行之后)

Just uncomment these 3 lines (after line 60)

    camera.position.x = 10;
    camera.position.y = 10;
    camera.position.z = 250;

然后，尝试通过拖动鼠标来围绕对象移动视图.您会看到拖动的开始位置与您第一次看到的位置不同.

Then, try to move the view around the object by dragging your mouse. You'll see the start position of your drag isn't the same as the position where you first look at.

提前致谢

推荐答案

纠正单击鼠标时的初始跳跃.引入一个新变量 dist 来表示与您正在查看的对象的距离，并使用 atan2 作为获取经度的更可靠方法.

To correct the initial jump around you get when you click the mouse. Introduce a new variable dist for the distance to the object your looking at and use atan2 as a more reliable way of getting the longitude.

dist = Math.hypot(blue1.position.x,blue1.position.y,blue1.position.z);
phi = Math.acos(blue1.position.y/dist);

theta = Math.atan2(blue1.position.z,blue1.position.x);

lon = THREE.Math.radToDeg(theta);
lat = 90-THREE.Math.radToDeg(phi);

在 onDocumentMouseMove 中使用

In onDocumentMouseMove use

camera.target.x = dist * Math.sin( phi ) * Math.cos( theta );
camera.target.y = dist * Math.cos( phi );
camera.target.z = dist * Math.sin( phi ) * Math.sin( theta );

这样，如果您采用初始位置，计算纬度、经度和距离，然后计算观察向量，您就得到了开始.使用 500 的固定倍数实际上会突然跳到比你开始的位置更远的位置.(注意 IE 不支持 Math.Hypot，因此如果针对 IE，您可能需要自己计算).

This way if you take the initial position, calculate lat, long and dist, and then calculate the looking at vector you get what you started with. Using a fixed multiple of 500 in effect made sudden jump to a position further away than you started. (Note Math.Hypot is not supported in IE so you might need the calculate this yourself if targeting IE).

这篇关于三.js pov 相机环视 bug的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！