Отключение курсора для отдельных объектов

В A-Frame управление интерактивностью объектов осуществляется через систему компонентов, где ключевую роль играет компонент cursor и события наведения (mouseenter, mouseleave, click). По умолчанию, все объекты сцены реагируют на взаимодействие курсора, если на них установлены соответствующие коллайдеры (geometry + material) и система raycaster. Для избирательного отключения реакции на курсор используются специальные методы и атрибуты компонентов.

Использование атрибута raycaster="objects: ..."

Компонент raycaster позволяет указать, какие объекты сцены будут воспринимать луч курсора. Атрибут objects принимает CSS-подобные селекторы:

<a-entity id="camera" camera look-controls>
  <a-entity cursor="fuse: false" 
            raycaster="objects: .interactive">
  </a-entity>
</a-entity>

<a-box class="interactive" position="-1 1 -3" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" color="#EF2D5E"></a-sphere>

В данном примере:

  • Только объекты с классом .interactive будут реагировать на курсор.
  • a-sphere не имеет класса .interactive, поэтому на него курсор не реагирует.

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

Использование компонента cursor с фильтром по классам

Компонент cursor может быть расширен дополнительными условиями с помощью фильтров:

<a-entity cursor="fuse: true; fuseTimeout: 500"
          raycaster="objects: .clickable">
</a-entity>

<a-box class="clickable" position="1 1 -4" color="#FFC65D"></a-box>
<a-cylinder position="2 0.75 -3" color="#7BC8A4"></a-cylinder>
  • Атрибут fuse включает автоклик при наведении на объект.
  • objects: .clickable исключает все объекты без этого класса.
  • Объекты без класса .clickable полностью игнорируются курсором, оставаясь визуально активными в сцене.

Полное отключение интерактивности для конкретного объекта

Для сценариев, когда объект должен быть видимым, но недоступным для курсора, применяется атрибут pointer-events CSS или отключение коллайдера через компонент geometry:

<a-box position="0 1 -3" color="#FF0000" 
       class="no-cursor"
       material="color: red; opacity: 0.8"
       geometry="primitive: box; pointerEvents: none">
</a-box>

Если pointerEvents: none не поддерживается напрямую, можно использовать модификацию через raycaster:

<a-box position="-2 1 -3" color="#00FF00" 
       class="ignore-ray"></a-box>

<script>
  const ignore = document.querySelectorAll('.ignore-ray');
  ignore.forEach(el => {
    el.setAttribute('raycaster-ignore', true);
  });
</script>
  • Для этого необходимо создать кастомный компонент raycaster-ignore, который при инициализации исключает объект из луча курсора.
  • Такой подход позволяет точечно отключать интерактивность, не затрагивая другие объекты.

Кастомный компонент no-cursor

Создание собственного компонента обеспечивает гибкость и чистоту сцены:

AFRAME.registerComponent('no-cursor', {
  init: function () {
    this.el.classList.add('ignore-ray');
  }
});

Использование:

<a-box position="0 2 -5" color="#0000FF" no-cursor></a-box>
  • Все объекты с компонентом no-cursor автоматически исключаются из взаимодействия курсора.
  • Можно комбинировать с глобальными селекторами raycaster="objects: .interactive" для полной избирательности.

Управление интерактивностью через события

Иногда требуется временно отключить курсор для объекта при определенных условиях:

const box = document.querySelector('#myBox');

box.addEventListener('mouseenter', () => {
  console.log('Этот объект больше не будет реагировать на курсор.');
  box.removeAttribute('raycaster'); // Полное отключение
});
  • Удаление компонента raycaster с объекта делает его невидимым для всех лучей.
  • Можно динамически включать или отключать интерактивность в зависимости от логики приложения.

Практические рекомендации

  • Всегда использовать классы или селекторы для фильтрации интерактивных объектов. Это снижает нагрузку на raycaster и улучшает производительность.
  • Для больших сцен рекомендуется комбинировать фильтры raycaster и кастомные компоненты типа no-cursor.
  • В визуально активных, но не интерактивных объектах можно ограничиться только добавлением специального класса и исключением его из селектора луча.
  • Динамическое управление интерактивностью через события позволяет создавать гибкие VR-интерфейсы без перезагрузки сцены.

Методы отключения курсора для отдельных объектов в A-Frame обеспечивают тонкую настройку интерактивности, позволяя создавать сложные VR-сцены с управляемым поведением каждого элемента.

Оглавление