My three.js script is not running on a-frame

Question

I'm trying to make a raycaster only function when an entity is visible. I was told to try to write a script in order for this to work, so I went ahead and did such. All entities and child entities, I have interactable through click and have most of my events triggered through click, which make certain entities turn invisible as such:

<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>

The data-raycastable parameter you see here is running of this here script:

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

Now, I'm wondering why this script of mine doesn't work. I followed the A-frame documentation closely in an attempt to make it work, but it doesnt. The cursor button looks like this:

<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>

Can someone please steer me in the right direction.

Share a link to a full runnable example that people can look at. Glitch will do glitch.com/~aframe — Diego Marcos
So far you’re putting your HTML in a script tag while it should be in the <body>. Your entities should be in the <a-scene> tag. Use glitch as a starting point: glitch.com/~aframe — Diego Marcos
Thanks. There’s a lot of stuff going on there (multiple html files). Hard to see the intent and where to look at. So far you have JS embedded in HTML with no script tags, multiple <a-assets> where it should be only one, templates using script tags doesn’t seem correct... I recommend starting with a working scene and keep it simple so people can help you... glitch.com/~aframe — Diego Marcos
Hey there man, sorry for being a burden, but I was appending it while you were looking at it most likely. If you can look one more time at this link, glitch.com/edit/#!/…, that would be very helpful. I am very lost as to how to make my not visible components not clickable/raycastable. I am also very new to this — Nick Karkut

Diego Marcos Diego Marcos · Accepted Answer · 2019-06-05T22:43:03

Not sure what your component is trying to accomplish, so far it has a syntax error (missing comma after schema) and the el reference is not valid. Corrected code:

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

Use classes instead of data attributes for raycastability. Corrected glitch: https://glitch.com/edit/#!/aquatic-aftershave

My three.js script is not running on a-frame

1 Answers