A-Frame Physical System: Custom Physical Materials

I created a scene in A-Frame using the "A-Frame Physics System" ( https://github.com/donmccurdy/aframe-physics-system ):

<!DOCTYPE>
<html>
<head>

<script src="aframe.min.js"></script>
<script src="aframe-extras.min.js"></script>
<script src="aframe-physics-system-master/dist/aframe-physics-system.min.js"></script>
</head>

  <a-scene id="myscene" physics>
    <!--CAMERA-->
    <a-entity camera="userHeight: 1.6" look-controls></a-entity>

    <!--BALL1-->
    <a-sphere color="red" radius="0.3" position="5 5 5" dynamic-body></a-sphere>

    <!--BALL2-->
    <a-sphere color="green" radius="0.3" position="6 5 5" dynamic-body></a-sphere>

    <!--GROUND-->
    <a-plane id="ground" height="200" width="200" rotation="-90 0 0" position="0 0 0" metalness="0" roughness="1" static-body></a-plane>

  </a-scene>
</body>
</html>

The scene consists of two spheres and one plane. I want one ball to bounce more than the others when it hits a plane. I learned from the documentation that we can change properties, such as friction and restitution for the whole scene, using:

<a-scene physics="friction: 0.1; restitution: 0.5">
    <!-- ... -->
</a-scene>

But I want different values ​​of friction and restitution for different areas. Please let me know if this is possible in A-Frame. Thanks in advance!

+4
source share
1 answer

: API- CANNON.js JavaScript.

Cannon.js . , :

  • / Cannon.world
  • Cannon Objecs .
  • Cannon.ContactMaterial , / . Cannon.world, .

:

  • CANNON.world: var world = $('a-scene')[0].systems.physics.world;
  • : var firstMaterial = new CANNON.Material("firstMaterial"); var secondMaterial = new CANNON.Material("secondMaterial");
  • a-frame: $('#cannon')[0].body.material=firstMaterial; $('floor')[0].body.material=secondMaterial;

  • var secondCM = new CANNON.ContactMaterial(firstMaterial,secondMaterial, [restitution = 2]); world.addContactMaterial(secondCM);

.

+4

Source: https://habr.com/ru/post/1679454/


All Articles