Develop

Meshes, Geometry & Materials

Updated: Sep 4, 2026
IWSDK exports the Three.js classes used by the runtime. Build procedural meshes with those exports, then attach each interactive or queryable object to an ECS transform entity.

Create geometry and a material

import {
  BoxGeometry,
  Mesh,
  MeshStandardMaterial,
} from '@iwsdk/core';

const geometry = new BoxGeometry(1, 1, 1);
const material = new MeshStandardMaterial({
  color: 0x4f7cff,
  roughness: 0.65,
  metalness: 0.1,
});
const mesh = new Mesh(geometry, material);
MeshStandardMaterial responds to lights and image-based lighting. Provide one of those sources before judging its final appearance.

Add the mesh to IWSDK

const entity = world.createTransformEntity(mesh);
entity.object3D!.position.set(0, 1, -2);
The entity receives Transform, and the object is attached to the active level. Pass { persistent: true } when it must survive a level change.

Share or clone resources deliberately

Meshes can share geometry and materials.
const sharedGeometry = new BoxGeometry(0.2, 0.2, 0.2);
const sharedMaterial = new MeshStandardMaterial({ color: 0xff7a45 });

const first = new Mesh(sharedGeometry, sharedMaterial);
const second = new Mesh(sharedGeometry, sharedMaterial);
Call entity.destroy() to remove an entity without disposing shared GPU resources. Call entity.dispose() only when the entity owns its geometry, materials, and textures.

Author lighting explicitly

IWSDK does not inject a default environment. The generated immersive VR and browser starters declare a dome and image-based lighting on the level root. The mixed reality/passthrough starter keeps image-based lighting but omits the visible dome so the real environment remains visible.
{
  "components": {
    "com.iwsdk.components.DomeGradient": {
      "sky": [0.2423, 0.6172, 0.8308, 1],
      "equator": [0.6584, 0.7084, 0.7913, 1],
      "ground": [0.807, 0.7758, 0.7454, 1],
      "intensity": 1
    },
    "com.iwsdk.components.IBLGradient": {
      "sky": [0.6902, 0.749, 0.7843, 1],
      "equator": [0.6584, 0.7084, 0.7913, 1],
      "ground": [0.807, 0.7758, 0.7454, 1],
      "intensity": 1
    }
  }
}
DomeGradient controls the visible background. IBLGradient supplies image-based lighting. They are independent components; removing one does not recreate it.

Use an HDR environment asset

Register the HDR file in the asset manifest, then reference its asset ID from the level root.
import { DomeTexture, IBLTexture } from '@iwsdk/core';

const levelRoot = world.activeLevel.value;

levelRoot.addComponent(IBLTexture, {
  src: 'sunset-hdr',
  intensity: 1,
});
levelRoot.addComponent(DomeTexture, {
  src: 'sunset-hdr',
});
Use IBLTexture without DomeTexture when the image must light objects without appearing as the background.

Update materials

material.color.set(0x22cc88);
material.roughness = 0.4;
material.needsUpdate = true;
Set needsUpdate after a change that alters the material program. Numeric uniform-like properties do not all require it.
See Three.js basics and ECS and Three.js interop.
Nav Logo
English (US)
© 2026 Meta