Working in 3D

• Geometry: The shape/structure (cube, sphere, plane).
• Material: The surface properties (color, texture, how light interacts).
• Mesh: The combination of geometry + material that creates a renderable object.
• Object3D: The base class that provides position, rotation, and scale properties.

new BoxGeometry(1, 1, 1); // Perfect cube
new BoxGeometry(2, 0.5, 1); // Rectangular box (width, height, depth)

new SphereGeometry(1, 32, 32); // Simple sphere (radius, horizontal segments, vertical segments)
new SphereGeometry(1, 16, 16); // Lower detail for better performance

new CylinderGeometry(1, 1, 2, 32); // Cylinder
new CylinderGeometry(0, 1, 2, 32); // Cone (top radius = 0)

new PlaneGeometry(2, 2); // Square plane
new PlaneGeometry(4, 2); // Rectangular plane (width, height)

• MeshBasicMaterial, which produces a simple material with flat colors that don’t respond to lighting, like this example.

  import { MeshBasicMaterial } from 'three';
  
  // Flat colors that don't respond to lighting
  new MeshBasicMaterial({ color: 0xff0000 });
  new MeshBasicMaterial({ color: 'red' });
  new MeshBasicMaterial({ color: '#ff0000' });
  
• MeshStandardMaterial, which produces a material that creates realistic lighting, like this example.

  import { MeshStandardMaterial } from 'three';
  
  // Responds to lights in your scene
  new MeshStandardMaterial({
    color: 0x0066cc,
    roughness: 0.5, // 0 = mirror, 1 = completely rough
    metalness: 0.2, // 0 = non-metal, 1 = metal
  });
  

import { Mesh } from 'three';

// Create a red cube
const cube = new Mesh(cubeGeometry, redMaterial);

// Create a blue sphere
const sphere = new Mesh(sphereGeometry, blueMaterial);

• Entities are things in your world (like a cube or player).
• Components are data that describes entities (position, color, behavior).
• Systems are logic that operates on entities with specific components.

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

// First create the Three.js mesh
const mesh = new Mesh(
  new BoxGeometry(1, 1, 1),
  new MeshStandardMaterial({ color: 0xff6666 }),
);

// Position the mesh
mesh.position.set(0, 1, -2);

// Create a transform entity from the mesh
const entity = world.createTransformEntity(mesh);

1. Creates a standard Three.js mesh with geometry and material.
2. Sets the initial position, rotation, or scale on the mesh.
3. Creates an IWSDK entity with a Transform component that manages the mesh.

// BEFORE creating entity - manipulate the mesh directly
mesh.position.set(2, 0, -3); // 2 units right, 0 up, 3 units away
mesh.rotation.y = Math.PI / 2; // 90 degrees around Y-axis
mesh.scale.set(2, 2, 2); // Double size in all dimensions

const entity = world.createTransformEntity(mesh);

// AFTER creating entity - manipulate via entity.object3D
entity.object3D.position.x = 1; // Move 1 unit to the right
entity.object3D.position.y = 2; // Move 2 units up
entity.object3D.position.z = -5; // Move 5 units away from viewer

// You can also use quaternion for more precise rotation control
entity.object3D.quaternion.setFromEuler(new Euler(0, Math.PI, 0));

// Scale individual axes
entity.object3D.scale.set(1, 0.5, 1); // Half height, normal width/depth

• X-axis: Left (-) to Right (+)
• Y-axis: Down (-) to Up (+)
• Z-axis: Into screen (+) to Out of screen (-)

1. Add the Three.js imports you’ll need at the top of your file.

    import {
      // ... existing imports
      Mesh,
      BoxGeometry,
      SphereGeometry,
      PlaneGeometry,
      MeshStandardMaterial,
    } from '@iwsdk/core';
   
2. In the World.create().then((world) ={ section, add your primitive objects after the existing asset loading code but before the world.registerSystem() calls. This ensures your objects are created after the world is properly initialized but before any systems that might need to interact with them start running.

    World.create(/* ... existing options */).then((world) ={
      // ... existing camera setup and asset loading code
   
      // Add your primitive objects here:
   
      // Create a red cube
      const cubeGeometry = new BoxGeometry(1, 1, 1);
      const redMaterial = new MeshStandardMaterial({ color: 0xff3333 });
      const cube = new Mesh(cubeGeometry, redMaterial);
      cube.position.set(-1, 0, -2);
      const cubeEntity = world.createTransformEntity(cube);
   
      // Create a green sphere
      const sphereGeometry = new SphereGeometry(0.5, 32, 32);
      const greenMaterial = new MeshStandardMaterial({ color: 0x33ff33 });
      const sphere = new Mesh(sphereGeometry, greenMaterial);
      sphere.position.set(1, 0, -2);
      const sphereEntity = world.createTransformEntity(sphere);
   
      // Create a blue floor plane
      const floorGeometry = new PlaneGeometry(4, 4);
      const blueMaterial = new MeshStandardMaterial({ color: 0x3333ff });
      const floor = new Mesh(floorGeometry, blueMaterial);
      floor.position.set(0, -1, -2);
      floor.rotation.x = -Math.PI / 2; // Rotate to be horizontal
      const floorEntity = world.createTransformEntity(floor);
   
      // ... rest of existing code (systems registration, etc.)
    });