Creating a clickable widget to manipulate an item

Question

Creating a clickable widget to manipulate an item

I am building a website using A-Frame and struggling to create a button that will reset the position of a ball with the ID "test" to 0 8 0. I have attempted to use the setAttribute script, but it is not working as expected. Below is the current JavaScript code that I am tinkering with:

AFRAME.registerComponent('ballreset', {
  events: {
    click: function(evt)
    {
      document.getElementById('test').setAttribute('position', {x:0, y:8, z:0});
      
    }
  }
});

Edit: I spotted a typo in the code, but unfortunately, it did not solve the issue.

javascript three.js aframe

Answer 1

Answer №1

To address the issue at hand, it is important to provide a complete example for a more accurate diagnosis.

Ensure that you have implemented a raycaster-based cursor component. Mouse clicks may not function as expected with webGL renders compared to HTML elements.
Confirm that the click listener is operational by logging each click event.
Verify the existence of the element with the specified id at the time of the click event.

Below is an implementation similar to what you are aiming for, where clicking on any object triggers an action:

<script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
<script>
  AFRAME.registerComponent('foo', {
    events: {
      click: function(evt) {
        // obtain current position
        let pos = this.el.getAttribute("position");
        // move upwards
        this.el.setAttribute('position', { x: pos.x, y: pos.y + 0.25, z: pos.z });
      }
    }
  });
</script>
<!-- incorporate a cursor component -->
<a-scene cursor="rayOrigin: mouse">
  <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" foo></a-box>
  <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" foo></a-sphere>
  <a-cylinder position="1 0.75 -3" radius="0.5 height="1.5" color="#FFC65D" foo></a-cylinder>
  <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" foo></a-plane>
  <a-sky color="#ECECEC"></a-sky>
</a-scene>

Answer 2

To address the issue at hand, it is important to provide a complete example for a more accurate diagnosis.

Ensure that you have implemented a raycaster-based cursor component. Mouse clicks may not function as expected with webGL renders compared to HTML elements.
Confirm that the click listener is operational by logging each click event.
Verify the existence of the element with the specified id at the time of the click event.

Below is an implementation similar to what you are aiming for, where clicking on any object triggers an action:

<script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
<script>
  AFRAME.registerComponent('foo', {
    events: {
      click: function(evt) {
        // obtain current position
        let pos = this.el.getAttribute("position");
        // move upwards
        this.el.setAttribute('position', { x: pos.x, y: pos.y + 0.25, z: pos.z });
      }
    }
  });
</script>
<!-- incorporate a cursor component -->
<a-scene cursor="rayOrigin: mouse">
  <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" foo></a-box>
  <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" foo></a-sphere>
  <a-cylinder position="1 0.75 -3" radius="0.5 height="1.5" color="#FFC65D" foo></a-cylinder>
  <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" foo></a-plane>
  <a-sky color="#ECECEC"></a-sky>
</a-scene>

Creating a clickable widget to manipulate an item

Answer №1

Similar questions

Leveraging node modules in the browser using browserify - Error: fileType is not recognized

Displaying API errors using JavaScript

The styles for Material-UI Popover are not taking effect

Implementing React Table selected rows from the parent component

Rebuild object methods obtained from localStorage

Using JSON to create bootstrap styled link buttons

Tips for preventing the keyboard from blocking important buttons

The disabling of the `vue/multi-word-component-names` rule in EsLint cannot be overridden

I'm having trouble executing the straightforward code I discovered on GitHub

The output stored in the variable is not appearing as expected

Discover the complete compilation of CSS class regulations (derived from various stylesheets) along with their currently active properties for the chosen element

Can you please explain the significance of the code "!!~this.roles.indexOf('*')" within the MEAN.io framework?

Build a React application using ES6 syntax to make local API requests

The jQuery formvalidator plugin for file validation isn't functioning as expected

Dealing with jEditable response challenges

Error in Leaflet: Uncaught TypeError: layer.addEventParent is not a function in the promise

Issue: The login.component.html file failed to load

Tips for moving a div to reveal new content whenever a toggle-slide is activated

Using Jquery Autocomplete tool for seamless search functionality and making ajax requests without leaving the current page

Issues related to javascript in Oracle ADF application