Учебное пособие, объясняющее, как использовать инструмент WHS.VirtualMouse

Эта статья будет полезна тем, кто собирается создать новое трехмерное веб-приложение или просто красивую игру с уникальным управлением и взаимодействием с пользователем.

Если вы новичок в Three.js и Whitestorm framework (надмножество Three.js), лучше сначала посмотреть, что это такое. Найти API Whitestorm можно по следующей ссылке

Давайте начнем.

Как это реализовано в 3D?

Наведение указателя мыши

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

Логика проста:

  1. Создайте луч из 2D-координат и свойств камеры (направление, перспектива и др.).
  2. Проверьте, пересекает ли луч конкретный объект.
  3. Если пересекается - мышь находится над этим объектом, если нет - нет.

Завершая этот процесс, вы можете создавать события mouseout и mousemove.

Обработка событий мыши в среде Whitestorm

В Whitestorm Framework есть класс под названием VirtualMouse. Он превращает описанный выше процесс в DOM-подобный API.

По соображениям производительности смоделированные события будут работать только с «отслеживаемыми» объектами. С помощью mouse.track () мы добавляем сферу в этот список отслеживаемых объектов .

Поддерживаемые события:

  • наведение курсора
  • mouseout
  • mousemove
  • нажмите
  • mousedown
  • mouseup

Выбор объекта (перетаскивание)

Немного другой процесс перемещения объекта с участием математической плоскости, эта плоскость бесконечна.

  • Создайте математическую плоскость (THREE.Plane)
  • Создайте луч (как в предыдущем примере)
  • Получите их пересечение

Проверить это демо

Математическая плоскость по умолчанию всегда будет смотреть на позицию world.camera. Если вы хотите использовать собственный - передайте его в качестве параметра: mouse.project (plane);

Реализация в коде

Потому что Whitestorm предоставляет вам поддержку физики, есть два разных способа выбора объекта.

Я хочу иметь столкновения (я использую физику)

Вам нужно изменить скорость объекта в направлении мыши.

.multiplyScalar () увеличивает скорость шара. Чем большее число вы передадите, тем более реалистичным оно будет (используйте на свой страх и риск).

Я не хочу столкновений (я не использую физику)

Замените положение сферы с помощью трехмерных координат мыши.

Для получения дополнительной информации и других методов мыши см. Официальную документацию VirtualMouse.