Функция ThreeJS camera.lookAt() не имеет никакого эффекта, есть ли что-то, что я делаю неправильно?

В Three.js я хочу, чтобы камера была направлена в точку в трехмерном пространстве.

С этой целью я попытался использовать функцию camera.lookAt следующим образом:

camera.lookAt(new THREE.Vector3(-100,-100,0));

Однако я узнал, что вызов не имеет никакого эффекта. Он просто ничего не делает. Я попытался изменить числа в векторе, и я всегда получаю тот же вид на экране, когда он должен меняться.

Я только что нашел, что если я удалю THREE.TrackballControls, который у меня есть в моем коде, camera.lookAt() работает так, как должен. Что-то не так с тем, как я использую THREE.TrackballControls? Вот как я их инициализирую:

    controls = new THREE.TrackballControls( camera, renderer.domElement );

    controls.rotateSpeed = 10.0;
    controls.zoomSpeed = 1.2;
    controls.panSpeed = 0.2;

    controls.noZoom = false;
    controls.noPan = false;

    controls.staticMoving = true;
    controls.dynamicDampingFactor = 1.0;

    var radius = 5;
    controls.minDistance = radius * 1.1;
    controls.maxDistance = radius * 100;

    controls.keys = [ 65, 83, 68 ]; // [ rotateKey, zoomKey, panKey ]*/

И затем в моей функции рендеринга я делаю:

function render() {
  controls.update();
  renderer.render(scene, camera);
}

Документация на Three.js довольно скудна, поэтому я подумал, что спрошу здесь. Я что-то делаю неправильно?

Ответ 1

Посмотрев исходный код THREE.TrackballControls, я понял, что могу сделать камеру в нужном месте, установив trackballControls.target в THREE.Vector3 Я хочу, чтобы он посмотрел на него, а затем повторил сцену.

Ответ 2

Да Пожалуйста, остерегайтесь... Кажется, что с THREE.TrackballControls или THREE.OrbitControls, кажется, переопределяет функцию camera.lookAt, поскольку вы передаете свою камеру при создании экземпляра элементов управления. Возможно, вам захочется избавиться от элементов управления, а затем выполнить функцию camera.lookAt() или настроить камеру другим способом, чтобы убедиться в том, что элементы управления оказывают на камеру максимальную отдачу. Некоторое время я искал Google, почему Camera.lookat(), казалось, не имел никакого эффекта.

Ответ 3

По моему мнению, мы не должны связываться с исходным кодом. Я нашел способ приблизиться, чтобы достичь цели взглянуть на какой-то конкретный момент. После объявления вашей переменной control просто выполните эти две строки кода:

// Assuming you know how to set the camera and myCanvas variables
control = new THREE.OrbitControls(camera, myCanvas);

// Later in your code
control.object.position.set(camX, camY, camZ);
control.target = new THREE.Vector3(targetX, targetY, targetZ);

Помните, что это переключит центр фокуса на вашу новую цель. Другими словами, ваша новая цель станет центром всех поворотов камеры. Некоторым деталям будет трудно смотреть, поскольку вы привыкли манипулировать камерой, предполагая центр по умолчанию. Попробуйте увеличить масштаб, насколько сможете, и у вас будет ощущение, что я говорю Надеюсь на эту помощь.

Ответ 4

Я понял это. Чтобы предотвратить THREE.TrackballControls или THREE.OrbitControls от переопределения camera.lookAt при инициализации, вам необходимо изменить строку, которая устанавливает свойство управления target равным сумме вектора camera.position и вектора camera.getWorldDirection(), вместо как это реализовано в настоящее время с помощью new THREE.Vector3() (по умолчанию это (0, 0, 0)).

Итак, для THREE.TrackballControls измените строку 39 на:

this.target = new THREE.Vector3().addVectors(/*new line for readability*/
    object.position, object.getWorldDirection());

То же самое относится к THREE.OrbitControls, в строке 36. Я не тестировал его на TrackballControls.js, но он работает на OrbitControls.js. Надеюсь, это поможет.

Ответ 5

Здесь альтернативное решение: создайте объект (например, куб) с 0 размерами.

var cameraTarget = new THREE.Mesh( new THREE.CubeGeometry(0,0,0));

В функции рендеринга установите camera.lookAt в положение камеры.

function render() {
    camera.lookAt( cameraTarget.position );
    renderer.render( scene, camera );
}

Затем просто передвиньте камеру вокруг, как вы пожелаете.