Use URDF in A-Frame. Based on the popular
- urdf-loaders by @gkjohnson
- A-Frame by @aframevr
Drop in the URDF component:
<head>
<title>My A-Frame Scene</title>
<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
<!-- Option (A) from NPM package -->
<script src="https://unpkg.com/aframe-urdf@0.1.0/dist/urdf.min.js"></script>
<!-- Option (B) from GitHub -->
<script src="https://raw.githubusercontent.com/hu-popo/aframe-urdf/main/dist/urdf.min.js"></script>
...
</head>
<body>
<a-scene>
...
<a-entity id="robot" urdf="url: path/to/robot.urdf; mtl: #default-mtl"></a-entity>
</a-scene>
</body>
install using npm
npm install aframe-urdf
basic loop is
npm install
npm run build
npm run dev
open http://localhost:8080
in your browser, use ctrl-alt-i to open the inspector
to test on a VR headset
npm run build
npm run start
open https://localhost:8080
in your VR browser, click "Enter VR" in the bottom right corner
This currently only supports URDFs that use .obj
files or primitives like boxes, spheres, and cylinders. The example provided is based on a 3DoF arm, and has also been debugged with the Stompy Humanoid.
@misc{aframe-urdf-2024,
title={A-Frame URDF},
author={Hugo Ponte},
year={2024},
url={https://github.com/hu-po/aframe-urdf}
}