Develop

Three.js Basics in IWSDK

Updated: Sep 4, 2026
IWSDK owns a Three.js scene, camera, renderer, and render loop. You create Three.js content and connect it to ECS behavior through transform entities.

What IWSDK manages

  • The Scene, PerspectiveCamera, and WebGLRenderer lifecycle.
  • A persistent player origin with the camera as a child.
  • The renderer animation loop and WebXR integration.
  • Synchronized ECS and Three.js transforms.
  • Systems for authored dome, image-based lighting, and light components.
  • Browser and XR pointer interaction.
ECS entity  ← synchronized transform →  Three.js Object3D
     ↓                                      ↓
components and systems                 geometry and material

Create a mesh

Use a native scene that declares the environment or lights needed by the material.
import {
  BoxGeometry,
  Mesh,
  MeshStandardMaterial,
  World,
} from '@iwsdk/core';

const world = await World.create(container, {
  level: '/scenes/main.iwsdk.scene.json',
});

const mesh = new Mesh(
  new BoxGeometry(1, 1, 1),
  new MeshStandardMaterial({ color: 0x4f7cff }),
);

const entity = world.createTransformEntity(mesh);
entity.object3D!.position.set(0, 1, -2);
IWSDK does not inject lighting into an empty level. A standard material without authored lighting or an environment appears dark.

Choose ECS or Three.js

Use Three.js for geometry, materials, object hierarchies, and renderer-specific properties. Use ECS components and systems for queryable application state and behavior.
The position, quaternion, rotation, and scale on an entity’s object3D are synchronized views over its Transform component.
entity.object3D!.position.x += 0.1;

const position = entity.getVectorView(Transform, 'position');
position[1] += 0.1;
Both updates modify the transform state used by IWSDK.

Root ownership

An entity created with createTransformEntity() belongs to the active level by default. It is removed during a level change.
const levelObject = world.createTransformEntity(mesh);
const persistentObject = world.createTransformEntity(tool, {
  persistent: true,
});
Use the persistent option for application objects that must remain across scenes.

Next steps

Nav Logo
English (US)
© 2026 Meta