# Integrating Three.js with a URDF File

**URL:** <https://discourse.threejs.org/t/integrating-three-js-with-a-urdf-file/60087>\
**Category:** Questions\
**Tags:** urdf\
**Created:** [January 9, 2024, 6:08am UTC](https://discourse.threejs.org/t/integrating-three-js-with-a-urdf-file/60087 "2024-01-09T06:08:29Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Rohan\_Banerjee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/rohan_banerjee/32/42455_2.png) [@Rohan\_Banerjee](https://discourse.threejs.org/u/Rohan_Banerjee)\
**Post date:** [January 9, 2024, 6:08am UTC](https://discourse.threejs.org/t/integrating-three-js-with-a-urdf-file/60087/1 "2024-01-09T06:08:29Z")

</div>

Hello Everyone  
I want to know that can i load a urdf file in my three.js file using a urdf loader ? as i am not able to find a urdf loader in the three.js github file  
Please help me to integrate the urdf file in my three.js file as i am not able to load a urdf file my three.js ,html,css file

---

<div class="post-metadata">

**Author:** ![anidivr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/anidivr/32/32924_2.png) [@anidivr](https://discourse.threejs.org/u/anidivr)\
**Post date:** [January 9, 2024, 12:08pm UTC](https://discourse.threejs.org/t/integrating-three-js-with-a-urdf-file/60087/2 "2024-01-09T12:08:46Z")

</div>

Seems to be XML under the hood. [urdf - ROS Wiki](https://wiki.ros.org/urdf)

I found [ros/urdf: Repository for URDF parsing code (github.com)](https://github.com/ros/urdf/tree/melodic-devel) which might be place to start for creating a loader.

---

<div class="post-metadata">

**Author:** ![Rohan\_Banerjee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/rohan_banerjee/32/42455_2.png) [@Rohan\_Banerjee](https://discourse.threejs.org/u/Rohan_Banerjee)\
**Post date:** [January 9, 2024, 5:24pm UTC](https://discourse.threejs.org/t/integrating-three-js-with-a-urdf-file/60087/3 "2024-01-09T17:24:08Z")

</div>

how do i integrate the urdf file in my javascript file as i have installed the urdfloader.js but unable to integrate it with three.js

---

<div class="post-metadata">

**Author:** ![marcatec](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/marcatec/32/1668_2.png) [@marcatec](https://discourse.threejs.org/u/marcatec)\
**Post date:** [January 9, 2024, 6:14pm UTC](https://discourse.threejs.org/t/integrating-three-js-with-a-urdf-file/60087/4 "2024-01-09T18:14:04Z")

</div>

Did you try this one from [gkjohnson](https://github.com/gkjohnson)?

> **[GitHub - gkjohnson/urdf-loaders: URDF Loaders for Unity and THREE.js with...](https://github.com/gkjohnson/urdf-loaders)**
>
> URDF Loaders for Unity and THREE.js with example ATHLETE URDF Files open sourced from NASA JPL - GitHub - gkjohnson/urdf-loaders: URDF Loaders for Unity and THREE.js with example ATHLETE URDF Files...

---

<div class="post-metadata">

**Author:** ![Rohan\_Banerjee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/rohan_banerjee/32/42455_2.png) [@Rohan\_Banerjee](https://discourse.threejs.org/u/Rohan_Banerjee)\
**Post date:** [January 10, 2024, 5:41am UTC](https://discourse.threejs.org/t/integrating-three-js-with-a-urdf-file/60087/5 "2024-01-10T05:41:26Z")

</div>

Can u please explaine me the steps for the urdf loader to integrate it with my three.js javascript file so as to 3D render my robotic arm in webengine

---

<div class="post-metadata">

**Author:** ![gkjohnson](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gkjohnson/32/2298_2.png) [@gkjohnson](https://discourse.threejs.org/u/gkjohnson)\
**Post date:** [January 10, 2024, 6:34am UTC](https://discourse.threejs.org/t/integrating-three-js-with-a-urdf-file/60087/6 "2024-01-10T06:34:15Z")

</div>

> Can u please explaine me the steps for the urdf loader to integrate it with my three.js javascript file so as to 3D render my robotic arm in webengine

There are instructions in the linked [urdf-loader repo](https://github.com/gkjohnson/urdf-loaders/tree/master/javascript).

---

<div class="post-metadata">

**Author:** ![Rohan\_Banerjee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/rohan_banerjee/32/42455_2.png) [@Rohan\_Banerjee](https://discourse.threejs.org/u/Rohan_Banerjee)\
**Post date:** [January 10, 2024, 7:53am UTC](https://discourse.threejs.org/t/integrating-three-js-with-a-urdf-file/60087/7 "2024-01-10T07:53:07Z")

</div>

i have downloaded the urdfloader.js and then integrate it in my html

```javascript
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Robotic Arm Visualization</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://threejs.org/build/three.js"></script>
    <script src="urdf-loader.js"></script> <!-- Include your URDF loader script -->
</head>
<body>
    <div id="scene-container"></div>
    <script src="main.js"></script>
</body>
</html>

```

### styles.css

css

```javascript
body { margin: 0; }
#scene-container {
    width: 100vw;
    height: 100vh;
}

```

### main.js

javascript

```javascript
document.addEventListener('DOMContentLoaded', () => {
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.getElementById('scene-container').appendChild(renderer.domElement);

    // Lighting
    const ambientLight = new THREE.AmbientLight(0x404040);
    scene.add(ambientLight);
    const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
    scene.add(directionalLight);

    // URDF Loader
    const urdfLoader = new URDFLoader();
    urdfLoader.load('path/to/your/robot.urdf', (robot) => {
        scene.add(robot);
    });

    camera.position.z = 5;

    function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
    }

    animate();
});

```

I am using this as my base code can someone please review it as when i run it in a live server the page is blank

---

<div class="post-metadata">

**Author:** ![Rohan\_Banerjee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/rohan_banerjee/32/42455_2.png) [@Rohan\_Banerjee](https://discourse.threejs.org/u/Rohan_Banerjee)\
**Post date:** [January 10, 2024, 8:32am UTC](https://discourse.threejs.org/t/integrating-three-js-with-a-urdf-file/60087/8 "2024-01-10T08:32:06Z")

</div>

![Screenshot from 2024-01-10 14-00-53](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/a/ba99784fe2762d447f8ea5a92f9073093824cc47.png)

I am getting these errors as of now , Can someone please help me resolve this