``There seems to be an issue with the click handler function not properly functioning on aframe

Question

``There seems to be an issue with the click handler function not properly functioning on aframe

After incorporating a click handler on primitive geometry from A-Frame, the setup looks like this:

<a-scene>
        <a-sphere id="ball" cursor-listener material="color: red" position="-3 3 -5" onclick="showplane('#box1')" >
        </a-sphere>
      </a-scene>

My goal is to animate a plane geometry when the sphere is clicked. Once the plane is visible to the user, I need to attach a click handler for the plane.

Check out the JSFiddle demonstration here: https://jsfiddle.net/bhupi1011/9ptLqa32/

Unfortunately, the click handlers are not working on either of the geometries. Any help would be appreciated.

Thank you.

javascript aframe webvr

Answer 1

Answer №1

To incorporate a cursor into the scene, you must follow these steps for mouse click interaction:

<a-scene cursor="rayOrigin: mouse">

Implement a component to manage click events:

AFRAME.registerComponent('select', {
  init: function () {
    var originalColor = this.el.getAttribute('material').color;
    var self = this;
    this.el.sceneEl.addEventListener('click', function (evt) {
      var color;
      if (evt.detail.intersectedEl === undefined) { return; }
      var color = evt.detail.intersectedEl === self.el ? 'green' : originalColor;
      self.el.setAttribute('color', color);
    }, false);
  }
});

Check out the demo here:

View the code on Glitch:

Answer 2

To incorporate a cursor into the scene, you must follow these steps for mouse click interaction:

<a-scene cursor="rayOrigin: mouse">

Implement a component to manage click events:

AFRAME.registerComponent('select', {
  init: function () {
    var originalColor = this.el.getAttribute('material').color;
    var self = this;
    this.el.sceneEl.addEventListener('click', function (evt) {
      var color;
      if (evt.detail.intersectedEl === undefined) { return; }
      var color = evt.detail.intersectedEl === self.el ? 'green' : originalColor;
      self.el.setAttribute('color', color);
    }, false);
  }
});

Check out the demo here:

View the code on Glitch:

``There seems to be an issue with the click handler function not properly functioning on aframe

Answer №1

Similar questions

What is the correct method for iterating through this array of objects and eliminating those with either null or empty item.text values?

Tips for acquiring offspring who are exclusively not descendants of a particular node

Is it a common issue that sound.stop() doesn't seem to function properly, while sound.play() operates successfully within Howler

Adjusting the size of an image to be responsive once the document has fully

When working with data in Angular, make sure to use any[] instead of any in app.component.html and app.component.ts to avoid causing overload errors

Exporting modules from Node.js using Express framework is a common

Passing console.log as an argument in a JavaScript abstraction

What causes a never-ending loading cycle on a website when a 404 error occurs?

The destroy method of Chart.js does not appear to have any impact on the

How can I save a value in JavaScript once the page has finished loading?

What is the best way to pass and save information across different routes in Express using Node.js?

Attempting to modify the contenteditable div HTML and shift the cursor to the end is not functioning as expected

Utilizing Lodash's uniqWith function, it allows us to specify how we want to

An error was encountered: Unexpected token 'var'

Steps for altering the public folder in a Next.js project

JavaScript implementation for text smearing visual effect

What causes the discrepancy in calculating marginTop on a desktop browser compared to a mobile browser?

Can you explain the distinction between x++ and ++x for me?

Pressing the non-responsive button automatically chooses the following item

Can you provide me with a variable that will give me the total size of the scrollbar?