В кадре, как вы делаете свойство visible = "false" игнорировать raycaster? - PullRequest
Новая
       10

В кадре, как вы делаете свойство visible = "false" игнорировать raycaster?

0 голосов
/ 04 мая 2019

У меня есть некоторые объекты в рамке с visible = "false", что означает, что они не видимы, но они по-прежнему взаимодействуют, даже если вы их не видите. Есть ли решение для этого?

В сети найдено несколько подобных случаев, но нет четкого решения.

https://github.com/aframevr/aframe/issues/3551 https://github.com/aframevr/aframe/issues/979

<!-- CURSOR ENTITY -->
        <a-entity rotation="0 0 0" position="0 0 2">
            <a-entity id="camera" far: 20; camera look-controls rotation="0 0 0" wasd-controls>
                <!-- MAIN CURSOR -->
                <a-entity raycaster="interval: 200; objects: .clickable" cursor="fuse: true; maxDistance: 500; timeout: 1500;" id="cursor-main" position="0 0 -1.5" geometry="primitive: ring; radiusOuter: 0.04; radiusInner: 0.03; thetaLength: 360; thetaStart: 90;" material="color: #439DC2;">
                    <a-animation begin="cursor-fusing" attribute="geometry.thetaLength" fill="forwards" from="360" to="0" easing="ease-in"></a-animation>
                    <a-animation begin="mouseleave" attribute="geometry.thetaLength" fill="backwards" from="0" to="360" dur="0"></a-animation>
                </a-entity>
                <a-entity id="cursor-loader" position="0 0 -1.51" geometry="primitive: ring; radiusOuter: 0.04; radiusInner: 0.03;" material="color: #2ADD2A;">
                </a-entity>
            </a-entity>
        </a-entity>

        <a-entity ui-modal="triggerElement:#selection;" visible="false">

            <a-image position="-0.7 -1 1" class="clickable" src="#one" scale="0.7 0.7 0" link="href:location1.html; on: click; visualAspectEnabled: false" src-fit></a-image>

        <a-image position="0 -1 1" class="clickable" src="#two" scale="0.7 0.64 0" link="href:location2.html; on: click; visualAspectEnabled: false" src-fit></a-image>

             <a-image position="0.7 -1 1" class="clickable" src="#three" scale="0.7 0.7 0" link="href:location3.html; on: click; visualAspectEnabled: false" src-fit></a-image>

            <a-image class="clickable" src="#close" id="closing" scale="0.3 0.3 0" position="-0.5 -0.35 1.1"></a-image>

        </a-entity>

В идеале, если для объекта установлено значение visible = "false", пользователь не должен иметь с ним возможности взаимодействовать.

1 Ответ

1 голос
/ 04 мая 2019

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

<a-scene cursor raycaster='objects: .clickable>

Белый список использует типичные селекторы CSS, поэтому в приведенном выше примере raycaster будет взаимодействовать только с элементами, имеющими класс clickable.

Вы можете добавить / удалить его с видимостью: 

if (condition) {
  el.setAttribute('visible', 'false')
  el.classList.remove('clickable')
} else {
  el.setAttribute('visible', 'true')
  el.classList.add('clickable')
}

Вы можете проверить это в этой скрипке.Нажмите на сферу, чтобы сделать окно кликабельным / не кликабельным.

Хакерский обходной путь может также установить scale на 0 0 0.Элемент не будет виден и не будет кликабелен.

...