Как сделать тележку или масштабировать с помощью React three fiber или threejs?

У меня есть приложение React three fiber, и я использую OrbitControls для управления камерой.

Я хочу использовать кнопки на экране для ручного увеличить/уменьшить масштаб, но не могу заставить свой код работать.

Я хочу, чтобы эти кнопки работали так же, как средняя кнопка мыши работает с OrbitControls. Кто-нибудь знает, как заставить это работать с помощью React?

Я попытался изменить положение камеры с помощью хука useThree(), но он не работал так, как я хотел.

Спасибо.

Взгляните на мой ответ

Anye 31.03.2022 14:27
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
1
59
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Когда вы используете среднее колесо прокрутки с OrbitControls, все, что оно делает, — это умножает положение камеры на определенное значение. Итак, если вы хотите сделать это вручную, вы можете использовать следующую функцию:

function zoom(constant){
    camera.position.x = camera.position.x * constant;
    camera.position.y = camera.position.y * constant;
    camera.position.z = camera.position.z * constant;
}

Если вы хотите ближе к приблизить, вы передаете значение отрицательный. Если вы хотите уменьшить, далее значение положительный.

Спасибо! Я попробовал ваше решение, и масштабирование работает так же, как OrbitControls. Но я понял, что OrbitControls не позволяет бесконечно увеличивать масштаб. Есть ли способ добиться этого. Для справки вы можете проверить FirstPersonControls. Вы можете бесконечно масштабировать, используя этот элемент управления.

coder3210 01.04.2022 18:21

OrbitControls делает позволяют бесконечно увеличивать масштаб. Однако, если вы подходите слишком близко к цели (0, 0, 0 по умолчанию), она начинает замедляться, потому что вы не можете увеличивать масштаб дальше центра. Это просто не имеет смысла. Вы можете масштабировать из бесконечно, потому что вас там ничего не останавливает (нет исходной точки). Надеюсь это имеет смысл

Anye 01.04.2022 19:03

Кроме того, было бы здорово, если бы вы могли проголосовать, это очень помогает :)

Anye 01.04.2022 19:06

Извините, я не ясно выразился в своем вопросе. Я имел в виду, смогу ли я продолжать двигаться вперед, даже если доберусь до центра. Если вы посмотрите на этот пример threejs.org/examples/#webgl_geometry_terrain . Камера по-прежнему может двигаться вперед, даже если вы достигли цели. Есть ли способ сделать это с помощью OrbitControls?

coder3210 01.04.2022 19:26

Я понимаю. Вы можете продолжать менять цель OrbitControls. Вы можете использовать controls.target = new THREE.Vector3(0, 10, 0);, а затем использовать controls.update()

Anye 01.04.2022 19:39

Не могли бы вы помочь мне еще с одной проблемой, с которой я сталкиваюсь прямо сейчас? Зум, кажется, работает нормально, пока цель (0,0,0), но когда я перемещаю положение камеры, а затем увеличиваю масштаб с помощью кнопок, камера начинает странно вращаться вокруг цели. Вот упрощенная версия, которую я сделал в песочнице кода. codeandbox.io/s/zoomtest-orbitcontrols-wwbmj3

coder3210 04.04.2022 22:00

Другие вопросы по теме