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

Questions
, , ,
1

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.

Here’s what I’ve tried so far:

Attempted to use the Collada loader:

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!

2

Looking at this - .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 - 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.)

1 Like
3

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

4

You load models the same way as with other loaders.

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.

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.

1 Like
5

Thank you for your answer. I appreciate your help.