Учебное пособие, объясняющее, как использовать инструмент WHS.VirtualMouse
Эта статья будет полезна тем, кто собирается создать новое трехмерное веб-приложение или просто красивую игру с уникальным управлением и взаимодействием с пользователем.
Если вы новичок в Three.js и Whitestorm framework (надмножество Three.js), лучше сначала посмотреть, что это такое. Найти API Whitestorm можно по следующей ссылке
Давайте начнем.
Как это реализовано в 3D?
Наведение указателя мыши
Наша основная цель - дать приложению понять, когда курсор мыши перемещается по трехмерному объекту. Для этого следует начать с трехмерного луча.
Логика проста:
- Создайте луч из 2D-координат и свойств камеры (направление, перспектива и др.).
- Проверьте, пересекает ли луч конкретный объект.
- Если пересекается - мышь находится над этим объектом, если нет - нет.
Завершая этот процесс, вы можете создавать события mouseout и mousemove.
Обработка событий мыши в среде Whitestorm
В Whitestorm Framework есть класс под названием VirtualMouse. Он превращает описанный выше процесс в DOM-подобный API.
По соображениям производительности смоделированные события будут работать только с «отслеживаемыми» объектами. С помощью mouse.track () мы добавляем сферу в этот список отслеживаемых объектов .
Поддерживаемые события:
- наведение курсора
- mouseout
- mousemove
- нажмите
- mousedown
- mouseup
Выбор объекта (перетаскивание)
Немного другой процесс перемещения объекта с участием математической плоскости, эта плоскость бесконечна.
- Создайте математическую плоскость (THREE.Plane)
- Создайте луч (как в предыдущем примере)
- Получите их пересечение
Математическая плоскость по умолчанию всегда будет смотреть на позицию world.camera. Если вы хотите использовать собственный - передайте его в качестве параметра: mouse.project (plane);
Реализация в коде
Потому что Whitestorm предоставляет вам поддержку физики, есть два разных способа выбора объекта.
Я хочу иметь столкновения (я использую физику)
Вам нужно изменить скорость объекта в направлении мыши.
.multiplyScalar () увеличивает скорость шара. Чем большее число вы передадите, тем более реалистичным оно будет (используйте на свой страх и риск).
Я не хочу столкновений (я не использую физику)
Замените положение сферы с помощью трехмерных координат мыши.
Для получения дополнительной информации и других методов мыши см. Официальную документацию VirtualMouse.