Develop

Chapter 1b: Minimal Scene

Updated: Sep 4, 2026

This walkthrough adds one visible Three.js object to the generated IWSDK starter while preserving the starter’s existing robot and welcome-panel systems. It shows the complete src/index.ts or src/index.js file so you can see exactly where application code belongs. The same source works in both the TypeScript and JavaScript starters.

Replace `src/index.ts` or `src/index.js`

import { BoxGeometry, Mesh, MeshBasicMaterial, World } from '@iwsdk/core';
import projectOptions from 'virtual:iwsdk-project';
import { PanelSystem } from './panel.js';
import { RobotSystem } from './robot.js';

const sceneContainer = document.getElementById('scene-container');
if (!(sceneContainer instanceof HTMLDivElement)) {
  throw new Error('Missing #scene-container');
}

// Create the IWSDK world from iwsdk.config.json and its active scene.
World.create(sceneContainer, projectOptions).then((world) => {
  // Three.js supplies the geometry, material, mesh, and transforms.
  const cube = new Mesh(
    new BoxGeometry(0.5, 0.5, 0.5),
    new MeshBasicMaterial({ color: 0x4f8cff }),
  );

  // X is left/right, Y is down/up, and negative Z is forward from the
  // starter origin. This places the cube below the welcome panel, two metres
  // away, so both remain visible when you enter XR.
  cube.position.set(0, 0.75, -2);

  // Register the Three.js object with IWSDK's ECS and level lifecycle.
  world.createTransformEntity(cube);

  // Systems contain behavior that runs every frame or reacts to ECS queries.
  world.registerSystem(RobotSystem);
  world.registerSystem(PanelSystem);
});

Run the project:

npm run dev

The blue cube should appear in front of the starting position. The starter robot and welcome panel are examples rather than required framework objects; you can remove them when you replace their scene nodes and system registrations with your own content.

Chapter 1b: Minimal Scene

Replace src/index.ts or src/index.js

Where Different Work Belongs

Replace `src/index.ts` or `src/index.js`