我的three.js腳本沒有在a-frame上運行

Question

當一個實體可見時，我正試圖制作一個raycaster功能。 我被告知要嘗試編寫腳本以使其工作，所以我繼續這樣做。 所有實體和子實體，我都可以通過點擊進行互動，並通過點擊觸發大部分事件，這會使某些實體變為不可見：

<script id="city" type="text/html">
      <a-entity class="city"
        geometry="primitive: plane; height: 0.2; width: 0.5"
        data-raycastable
        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: #image-360; _delay: 300; material.src: ${src}"
        event-set__2="_event: click; _target: #models; _delay: 300; visible: false"
        event-set__3="_event: click; _target: #cities; _delay: 300; visible: true"
        event-set__4="_event: click; _target: #show_button; _delay: 300; visible: true"
        event-set__5="_event: click; _target: ${map}; _delay: 300; visible: true"
        proxy-event="event: click; to: #image-360; as: fade"
        sound="on: click; src: #click-sound"></a-entity>
    </script>

您在此處看到的data-raycastable參數正在運行此腳本：

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);
          } 
          }
        }
      })

現在，我想知道為什么我的這個劇本不起作用。 我密切關注A-frame文檔，試圖讓它工作，但它沒有。 光標按鈕如下所示：

<a-entity id="camera" camera look-controls>
    <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-raycastable], .link, .model">
    </a-cursor>        
  </a-entity> 

有人可以引導我朝着正確的方向前進。

Answer 1

不確定您的組件正在嘗試完成什么，到目前為止它有語法錯誤（架構后缺少逗號）並且el引用無效。 更正代碼：

AFRAME.registerComponent('data-raycastable', {         
          schema: {
            event: {type: 'boolean', default: true}  
          },
          init: function () {
            var el = this.el;
            el.addEventListener('click', function() {
                if (el.object3D.visible = false) {
                  el.classList.remove('raycastable');
                }
                else if (el.object3D.visible = true) {
                  el.classList.add('raycastable');
                }
            })
          }  
        });

使用類而不是數據屬性來實現光線投射。 糾正了故障： https ：//glitch.com/edit/#！/ aquatic- aftershave