Как заставить мой raycaster работать только при пересечении с видимыми объектами / объектами? - PullRequest
Новая
       34

Как заставить мой raycaster работать только при пересечении с видимыми объектами / объектами?

0 голосов
/ 03 июня 2019

Я хочу, чтобы мой raycaster пересекался только с видимыми объектами.У меня есть три класса: .menu_one, .menu_two и .menu_three.Когда я нажимаю на одно из них, я хочу, чтобы все остальные меню исчезли, чтобы зритель мог видеть трехмерный фон.Однако, когда я гуляю, я все еще могу щелкнуть, где раньше было меню с raycaster, когда я не хочу.Что я передаю через raycaster = "objects: ???"или любой другой метод, чтобы заставить это работать.... 

<a-cursor
      id="cursor"
      material="color: black; shader: flat"
      position="0 0 -4.5"       
      geometry="primitive: ring; radiusInner: 0.15; radiusOuter: 0.2"
      animation__click="property: scale; startEvents: click; from: 0.1 0.1 0.1; to: 1 1 1; dur: 150"
      animation__fusing="property: fusing; startEvents: fusing; from: 1 1 1; to: 0.1 0.1 0.1; dur: 1500"
      event-set__mouseenter="_event: mouseenter; color: springgreen"
      event-set__mouseleave="_event: mouseleave; color: black"
      raycaster="objects: [data-visible]">
    </a-cursor>  


<a-entity class="menu1"
            geometry="primitive: plane; height: 0.2; width: 0.5"
            material="color: black"
            text="value: ${city_name}; color: white; align: center; wrapCount: 10; font: exo2bold"
            event-set__mouseenter="scale: 1.5 1.5 1"
            event-set__mouseleave="scale: 1 1 1"
            event-set__1="_event: click; _target: #models; _delay: 300; visible: false">

...

Я ожидаю, что raycaster сможет пересекаться только с объектами, которые видны пользователю.

Привет!быть способ сделать эту работу? 

AFRAME.registerComponent('data-raycastable', {
      init: function () {
        var self = this;
        var el = this.el;
        var data = this.data;

        this.eventHandlerFn = function () {
          if (el.object3D.visible = true){
          el.setAttribute('data-raycastable', '');
          }
          else {
            el.removeAttribute('data-raycastable')
          }
        }

        update: function() {

          el.addEventListener('click', this.eventHandlerFn);
          } 
          }
        }
      })

1 Ответ

0 голосов
/ 03 июня 2019

Вы должны явно контролировать список raycaster objects. Например:

raycaster="objects: [data-raycastable]"

Теперь у нас есть сущность, которую мы хотим сделать raycastable:

<a-entity geometry material data-raycastable>

Допустим, мы скрываем сущность. Мы также удаляем его атрибут raycastable: 

el.object3D.visible = false;
el.removeAttribute('data-raycastable');

И скажем, мы добавим его обратно: 

el.object3D.visible = true;
el.setAttribute('data-raycastable', '');

В более сложных сценах это может быть более утомительным для многих объектов. Такие вещи, как aframe-state-component (https://www.npmjs.com/package/aframe-state-component), могут помочь путем декларативного отключения raycasability в зависимости от состояния сцены. Скажем, у нас было <a-entity raycaster="objects: [raycastable]"> с AFRAME.registerComponent('raycastable', {}), и в состоянии было isMenuActive, которое управляется компонентом состояния : 

<a-entity id="button" bind-toggle__raycastable="isMenuActive">

И я написал свой собственный компонент для синхронизации raycastable / видимости. 

<a-entity id="button" bind__visible-raycastable="isMenuActive">
...