# How to Load a .world Robot File Using Three.js in a Web Application?

**URL:** <https://discourse.threejs.org/t/how-to-load-a-world-robot-file-using-three-js-in-a-web-application/68154>\
**Category:** Questions\
**Tags:** javascript, robotic-simualtion, robotics, threejs\
**Created:** [July 15, 2024, 6:15am UTC](https://discourse.threejs.org/t/how-to-load-a-world-robot-file-using-three-js-in-a-web-application/68154 "2024-07-15T06:15:48Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![thantzin\_win](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/thantzin_win/32/49867_2.png) [@thantzin\_win](https://discourse.threejs.org/u/thantzin_win)\
**Post date:** [July 15, 2024, 6:15am UTC](https://discourse.threejs.org/t/how-to-load-a-world-robot-file-using-three-js-in-a-web-application/68154/1 "2024-07-15T06:15:48Z")

</div>

I’m working on a web application and I need to load a `.world` robot file using Three.js. I’ve tried using the Collada loader but haven’t been successful. Can anyone guide me on how to achieve this?

The `.world` file I’m using is from this [GitHub - leonhartyao/gazebo\_models\_worlds\_collection: collection of gazebo models and worlds](https://github.com/leonhartyao/gazebo_models_worlds_collection).

Here’s what I’ve tried so far:

Attempted to use the Collada loader:

```javascript
var loader = new THREE.ColladaLoader();
loader.load('path/to/your/file.world', function (collada) {
    var scene = collada.scene;
    scene.add(scene);
});

```

Encountered Issues:

- The `.world` file doesn’t load properly.
- I suspect the file format might not be fully compatible with the Collada loader.

Questions:

- Is there a specific loader in Three.js that supports `.world` files?
- Do I need to convert the `.world` file to another format before loading it with Three.js? If so, what tools or steps should I follow?
- Are there any examples or documentation that could help me understand how to work with `.world` files in Three.js?

Any guidance or examples would be greatly appreciated!

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [July 15, 2024, 7:35am UTC](https://discourse.threejs.org/t/how-to-load-a-world-robot-file-using-three-js-in-a-web-application/68154/2 "2024-07-15T07:35:50Z")

</div>

Looking at [this](https://github.com/leonhartyao/gazebo_models_worlds_collection/blob/cce115b82691b7c529a02f47e5efa391145a4ca1/worlds/agriculture.world) - `.world` has not much to do with Collada file format. It _contains_ collada references, but it’s not related to Collada in any direct way (you can find details of the format [here](https://classic.gazebosim.org/tutorials?tut=components) - it’s a custom XML file format created just for Gazebo software, since it also contains light / UI / physics metadata directly within the XML along with the model / geometry references.)

---

<div class="post-metadata">

**Author:** ![thantzin\_win](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/thantzin_win/32/49867_2.png) [@thantzin\_win](https://discourse.threejs.org/u/thantzin_win)\
**Post date:** [July 15, 2024, 8:56am UTC](https://discourse.threejs.org/t/how-to-load-a-world-robot-file-using-three-js-in-a-web-application/68154/3 "2024-07-15T08:56:08Z")

</div>

Thank you, and I apologize for any confusion. I am still working on achieving it

---

<div class="post-metadata">

**Author:** ![Lukasz\_Mestales](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lukasz_mestales/32/65638_2.png) [@Lukasz\_Mestales](https://discourse.threejs.org/u/Lukasz_Mestales)\
**Post date:** [July 15, 2024, 10:02am UTC](https://discourse.threejs.org/t/how-to-load-a-world-robot-file-using-three-js-in-a-web-application/68154/4 "2024-07-15T10:02:18Z")

</div>

You load models the same way as with other loaders.

```javascript
import { ColladaLoader } from 'three/addons/loaders/ColladaLoader.js';

let robot;
//…
const loader = new ColladaLoader( );
loader.load( 'https://raw.githubusercontent.com/mrdoob/three.js/dev/examples/models/collada/stormtrooper/stormtrooper.dae', function ( collada ) {
robot = collada.scene;
scene.add( robot );
robot.position.y = -2;
robot.rotation.z = Math.PI;
} );

```

It is doubtful that it will work `scene.add(scene)` … You are using scene as the variable holding the loaded scene (collada.scene) and as argument to scene.add(scene).

You can try the one of couple paths: convert `SDF(.world)` format to `DAE`, `OBJ`. Then import it into **Blender** (or other 3D software) and then export it in `glb/gltf`(_if possible_). For instance, you can also import these files directly into the scene, by dedicated loaders.

> **[three.js/examples/jsm/loaders at master · mrdoob/three.js](https://github.com/mrdoob/three.js/tree/master/examples/jsm/loaders)**
>
> JavaScript 3D Library. Contribute to mrdoob/three.js development by creating an account on GitHub.

> _Are there any examples or documentation that could help me understand how to work with .world files in Three.js?_

Directly in Three.js? No. The `.world` extension is generally applied to `SDFormat`, which is also not documented in Three.js and not exampled.

Also keep in mind as you do your research on this topic that you may come across `SDF`. It’s not **SDFormat** but **Signed Distance Function**.

---

<div class="post-metadata">

**Author:** ![thantzin\_win](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/thantzin_win/32/49867_2.png) [@thantzin\_win](https://discourse.threejs.org/u/thantzin_win)\
**Post date:** [July 15, 2024, 10:09am UTC](https://discourse.threejs.org/t/how-to-load-a-world-robot-file-using-three-js-in-a-web-application/68154/5 "2024-07-15T10:09:54Z")

</div>

Thank you for your answer. I appreciate your help.