Three.js 更改球体位置后球体对象的变形

我在场景中有两个球体对象。它们都是使用默认位置（场景中心）创建的。当物体在中间时没有问题，但是当我想把一个向右移动，第二个向左移动时，奇怪的变形就有了一个位置。当球体在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.position.x-=1；位置x+=1；Y轴上的球体没有挤压和变形。

欢迎使用堆栈溢出。感谢您抽出时间来参观，并包括您的代码

鱼眼效应可能是由您的相机定义引起的：

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

100

是您的相机的FOV（视野），非常宽。在透视相机中，视野越宽，越靠近边缘的物体的失真越大。尝试将其设置得更低，以获得更自然的效果

---

对“透视失真”进行一些搜索，您应该会找到大量关于为什么会发生这种情况以及如何缓解这种情况的文章。首先，这里是Wikipedia页面：它有一个很好的动画，可以改变房子图像的FOV。

TheJim01-感谢您提供正确的答案和线索，让我们更深入地了解透视镜头的工作原理！现在我解决了这个问题。我只是换了小半径的物体和校准过的摄像机视野。工作完美。再次感谢你！