Блог

У меня есть два объекта сферы на сцене. Оба они были сделаны с положением по умолчанию (центр сцены). Нет проблем, когда объекты находятся посередине, однако, когда я хочу переместить один вправо, а второй влево, возникает странная деформация. Когда сферы удаляются от центра по оси X, они кажутся более сжатыми по оси Y. Это своего рода эффект линзы «рыбий глаз». Возможно ли, что какое-то значение камеры по умолчанию мешает получить такой результат? Значение FOV не дает решения для этого, и я не нашел информации о свойствах объектива камеры. Что в этом плохого?

Я попытался поиграть с Vector3 в качестве поставщика позиции, и spheres получили тот же результат. Я пробовал object.position.set (vector3) без результата. Также object.position.copy(vector3) дал тот же результат. Попытка перевести положение без анимации дала тот же результат. Игра с параметром FOV в объекте camera также не решила проблему.

 // 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;

}
  

Я ожидаю переместить сферу.position.x -= 1; и earth.position.x = 1; без сжатия и деформации сфер по оси Y.

Добро пожаловать в Stack Overflow. Спасибо, что нашли время для экскурсии и включили свой код.

Эффект «рыбий глаз», вероятно, вызван определением вашей камеры:

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

100 Это FOV (поле зрения) вашей камеры, и оно довольно широкое. В PerspectiveCamera чем шире ваш угол обзора, тем больше искажений вы увидите для объектов ближе к краям. Попробуйте установить его ниже, чтобы получить более естественный эффект.

Выполните несколько поисковых запросов по «Искажению перспективы», и вы должны найти множество статей о том, почему это происходит и как это смягчить. Для начала, вот страница Википедии: https://en.wikipedia.org/wiki/Perspective_distortion_ (фотография) в котором есть приятная анимация изменения угла обзора для изображения дома.