У меня есть приложение React three fiber
, и я использую OrbitControls
для управления камерой.
Я хочу использовать кнопки на экране для ручного увеличить/уменьшить масштаб, но не могу заставить свой код работать.
Я хочу, чтобы эти кнопки работали так же, как средняя кнопка мыши работает с OrbitControls
.
Кто-нибудь знает, как заставить это работать с помощью React?
Я попытался изменить положение камеры с помощью хука useThree(), но он не работал так, как я хотел.
Спасибо.
Когда вы используете среднее колесо прокрутки с 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. Вы можете бесконечно масштабировать, используя этот элемент управления.
OrbitControls делает позволяют бесконечно увеличивать масштаб. Однако, если вы подходите слишком близко к цели (0, 0, 0 по умолчанию), она начинает замедляться, потому что вы не можете увеличивать масштаб дальше центра. Это просто не имеет смысла. Вы можете масштабировать из бесконечно, потому что вас там ничего не останавливает (нет исходной точки). Надеюсь это имеет смысл
Кроме того, было бы здорово, если бы вы могли проголосовать, это очень помогает :)
Извините, я не ясно выразился в своем вопросе. Я имел в виду, смогу ли я продолжать двигаться вперед, даже если доберусь до центра. Если вы посмотрите на этот пример threejs.org/examples/#webgl_geometry_terrain . Камера по-прежнему может двигаться вперед, даже если вы достигли цели. Есть ли способ сделать это с помощью OrbitControls?
Я понимаю. Вы можете продолжать менять цель OrbitControls. Вы можете использовать controls.target = new THREE.Vector3(0, 10, 0);
, а затем использовать controls.update()
Не могли бы вы помочь мне еще с одной проблемой, с которой я сталкиваюсь прямо сейчас? Зум, кажется, работает нормально, пока цель (0,0,0), но когда я перемещаю положение камеры, а затем увеличиваю масштаб с помощью кнопок, камера начинает странно вращаться вокруг цели. Вот упрощенная версия, которую я сделал в песочнице кода. codeandbox.io/s/zoomtest-orbitcontrols-wwbmj3
Взгляните на мой ответ