How do I make the position of a box a variable in Aframe or set the position x, y-10, z?

Question

How do I make the position of a box a variable in Aframe or set the position x, y-10, z?

21 Views Asked by Iskandar Williams At 01 March 2024 at 17:20

I'd like to avoid trying to use gravity but if that's needed, it's fine. I'm trying to make a game like that one stacker arcade game but in Aframe. I can't find a way to set the position of the box lower. I'd probably need to use three.js but I'm not too good at JS in general.

<!DOCTYPE html>
<html>
  <head>
    <title>Drop the Box</title>
        <script src="https://aframe.io/releases/1.0.0/aframe.min.js"></script>
        <script src="https://cdn.rawgit.com/donmccurdy/aframe-physics-system/v4.0.1/dist/aframe-physics-system.min.js"></script>
         <script src="index.js"></script>
  </head>
  <body>
    <a-scene physics="gravity:-4.5">
    
        <a-sky color="lightblue"></a-sky>
        <a-plane position="0 -10 -10" width="20" height="20" rotation="-90 0 0"></a-plane>
      <!-- Camera -->
      <a-entity camera look-controls
      wasd-controls
      position="0 1.6 0"
      constraint="collideConnected:true"
      static-body
      ></a-entity>
      <a-camera>
          <a-cursor></a-cursor>
      </a-camera>
    <a-box position="-10 0 -10" width="2" height="2" depth="2" color="red"
    animation__1="
    property:position;
    from: -10 0 -10;
    to: 10 0 -10;
    loop: true;
    dur: 2000;
    dir: alternate;
    pauseEvents: click;
    "
   animation__2="
   property:position;
   from: position;
   to: position.x y-10 z;
   startEvents:click;
   "></a-box>
   
    </a-scene>

  </body>
</html>

I tried to use Javascript but I don't really know how to start.

Original Q&A

There are 1 best solutions below

**Pietro** · Answer 1 · 2024-03-28T16:43:53.873000

I belive the simplest approach is just to set the box to be a dynamic-body as soon as you click. I also updated the libraries you were using.

<!DOCTYPE html>
<html>
  <head>
    <title>Drop the Box</title>
    <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/c-frame/[email protected]/dist/aframe-physics-system.min.js"></script>
  </head>
  <body>
    <script>
      AFRAME.registerComponent("dynamic-onclick", {
        init: function () {
          var boxEl = this.el;

          // listen for the click event
          boxEl.addEventListener("click", function () {
            boxEl.setAttribute("dynamic-body", "");
          });
        },
      });
    </script>
    <a-scene physics="debug: true;">
      <a-sky color="lightblue"></a-sky>

      <!-- Camera -->
      <a-entity
        camera
        look-controls
        wasd-controls
        position="0 1.6 0"
        constraint="collideConnected:true"
        static-body
      ></a-entity>
      <a-camera>
        <a-cursor></a-cursor>
      </a-camera>
      <!-- Floor -->
      <a-plane
        position="0 -10 -10"
        width="20"
        height="20"
        rotation="-90 0 0"
        static-body
      ></a-plane>

      <!-- Immovable box -->
      <a-box
        position="0 0.5 -5"
        width="3"
        height="3"
        depth="3"
        color="red"
        dynamic-onclick
        animation__1="
        property:position;
        from: -10 0 -10;
        to: 10 0 -10;
        loop: true;
        dur: 2000;
        dir: alternate;
        pauseEvents: click;"
      ></a-box>
      
    </a-scene>
  </body>
</html>

There are of course many other ways to do this, if you just want to stack boxes especially, even without using phisics.

How do I make the position of a box a variable in Aframe or set the position x, y-10, z?

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in GAME-DEVELOPMENT

Related Questions in AFRAME

Trending Questions

Popular # Hahtags

Popular Questions