three.js - 改变球体位置后球体物体变形

Question

我在场景中有两个球体对象。它们都是使用默认位置(场景中心)制作的。当物体在中间时没有问题，但是当我想将一个向右移动第二个向左移动时，奇怪的变形就出现了。当球体在 X 轴上远离中心移动时，它们似乎在 Y 轴上受到更多挤压。这是一种“鱼眼”镜头效果。是否有可能某些默认相机值干扰了这样的结果？ FOV 值并没有为此带来解决方案，而且我没有找到有关相机镜头属性的信息。这有什么问题？

我曾尝试使用 Vector3 作为位置提供者，spheres 具有相同的结果。我试过 object.position.set(vector3) 但没有结果。object.position.copy(vector3) 也给出了相同的结果。在没有动画的情况下尝试平移位置给出了相同的结果。在相机对象中使用 FOV 参数也没有解决问题。

// init
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(100, window.innerWidth/window.innerHeight, 0.1,10000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

//creating sphere

var geometry = new THREE.SphereGeometry(6, 16, 16);
var material = new THREE.MeshBasicMaterial({color: 0xffffff, wireframe: true});
var sphere = new THREE.Mesh(geometry, material);

//earth

var geometry = new THREE.SphereGeometry(3, 16, 16);
var material = new THREE.MeshBasicMaterial({color: 0x0000ff, wireframe: true});
var earth = new THREE.Mesh(geometry, material);



scene.add(sphere, earth);
camera.position.z = 10;



var animation = function(){
    requestAnimationFrame(animation);
    update();
    renderer.render(scene,camera);
}

var update = function(){
   earth.rotation.y +=0.001;
   sphere.rotation.y -=0.001;
   sphere.rotation.x -=0.001;
   sphere.position.x +=0.001;

}

我希望移动 sphere.postion.x -=1;和 earth.position.x+=1;球体在Y轴上无挤压变形。

Answer 1

欢迎来到 Stack Overflow。感谢您抽出宝贵时间参观并包含您的代码。

鱼眼效果可能是由您的相机定义引起的:

var camera = new THREE.PerspectiveCamera(100, window.innerWidth/window.innerHeight, 0.1,10000);

100 是相机的 FOV(视野)，非常宽。在 PerspectiveCamera 中，您的 FOV 越宽，越靠近边缘的物体就会看到越多的失真。尝试将其设置得更低以获得更自然的效果。

搜索“透视失真”，您应该会找到大量关于它发生的原因以及如何减轻它的文章。对于初学者，这里是维基百科页面:https://en.wikipedia.org/wiki/Perspective_distortion_(photography)它有一个很好的动画，可以改变房屋图像的 FOV。