Spatial Editor

• Set up Meta Spatial Editor for IWSDK integration.
• Create and compose 3D scenes visually with drag-and-drop.
• Add IWSDK components to objects directly in the editor.
• Export scenes that automatically integrate with your IWSDK projects.
• Use hot reload for instant feedback between editor and code.
• Create custom components and use them in the visual editor.

• Visual scene layout: Position objects in 3D space with immediate feedback.
• Component assignment: Add grabbable, physics, and UI components without coding.
• Asset composition: Drag-and-drop 3D model placement and organization.
• Designer collaboration: Non-programmers can contribute to scene creation.

• Custom interactions: Complex behaviors and game logic.
• Dynamic content: Procedural generation and runtime changes.
• Performance optimization: Fine-tuned systems and queries.
• Integration: APIs, databases, and external services.

• A working IWSDK project.
• Node.js 20.19.0+: For running the development server.
• IWSDK project with Meta Spatial Editor integration: Created with npm create @iwsdk@latest and chose “Yes” for Meta Spatial Editor integration.

• Mac: Meta Spatial Editor for Mac
• Windows: Meta Spatial Editor for Windows

cd your-iwsdk-project  # Navigate to your project
npm run dev            # Start the development server

1. Launch Meta Spatial Editor.
2. Open the Main.metaspatial file in your project’s metaspatial/ directory.
   You should see a basic scene with some example objects.

• Left mouse + drag: Rotate camera around the scene.
• Middle mouse + drag: Pan the camera view.
• Mouse wheel: Zoom in/out.
• W/A/S/D or arrow keys: Walk the viewport camera.
• Left click: Select objects.

1. From the Asset Library, drag a GLTF model directly into the 3D viewport.
2. The object appears both in the scene and in the Composition panel hierarchy.

1. Click the gizmo + plus icon in the Composition panel.
2. This creates an empty node that can serve as a parent group for organizing objects.

1. Create parent groups for logical organization (e.g., “Furniture”, “Lighting”, “Interactive Objects”).
2. Drag child objects onto parent nodes in the Composition panel to establish relationships.
3. Name objects descriptively - this helps when writing code that references them.

1. Select an object in the viewport or Composition panel.
2. Use the visual gizmos to adjust transforms, materials, and other properties.

💡 Precision Controls

Hold Shift while dragging for finer control, or use the Properties panel to enter exact numeric values for transforms.

1. Select an object you want to make interactive.
2. In the Properties panel, find the “Immersive Web SDK Components” section.
3. Click the + button to add a component.
4. Choose a component like “Interactable” or “OneHandGrabbable”.
5. Configure properties in the component’s settings.

• Interactable: Makes the object respond to pointer events
• OneHandGrabbable or DistanceGrabbable: Defines grab behavior

• Meta Spatial Editor: Saves your project (Cmd/Ctrl+S).
• Vite Plugin: Detects the change and regenerates GLXF export.
• IWSDK Runtime: Automatically reloads the updated scene.
• Your App: Updates instantly in browser or headset.

1. Add a grabbable object in Meta Spatial Editor (follow the steps above).
2. Save the project (Cmd/Ctrl+S).
3. Check your IWSDK app (browser or headset) - the object should now be grabbable.
4. Try grabbing it with controllers or hand tracking.

import { createComponent, createSystem } from '@iwsdk/core';

// Define a component with configurable properties
export const Spinner = createComponent('Spinner', {
  speed: { type: 'float', default: 1.0 },
  axis: { type: 'enum', values: ['X', 'Y', 'Z'], default: 'Y' }
});

// Create a system that processes Spinner components
export class SpinSystem extends createSystem({
  spinners: { required: [Spinner] },
}) {
  update(delta) {
    this.queries.spinners.entities.forEach((entity) => {
      const speed = entity.getValue(Spinner, 'speed');
      const axis = entity.getValue(Spinner, 'axis');

      // Rotate the object based on the axis setting
      if (axis === 'Y') {
        entity.object3D.rotateY(delta * speed);
      } else if (axis === 'X') {
        entity.object3D.rotateX(delta * speed);
      } else if (axis === 'Z') {
        entity.object3D.rotateZ(delta * speed);
      }
    });
  }
}

import { SpinSystem } from './spinner.js';

// After World.create()
World.create(/* ... */).then((world) => {
  // Register your custom system
  world.registerSystem(SpinSystem);

  // ... rest of your setup
});

1. Select an object you want to spin.
2. In the Properties panel, click + next to “Immersive Web SDK Components”.
3. Click the Reload button in the component dropdown to refresh available components.
4. Choose Spinner from the list.
5. Configure properties: Set speed to 2.0, axis to Y.
6. Save the project.

1. Create your UIKitML file in your project’s ui/ directory.
2. In Meta Spatial Editor, click Add 2D Panel or use the menu: Nodes > New > 2D Panel.
3. Select the new Panel node in the Composition panel.
4. Position and size the panel in 3D space using transform gizmos.
5. In the Properties panel, set the Panel ID to match your UIKitML filename.
6. Save the project.
   The 2D UI will automatically appear in your IWSDK app at the specified position and size.

• Use Meta Spatial Editor for: Spatial layout, asset placement, visual component assignment, lighting setup.
• Use IWSDK code for: Game logic, dynamic behavior, performance optimization, API integration.

• Designers/Artists: Work primarily in Meta Spatial Editor for layouts and visual composition.
• Developers: Focus on IWSDK code for systems and behavior.
• Both: Communicate about component interfaces and naming conventions.

• Use the editor for layout, Not logic: Keep business logic in code; use the editor for spatial layout and component assignment.
• Version Control: Track both your IWSDK project and your metaspatial project in source control.
• Collaborate: Designers can iterate on scenes without blocking developers, and vice versa.