Question

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

我尝试过使用Vector3作为位置提供程序，而球具有相同的结果。我尝试了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

欢迎使用堆栈溢出。感谢您抽出宝贵的时间参加这次旅行，并感谢您提供代码。

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

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

100是相机的FOV（视场），并且很宽。在PerspectiveCamera中，您的FOV越宽，对于靠近边缘的对象的扭曲就越大。尝试将其设置得较低，以获得更自然的效果。

对“透视变形”进行一些搜索，您应该找到大量有关为什么发生变形以及如何减轻它的文章。首先，这是Wikipedia页面：https://en.wikipedia.org/wiki/Perspective_distortion_(photography)，其中有一个很好的动画，可以更改房屋图像的FOV。

更改球体位置后，球体对象变形

1 个答案: