0

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?

YUNG
  • 31
  • 2

1 Answers1

0

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/aframe-extras@4.1.2/dist/aframe-extras.min.js"></script>
<script src="//unpkg.com/aframe-physics-system@3.1.2/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>
Charlie Leedham
  • 26
  • 3