Threejs render

Getting Started

This project is a monorepo with the package threed-glb-viewer and a test environment in pkg-example.

This package enables interaction with a statically served GLTF file, allowing users to toggle wireframe mode for individual parts and retrieve part annotations (name, live data). The canvas is focused using double left-click and the mouse is used to orbit around the model. Parts can be selected externally using a left click or internally using a right click.

How to use this package

npm install @into-cps-association/threed-glb-viewer
bun add @into-cps-association/threed-glb-viewer
pnpm add @into-cps-association/threed-glb-viewer
yarn add @into-cps-association/threed-glb-viewer

# Create a canvas component
const canvas = CustomCanvas("threed-glb-viewer-canvas");
const body = document.getElementsByTagName("body")[0];
body.appendChild(canvas);

# Specify a path to a gltf file, the canvas id and whether or not to add a floor
renderThreejs("../static/models/2CylinderEngine/glTF/2CylinderEngine.gltf", "threed-glb-viewer-canvas", true)

How to add annotations

setInterval(() => {
  const random1 = Math.random() * 100;

  updateAnnotations({
    motor1: {
      x: -100,
      y: 100,
      z: 0,
      name: "Motor 1 speed",
      value: random1.toString(),
    }
  });
}, 1000);

Styling of annotations

The annotations is styled using the class names annotation, annotation-name and annotation-value

/* Example styling */
.annotation {
  width: max-content;
  background-color: white;
  border: 1px black solid;
  padding: 5px;
  border-radius: 5px;
}
.annotation-name {
  font-size: 1.2rem;
}
.annotation-value {
  color: red;
}

Development

Build package

cd packages/threed-glb-viewer

bun install

bun run build

Main package

Start test server

cd packages/pkg-example

bun install

bun run dev

Test server

References

glTF Sample Models

License

MIT