@c-frame/physx
Version:
Physics for A-Frame using Nvidia PhysX
119 lines (98 loc) • 3.69 kB
HTML
<html>
<head>
<title>Examples • Basic PhysX</title>
<script src="https://aframe.io/releases/1.7.1/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-environment-component@1.5.0/dist/aframe-environment-component.min.js"></script>
<script src="../../dist/physx.js"></script>
<link rel="stylesheet" href="../../styles.css">
</head>
<body>
<div class="text-overlay">
<p>Basic example showing use of PhysX in a scene</p>
<p>Example created by <a target="_blank"href="https://stemkoski.github.io/A-Frame-Examples/">Lee Stemkoski</a></p>
</div>
<a class="code-link"
target="_blank"
href="https://github.com/c-frame/physx/blob/main/examples/basic/index.html">
view code
</a>
<a-scene environment="preset: default;" physx="autoLoad: true; delay: 1000; useDefaultScene: false; stats: panel">
<a-assets>
<img id="crate" src="images/crate.jpg" />
<img id="pixels" src="images/pixels.png" />
<img id="ball" src="images/basketball-gray.png" />
<img id="hexagons" src="images/hexagons.png"/>
</a-assets>
<!-- camera -->
<a-entity camera look-controls wasd-controls="acceleration: 4" position="0 1.6 0"></a-entity>
<!-- Floor -->
<a-box physx-body="type: static;"
position="0 0.02 0"
width="20" depth="20" height="0.1"
material="src: #crate; repeat: 10 10;">
</a-box>
<!-- Walls -->
<a-box physx-body="type: static;"
position="0 0.51 -10"
width="20" depth="0.1" height="1"
material="src: #crate; repeat: 10 10;">
</a-box>
<a-box physx-body="type: static;"
position="0 0.51 10"
width="20" depth="0.1" height="1"
material="src: #crate; repeat: 10 10;">
</a-box>
<a-box physx-body="type: static;"
position="10 0.51 0"
width="0.1" depth="20" height="1"
material="src: #crate; repeat: 10 10;">
</a-box>
<a-box physx-body="type: static;"
position="-10 0.51 0"
width="0.1" depth="20" height="1"
material="src: #crate; repeat: 10 10;">
</a-box>
<!-- Dynamic objects -->
<a-box physx-body="type: dynamic;"
position="-5 3 -5" rotation="10 20 30"
material="src:#crate;">
</a-box>
<a-cylinder physx-body="type: dynamic;"
position="-3 3 -5" rotation="5 10 15"
radius="0.25" height="1"
material="src: #hexagons">
</a-cylinder>
<a-entity physx-body="type: dynamic;"
geometry="primitive: icosahedron; radius: 0.5;"
position="-1 3 -5" rotation="53 37 42"
material="src: #pixels; repeat: 10 10;">
</a-entity>
<a-sphere physx-body="type: dynamic;" physx-material="restitution: 0.8;"
position="1 6 -5"
radius="0.5"
material="src:#ball; color:red;">
</a-sphere>
<a-sphere physx-body="type: dynamic;" physx-material="restitution: 0.8;"
position="2.5 6 -5.1"
radius="0.5"
material="src:#ball; color:orange;">
</a-sphere>
<a-sphere physx-body="type: dynamic;" physx-material="restitution: 0.8;"
position="3 4 -5"
radius="0.5"
material="src:#ball; color:yellow;">
</a-sphere>
<a-sphere physx-body="type: dynamic;" physx-material="restitution: 0.8;"
position="3.5 8 -4.8"
radius="0.5"
material="src:#ball; color:green;">
</a-sphere>
<a-sphere physx-body="type: dynamic;" physx-material="restitution: 0.8;"
position="5 2 -5"
radius="0.5"
material="src:#ball; color:blue;">
</a-sphere>
</a-scene>
</body>
</html>