HTML/JavaScript

1. Import three.js and apollo-three-engine

Add the following to the <head> element of your HTML file.

<script type="importmap">
	{
	  "imports": {
	    "three_engine/": "<https://cdn.jsdelivr.net/gh/Apollo-Lab-Yale/apollo-three-engine@main/js/>",
	    "three": "<https://unpkg.com/[email protected]/build/three.module.js>",
	    "three/": "<https://unpkg.com/[email protected]/>"
	  }
	}
</script>

Then in your main module script you can import the necessary utilities.

import {ThreeEngine} from 'three_engine/utils/utils_three.js';
import {RobotFKSlidersVisualizer} from 'three_engine/utils/utils_kinematics.js';
import {RobotFromPreprocessor} from 'three_engine/utils/utils_robot.js';

2. Fetch JSON files from preprocessor to configure robot

const [chainConfig, urdfConfig, meshConfig_stl, meshConfig, meshConfig_hull, meshConfig_convex_decomposition, shapesConfig] = await Promise.all([
	fetch(`${robot_dir}/chain_module/module.json`).then(response => response.json()),
	fetch(`${robot_dir}/urdf_module/module.json`).then(response => response.json()),
	fetch(`${robot_dir}/mesh_modules/plain_meshes_module/module.json`).then(response => response.json()),
	fetch(`${robot_dir}/mesh_modules/original_meshes_module/module.json`).then(response => response.json()),
	fetch(`${robot_dir}/mesh_modules/convex_hull_meshes_module/module.json`).then(response => response.json()),
	fetch(`${robot_dir}/mesh_modules/convex_decomposition_meshes_module/module.json`).then(response => response.json()),
	fetch(`${robot_dir}/link_shapes_modules/link_shapes_approximations_module/module.json`).then(response => response.json()),
]);

3. Initialize robot from preprocessor

let robot = new RobotFromPreprocessor(
	chainConfig,
	urdfConfig,
	meshConfig,
	meshConfig_stl,
	'stl', // default mesh type
	meshConfig_hull,
	meshConfig_convex_decomposition,
	shapesConfig,
	`apollo-resources/${robots_dir}`
);

4. Spawn robot

Create a new three_engine instance and spawn the robot. This will place all the links at the origin.

let engine = ThreeEngine.new_default_3d();
robot.spawn_robot(engine);

Now to set the robot links, forward kinematics needs to be used. This is implemented in the utils_kinematics.js file, and is called in the FKSlidersVisualizer. This can be called as follows.

let robot_visualizer = new RobotFKSlidersVisualizer(robot);

5. Source for spawning a robot in three.js

https://github.com/Apollo-Lab-Yale/apollo-resources/blob/main/index.html