'How to make object walk up and down stairs/fall if there is no "floor"?

I'm totally new to AFRAME and html. I made my first virtual experience recently!!

For the next step, i want to make some stairs that the character/first person camera can walk up and down, and also a hole in the floor so the character/first person camera can "fall" into the hole.

what is that called/where can i begin looking for how to do that?

aframegravity


Solution 1:[1]

So I've been thinking about how to do this as well and the answer is fairly straight forward although comes with one particular con.

Run the snippet below and you can see it in action where I applied some physics to this example, and kinematic-body being applied to the camera element, also has jump-ability by pressing space it makes the player jump.

You need to add static-body to elements that will have the collision effect whilst the camera being kinematic-body, and cause you lower the stairs position against the cameras position, the camera can automatically 'climb' it

The con is that this physics engine seems to only work with an older version of aframe, 0.8.2, I don't 'think' it works with the latest aframe version 1.3.0

<script src="//aframe.io/releases/0.8.2/aframe.min.js"></script>
<script src="//unpkg.com/[email protected]/dist/aframe-extras.min.js"></script>
<script src="//unpkg.com/[email protected]/dist/aframe-physics-system.min.js"></script>

<a-scene background="color: lightblue;">

  <a-entity id="rig" movement-controls kinematic-body jump-ability>
    <a-entity camera look-controls="pointerLockEnabled: true;" position="0 1.6 0"></a-entity>
  </a-entity>
  
  <a-entity>
    <a-box  static-body color="#203120" position="0 0 -3" scale="4 0.5 1"></a-box>
    <a-box static-body color="#2e422e" position="0 0.5 -4" scale="4 0.5 1"></a-box>
    <a-box static-body color="#203120" position="0 1 -5" scale="4 0.5 1"></a-box>
    <a-box  static-body color="#2e422e" position="0 1.5 -6" scale="4 0.5 1"></a-box>
    <a-box static-body color="#203120" position="0 2 -7" scale="4 0.5 1"></a-box>
    <a-box static-body color="#2e422e" position="0 2.5 -8" scale="4 0.5 1"></a-box>
    <a-box  static-body color="#203120" position="0 3 -9" scale="4 0.5 1"></a-box>
    <a-box static-body color="#2e422e" position="0 3.5 -10" scale="4 0.5 1"></a-box>
    <a-box static-body color="#203120" position="0 4 -11" scale="4 0.5 1"></a-box>

    <a-box color="gray" height="1" width="400" depth="400" static-body position="0 -0.7 0"></a-box>
  </a-entity>
  
</a-scene>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions