### Component Kit Button Example (uikitml)

Source: https://developers.meta.com/horizon/documentation/web/iwsdk-guide-spatial-ui

Shows an example of using a Button component from an installed component kit. This demonstrates integrating pre-built UI elements into the uikitml structure.

```uikitml
<Button id="xr-button">
  <ButtonIcon>
    <LoginIcon></LoginIcon>
  </ButtonIcon>
  Enter XR
</Button>
```

--------------------------------

### Running the Physics Example Project (Shell)

Source: https://developers.meta.com/horizon/documentation/web/iwsdk-guide-physics

Commands to navigate to, install dependencies for, and run the physics example project within the SDK. This requires Node.js and pnpm. The example demonstrates basic physics setup, dynamic object creation, and force application.

```shell
cd examples/physics
pnpm install
pnpm dev
```

--------------------------------

### Complete Interactive Setup with Grabbing and Locomotion

Source: https://developers.meta.com/horizon/documentation/web/iwsdk-guide-built-in-interactions

This comprehensive example integrates both object grabbing and locomotion setup into an existing starter application. It demonstrates how to enable core features like `grabbing` and `locomotion` in `World.create` and subsequently configure specific environment and grabbable objects. It also shows adding `LocomotionEnvironment` for walkable surfaces and `DistanceGrabbable` and `OneHandGrabbable` for different object interaction types.

```javascript
// Update your src/index.ts with these additions:  
  
import {  
  AssetManager,  
  AssetManifest,  
  AssetType,  
  EnvironmentType,  
  Interactable,  
  LocomotionEnvironment,  
  OneHandGrabbable,  
  DistanceGrabbable,  
  SessionMode,  
  World,  
} from "@iwsdk/core";  
  
// ... existing assets and World.create setup with features enabled ...  
  
World.create(/* ... */, {  
  features: {  
    grabbing: true,  
    locomotion: true,  
    // ...other features  
  },  
}).then((world) => {  
  // ... existing camera and environment setup ...  
  
  // Make environment walkable  
  const { scene: envMesh } = AssetManager.getGLTF("environmentDesk");  
  envMesh.rotateY(Math.PI);  
  envMesh.position.set(0, -0.1, 0);  
  world  
    .createTransformEntity(envMesh)  
    .addComponent(LocomotionEnvironment, { type: EnvironmentType.STATIC });  
  
  // Make plant grabbable at distance  
  const { scene: plantMesh } = AssetManager.getGLTF("plantSansevieria");  
  plantMesh.position.set(1.2, 0.85, -1.8);  
  world  
    .createTransformEntity(plantMesh)  
    .addComponent(Interactable)  
    .addComponent(DistanceGrabbable);  
  
  // Make robot grabbable with one hand  
  const { scene: robotMesh } = AssetManager.getGLTF("robot");  
  robotMesh.position.set(-1.2, 0.95, -1.8);  
  robotMesh.scale.setScalar(0.5);  
  world  
    .createTransformEntity(robotMesh)  
    .addComponent(Interactable)  
    .addComponent(OneHandGrabbable);  
  
  // ... rest of your existing setup  
});  
  

```

--------------------------------

### Install Project Dependencies

Source: https://developers.meta.com/horizon/documentation/web/webxr-first-steps

This command installs all the necessary project dependencies listed in the 'package.json' file. This step is crucial after cloning the repository to ensure all required libraries are available for development.

```bash
npm install
```

--------------------------------

### Language Choice for WebXR Project Setup

Source: https://developers.meta.com/horizon/documentation/web/iwsdk-guide-project-setup

When setting up your WebXR project, you can choose between TypeScript and JavaScript. TypeScript offers type safety and better IDE support, recommended for most projects, while JavaScript is simpler for quick prototypes. The setup tool will guide you to select your preferred language.

```bash
Which language do you want to use?
❯ TypeScript
  JavaScript
```

--------------------------------

### Initialize Locomotion System and Environments (JavaScript)

Source: https://developers.meta.com/horizon/documentation/web/iwsdk-concept-locomotion

Quick start guide for enabling locomotion systems and marking level geometry as walkable. This involves registering the LocomotionSystem with configuration and adding LocomotionEnvironment components to entities. It supports static and kinematic environments for different use cases.

```javascript
import { World } from '@iwsdk/core';
import {
  LocomotionSystem,
  LocomotionEnvironment,
} from '@iwsdk/core/locomotion';
import { EnvironmentType } from '@iwsdk/locomotor';

// 1) Enable locomotion systems
world.registerSystem(LocomotionSystem, {
  configData: {
    slidingSpeed: 5,
    turningMethod: 1, // Snap
    turningAngle: 45,
    rayGravity: -0.4,
    useWorker: true,
  },
});

// 2) Mark your level as walkable
const level = world.createTransformEntity(gltf.scene);
level.addComponent(LocomotionEnvironment, { type: EnvironmentType.STATIC });

// Optional: moving platform
const platform = world.createTransformEntity(platformMesh);
platform.addComponent(LocomotionEnvironment, {
  type: EnvironmentType.KINEMATIC,
});
```

--------------------------------

### Android Signing Key Configuration Example

Source: https://developers.meta.com/horizon/documentation/web/pwa-packaging

Example of the interactive prompts for configuring signing key information when initializing a Bubblewrap project. It specifies the key store location and key name, or allows Bubblewrap to create a new keystore.

```bash
Signing key information (5/5)
Please, enter information about the key store containing the keys that will be used
to sign the application. If a key store does not exist on the provided path,
Bubblewrap will prompt for the creation of a new keystore.
	- Key store location: The location of the key store in the file
	  system.
	- Key name: The alias used on the key.
Read more about Android signing keys at:
	 https://developer.android.com/studio/publish/app-signing
? Key store location: /YOUR_PATH/android.keystore
? Key name: android
```

--------------------------------

### Request WebXR Session in A-Frame

Source: https://developers.meta.com/horizon/documentation/web/pwa-webxr

This example shows how to initiate an immersive WebXR session using A-Frame. It adds an event listener to the scene to call `enterVR()` once the scene is ready, ensuring the PWA launches directly into VR.

```html
<script type="text/javascript">
    const scene = document.querySelector('a-scene');
    if (scene.hasLoaded) {
        run();
    } else {
        scene.addEventListener('renderstart', run);
    }
    function run() {
        scene.enterVR();
    }
</script>
```

--------------------------------

### Verify Node.js and npm Installation

Source: https://developers.meta.com/horizon/documentation/web/webxr-first-steps

This code block shows the commands to check the installed versions of Node.js and npm. It specifies that Node.js version '20.x' or later and npm version '10.x' or later are required for the tutorial.

```bash
node -v
npm -v
```

--------------------------------

### Basic UIKitML Structure for a Panel with Text and Button

Source: https://developers.meta.com/horizon/documentation/web/iwsdk-guide-spatial-ui

Demonstrates the fundamental HTML-like syntax of UIKitML for creating a UI panel. It includes a div element styled as a panel with specific dimensions and background color, a text element with styling, and a button. This serves as a foundational example for UI layout and element inclusion.

```uikitml
<div class="panel" style="width: 400; height:300; background-color: #2a2a2a">
  <text style="fontSize:24px; color: white">Hello WebXR!</text>
  <button>Click Me</button>
</panel>
```

--------------------------------

### Input Elements for Spatial UI (HTML)

Source: https://developers.meta.com/horizon/documentation/web/iwsdk-guide-spatial-ui

Provides examples of creating interactive input fields for user data using `<input>` and `<textarea>` elements. Various input types and attributes like `placeholder` and `value` are supported.

```html
<input type="text" placeholder="Enter your name" />
<input type="email" value="user@example.com" />
<textarea placeholder="Multi-line text input">Default content</textarea>
```

--------------------------------

### Robot System Example Imports and Declarations (JavaScript)

Source: https://developers.meta.com/horizon/documentation/web/iwsdk-guide-custom-systems

Shows the necessary imports for the `RobotSystem` example, including utilities like `AudioUtils`, `createComponent`, `createSystem`, and `Vector3`. It also includes the declaration of the `Robot` tag component and the `RobotSystem` class itself, setting up the basic structure for the system.

```javascript
import {
  AudioUtils,
  createComponent,
  createSystem,
  Pressed,
  Vector3,
} from '@iwsdk/core';

// 1. Creating a tag component - no data, just tags entities as robots
export const Robot = createComponent('Robot', {});

// 2. Creating a system with two queries
export class RobotSystem extends createSystem({
  robot: { required: [Robot] }, // All robot entities
  robotClicked: { required: [Robot, Pressed] }, // Only clicked robots
}) {
  // ... rest of the system ...
}

```

--------------------------------

### RobotSystem Lifecycle: init() and update() Methods

Source: https://developers.meta.com/horizon/documentation/web/iwsdk-guide-custom-systems

Illustrates the basic structure of a system's lifecycle within the ECS, showing the `init()` method for setup and resource allocation, and the `update()` method for core behavior execution. `init()` is ideal for one-time setup like subscriptions or object instantiation, while `update()` runs on each frame.

```typescript
init() {
  // Setup resources and subscriptions
}

update() {
  // Run system behavior
}
```

--------------------------------

### Start IWSDK Development Server

Source: https://developers.meta.com/horizon/documentation/web/iwsdk-guide-spatial-editor

Starts the development server for your IWSDK project. This command is essential for enabling hot reload functionality, allowing for instant feedback between the Meta Spatial Editor and your code. Ensure this server is running throughout your development session.

```bash
cd your-iwsdk-project
npm run dev
```

--------------------------------

### Manual Deployment to GitHub Pages

Source: https://developers.meta.com/horizon/documentation/web/iwsdk-guide-build-deploy

This section covers the manual deployment process. It involves installing the `gh-pages` package, building the project, and then deploying the build output to the `gh-pages` branch.

```bash
# Install deployment tool
npm install -D gh-pages

# Build and deploy
npm run build
npx gh-pages -d dist
```

--------------------------------

### Three.js CylinderGeometry Examples

Source: https://developers.meta.com/horizon/documentation/web/iwsdk-guide-working-in-3d

Provides examples for creating CylinderGeometry, suitable for tubes, cans, and cones. Demonstrates how to create cone shapes by setting the top radius to zero.

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

--------------------------------

### Three.js SphereGeometry Examples

Source: https://developers.meta.com/horizon/documentation/web/iwsdk-guide-working-in-3d

Shows how to create SphereGeometry instances for spherical shapes. Allows control over detail levels for performance.

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

--------------------------------

### Three.js MeshStandardMaterial Examples

Source: https://developers.meta.com/horizon/documentation/web/iwsdk-guide-working-in-3d

Shows how to create MeshStandardMaterial for realistic, lit surfaces. Allows control over roughness and metalness to simulate different material properties.

```javascript
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
});
```

--------------------------------

### Three.js BoxGeometry Examples

Source: https://developers.meta.com/horizon/documentation/web/iwsdk-guide-working-in-3d

Demonstrates how to create BoxGeometry instances for cubes and rectangular prisms. Useful for defining the shape of 3D objects.

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

--------------------------------

### Three.js PlaneGeometry Examples

Source: https://developers.meta.com/horizon/documentation/web/iwsdk-guide-working-in-3d

Illustrates the creation of PlaneGeometry for flat surfaces like squares and rectangles. Essential for creating floors, walls, or flat UI elements.

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

--------------------------------

### Clone Tutorial Repository and Navigate

Source: https://developers.meta.com/horizon/documentation/web/webxr-first-steps

This snippet demonstrates how to clone the 'webxr-first-steps' tutorial repository from GitHub using Git and then navigate into the cloned directory. This is the initial step for setting up the local development environment.

```bash
git clone git@github.com:meta-quest/webxr-first-steps.git
cd webxr-first-steps
```

--------------------------------

### Create a New WebXR Project with npm

Source: https://developers.meta.com/horizon/documentation/web/iwsdk-guide-project-setup

Use the npm create command to initialize a new WebXR project. This command downloads and runs a project creation tool that guides you through setting up your project with the correct configurations for your specific needs. It helps in setting up dependencies and a development server.

```bash
npm create @iwsdk@latest
```

--------------------------------

### Run Local Development Server

Source: https://developers.meta.com/horizon/documentation/web/webxr-first-steps

This command starts the local development server, typically using a module bundler like Webpack. Once run, the development server will be accessible at 'localhost:8081', allowing for real-time development and testing.

```bash
npm run dev
```

--------------------------------

### Request WebXR Session in Three.js

Source: https://developers.meta.com/horizon/documentation/web/pwa-webxr

This code snippet demonstrates how to request an immersive WebXR session immediately after the page loads using Three.js. It checks for session support and then sets the WebXR session on the renderer. This is crucial for PWAs to launch directly into immersive mode.

```javascript
export async function init(setupScene = () => {}, onFrame = () => {}) {
  // Other setup code...
  if (navigator.xr && navigator.xr.isSessionSupported) {
    navigator.xr.isSessionSupported('immersive-vr').then((supported) => {
      if (supported && navigator.xr.requestSession) {
        navigator.xr.requestSession('immersive-vr', {
          optionalFeatures: ['REQUIRED_FEATURES'],
        })
        .then((session) => {renderer.xr.setSession(session);});
      }
    });
  }
}
```

--------------------------------

### Run Production Build (npm)

Source: https://developers.meta.com/horizon/documentation/web/iwsdk-guide-build-deploy

This command initiates the production build process for your web application. It bundles and minifies code, compresses assets like GLTF models and textures, and prepares a static site for deployment in the 'dist/' folder.

```bash
npm run build
```

--------------------------------

### Check for PWA Scope with Digital Goods Service

Source: https://developers.meta.com/horizon/documentation/web/pwa-webxr

This JavaScript snippet checks if the Digital Goods service is available, which indicates that the code is running within a PWA context. This check is used to conditionally execute `requestSession` logic, ensuring it's only called in appropriate PWA environments.

```javascript
if (window.getDigitalGoodsService !== undefined) {
  // Add your requestSession related logic here
}
```

--------------------------------

### Create Physically-Based Materials in WebXR

Source: https://developers.meta.com/horizon/documentation/web/iwsdk-concept-three-basics-meshes-geometry-materials

Demonstrates how to create and configure physically-based materials using MeshStandardMaterial, MeshPhysicalMaterial, and MeshBasicMaterial from IWSDK. Includes standard PBR setup with metalness and roughness parameters, advanced PBR with clearcoat and transmission effects, and unlit materials for UI elements.

```javascript
import {
  MeshStandardMaterial,
  MeshPhysicalMaterial,
  MeshBasicMaterial,
} from '@iwsdk/core';

// Standard PBR material (recommended)
const pbr = new MeshStandardMaterial({
  color: 0x00ff00,
  metalness: 0.1,
  roughness: 0.7,
});

// Advanced PBR material
const advanced = new MeshPhysicalMaterial({
  color: 0xffffff,
  metalness: 0,
  roughness: 0.1,
  clearcoat: 1.0,
  clearcoatRoughness: 0.1,
  transmission: 0.9,
  thickness: 1.0,
});

// Unlit material (for UI elements)
const unlit = new MeshBasicMaterial({
  color: 0xff0000,
  transparent: true,
  opacity: 0.8,
});
```

--------------------------------

### Convert Between Local and World Coordinate Spaces

Source: https://developers.meta.com/horizon/documentation/web/iwsdk-concept-three-basics-transforms-math

Explains and provides code examples for converting points and positions between an object's local coordinate system and the global world coordinate system. Essential for understanding hierarchical transformations. Requires 'Vector3', 'Matrix4', and access to 'object3D'.

```javascript
// Get world position of a child object
const worldPos = child.object3D!.getWorldPosition(new Vector3());

// Convert local point to world space
const localPoint = new Vector3(0, 0, -1); // 1 meter forward in local space
const worldPoint = localPoint.applyMatrix4(entity.object3D!.matrixWorld);

// Convert world point to local space
const worldPoint = new Vector3(5, 2, 0);
const localPoint = worldPoint.applyMatrix4(entity.object3D!.worldToLocal);
```

--------------------------------

### Robot System Initialization with Audio Subscription (JavaScript)

Source: https://developers.meta.com/horizon/documentation/web/iwsdk-guide-custom-systems

Illustrates the `init()` method within the `RobotSystem` example. It initializes reusable `Vector3` objects for performance and subscribes to the `robotClicked` query's 'qualify' event. When a robot is clicked (matches the query), an audio effect is played using `AudioUtils.play(entity)`.

```javascript
init() {
  // Performance: Create reusable objects once
  this.lookAtTarget = new Vector3();
  this.vec3 = new Vector3();

  // Audio integration: Subscribe to click events
  this.queries.robotClicked.subscribe('qualify', (entity) => {
    AudioUtils.play(entity);
  });
}

```

--------------------------------

### Create Real-World Sized Objects for WebXR

Source: https://developers.meta.com/horizon/documentation/web/iwsdk-concept-three-basics-meshes-geometry-materials

Demonstrates creating appropriately scaled objects for VR/AR environments using real-world measurements in meters. The example creates a 10cm cube and positions it at comfortable interaction height (1.2m). Proper scaling is essential for natural user interaction and immersion in WebXR applications.

```javascript
// Create objects with appropriate VR/AR scale
const geometry = new BoxGeometry(0.1, 0.1, 0.1); // 10cm cube
const material = new MeshStandardMaterial({
  color: 0x4caf50,
  roughness: 0.3,
  metalness: 0.1,
});

const mesh = new Mesh(geometry, material);
const entity = world.createTransformEntity(mesh);

// Position at comfortable interaction height
entity.object3D.position.set(0, 1.2, -0.5);
```

--------------------------------

### System Initialization Lifecycle Method (JavaScript)

Source: https://developers.meta.com/horizon/documentation/web/iwsdk-guide-custom-systems

Illustrates the `init()` lifecycle method, which is called once when a system is registered with the world. It's used for setting up reusable objects for performance and for establishing reactive subscriptions to queries. This method ensures initial setup is handled efficiently.

```javascript
init() {
  // Initialize reusable objects for performance
  this.tempVector = new Vector3();

  // Set up reactive subscriptions
  this.queries.myQuery.subscribe('qualify', (entity) => {
    // Called when an entity newly matches the query
  });

  this.queries.myQuery.subscribe('disqualify', (entity) => {
    // Called when an entity stops matching the query
  });
}

```

--------------------------------

### Implement Particle Effects with Instanced Meshes

Source: https://developers.meta.com/horizon/documentation/web/iwsdk-concept-three-basics-meshes-geometry-materials

Demonstrates creating efficient particle effects using InstancedMesh from @iwsdk/core. The example creates 1000 small yellow spheres with randomized positions using matrix transformations. Instanced rendering significantly improves performance compared to individual mesh objects for particle systems.

```javascript
// Use instanced meshes for particles
import { InstancedMesh } from '@iwsdk/core';

const particleGeometry = new SphereGeometry(0.01, 8, 4); // Small spheres
const particleMaterial = new MeshBasicMaterial({ color: 0xffff00 });

const particles = new InstancedMesh(particleGeometry, particleMaterial, 1000);

// Update instances in systems
const matrix = new Matrix4();
for (let i = 0; i < 1000; i++) {
  matrix.setPosition(
    Math.random() * 10 - 5,
    Math.random() * 10,
    Math.random() * 10 - 5,
  );
  particles.setMatrixAt(i, matrix);
}
particles.instanceMatrix.needsUpdate = true;
```

--------------------------------

### ECS Query Event Subscription for Setup/Cleanup (JavaScript)

Source: https://developers.meta.com/horizon/documentation/web/iwsdk-concept-ecs-patterns

Shows how to use query events ('qualify' and 'disqualify') to perform one-time setup and cleanup tasks for entities that match specific query criteria. This is useful for managing expensive initializations.

```javascript
this.queries.panels.subscribe('qualify', (e) => {
  /* load UI config, attach */
});
this.queries.panels.subscribe('disqualify', (e) => {
  /* cleanup */
});

```

--------------------------------

### Create UI Panels with Unlit Materials

Source: https://developers.meta.com/horizon/documentation/web/iwsdk-concept-three-basics-meshes-geometry-materials

Shows how to create UI panels in WebXR using unlit MeshBasicMaterial with transparency. The example creates a 30cm x 20cm panel with 90% opacity and marks it as persistent. Unlit materials are recommended for UI elements to ensure consistent appearance regardless of scene lighting.

```javascript
// Use unlit materials for UI elements
const panelMaterial = new MeshBasicMaterial({
  color: 0xffffff,
  transparent: true,
  opacity: 0.9,
});

const panelGeometry = new PlaneGeometry(0.3, 0.2); // 30cm x 20cm
const panel = new Mesh(panelGeometry, panelMaterial);

const panelEntity = world.createTransformEntity(panel, { persistent: true });
```

--------------------------------

### Hierarchical Movement and Rotation Example

Source: https://developers.meta.com/horizon/documentation/web/iwsdk-concept-three-basics-transforms-math

Illustrates a common scenario where child objects (wheels) automatically follow the transformations of their parent (car). It shows how to position children relative to the parent and then manipulate the parent's position and the children's local rotations. Requires 'Mesh', 'Transform', 'Vector3', 'Quaternion', 'speed', 'deltaTime', and 'wheelRadius'.

```javascript
// Create a car with wheels as children
const car = world.createTransformEntity();
const wheel1 = new Mesh(wheelGeometry, wheelMaterial);
const wheel2 = new Mesh(wheelGeometry, wheelMaterial);

car.object3D.add(wheel1);
car.object3D.add(wheel2);

// Position wheels relative to car
wheel1.position.set(-1, -0.5, 1.2);
wheel2.position.set(1, -0.5, 1.2);

// Move car - wheels follow automatically
car.object3D.position.x += speed * deltaTime;

// Rotate wheels in local space
wheel1.rotateX((speed * deltaTime) / wheelRadius);
wheel2.rotateX((speed * deltaTime) / wheelRadius);
```

--------------------------------

### Automated Deployment with GitHub Actions

Source: https://developers.meta.com/horizon/documentation/web/iwsdk-guide-build-deploy

Set up a GitHub Actions workflow to automatically deploy your project to GitHub Pages on every push to the `main` branch. This workflow handles checking out the code, setting up Node.js, installing dependencies, building the project, and deploying to GitHub Pages.

```yaml
name: Deploy to GitHub Pages

on:
  push:
    branches: [main]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'

      - name: Install dependencies
        run: npm install

      - name: Build
        run: npm run build

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v4
        if: github.ref == 'refs/heads/main'
        with:
          github_token: $ 
          publish_dir: ./dist
```

--------------------------------

### Implement Level of Detail (LOD) System

Source: https://developers.meta.com/horizon/documentation/web/iwsdk-concept-three-basics-meshes-geometry-materials

Shows how to create LOD meshes with varying geometric complexity based on distance from camera. The example uses @iwsdk/core LOD class to manage three detail levels (high, medium, low) at different distance ranges. This optimization technique significantly reduces draw calls and improves performance in complex scenes.

```javascript
import { LOD } from '@iwsdk/core';

const lod = new LOD();

// High detail (close)
const highMesh = new Mesh(
  new SphereGeometry(1, 32, 16),
  new MeshStandardMaterial({ color: 0x00ff00 }),
);

// Medium detail
const medMesh = new Mesh(
  new SphereGeometry(1, 16, 8),
  new MeshStandardMaterial({ color: 0x00ff00 }),
);

// Low detail (far)
const lowMesh = new Mesh(
  new SphereGeometry(1, 8, 4),
  new MeshStandardMaterial({ color: 0x00ff00 }),
);

lod.addLevel(highMesh, 0); // 0-10 meters
lod.addLevel(medMesh, 10); // 10-50 meters
lod.addLevel(lowMesh, 50); // 50+ meters

const entity = world.createTransformEntity(lod);
```

--------------------------------

### PhysicsBody: Motion State Examples

Source: https://developers.meta.com/horizon/documentation/web/iwsdk-guide-physics

Demonstrates the application of different motion states for PhysicsBody components. Includes examples for static (immovable), dynamic (responsive to forces), and kinematic (programmatically controlled) objects.

```javascript
// Static floor
floorEntity.addComponent(PhysicsBody, { state: PhysicsState.Static });

// Dynamic ball that falls and bounces
ballEntity.addComponent(PhysicsBody, { state: PhysicsState.Dynamic });

// Kinematic elevator platform
elevatorEntity.addComponent(PhysicsBody, { state: PhysicsState.Kinematic });
```

--------------------------------

### Initialize Bubblewrap Project for Meta Horizon

Source: https://developers.meta.com/horizon/documentation/web/pwa-packaging

Creates a new project directory and initializes a Bubblewrap project using a provided Web App Manifest URL. The `--metaquest` flag is used for Meta Horizon compatibility. An in-console wizard will guide through further configuration.

```bash
mkdir my-pwa && cd my-pwa
bubblewrap init --manifest=https://domain.com/manifest.webmanifest --metaquest
```

--------------------------------

### World Creation and Initialization Sequence

Source: https://developers.meta.com/horizon/documentation/web/iwsdk-concept-ecs-lifecycle

Illustrates the step-by-step process when `World.create()` is called, including component registration, Three.js object creation, XR setup, and the render loop initialization. Explains how XR sessions are offered and how asset preloading and level loading occur.

```javascript
World.create(container, options)
// 1. Constructs World instance, registers core components/systems.
// 2. Creates Three.js objects; enables WebXR.
// 3. Wraps Scene in entity, initializes activeLevel entity.
// 4. Sets up default lighting.
// 5. Creates XRInputManager, wires player and input.
// 6. Registers core feature systems.
// 7. Initializes AssetManager.
// 8. Starts render loop (renderer.setAnimationLoop).
// 9. Offers XR session if options.xr.offer is 'once' or 'always'.
// 10. Preloads assets and requests initial level load.
```

--------------------------------

### Access Local Server on Headset via IP

Source: https://developers.meta.com/horizon/documentation/web/webxr-first-steps

This example shows how to access the local development server from an XR headset. It displays the typical output from a webpack-dev-server indicating the network URL, which includes the local IP address and port. Users can then enter this URL into the headset's browser.

```text
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] On Your Network (IPv4): https://192.168.0.123:8081/
```

--------------------------------

### Creating and Defining Queries for a System (JavaScript)

Source: https://developers.meta.com/horizon/documentation/web/iwsdk-guide-custom-systems

Shows how to define queries within a system using the `createSystem` factory function. The `RobotSystem` example defines two queries: `robot` which requires only the `Robot` component, and `robotClicked` which requires both `Robot` and `Pressed` components. These queries enable the system to efficiently access specific sets of entities.

```javascript
export class RobotSystem extends createSystem({
  robot: { required: [Robot] }, // All robot entities
  robotClicked: { required: [Robot, Pressed] }, // Only clicked robots
}) {
  // ... system implementation ...
}

```

--------------------------------

### Config Signal Subscription Example

Source: https://developers.meta.com/horizon/documentation/web/iwsdk-concept-ecs-systems

Shows how to subscribe to changes in a configuration signal and how to unsubscribe from these changes when they are no longer needed.

```typescript
const unsubscribe = this.config.intensity.subscribe((v) => console.log(v));
// later
unsubscribe();
```

--------------------------------

### Register Custom System in IWSDK Main Index

Source: https://developers.meta.com/horizon/documentation/web/iwsdk-guide-spatial-editor

Import and register a custom system (SpinSystem) in the main entry point after World creation. This example demonstrates the initialization pattern for adding custom behavior systems to the IWSDK world instance.

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

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

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

--------------------------------

### Three.js MeshBasicMaterial Examples

Source: https://developers.meta.com/horizon/documentation/web/iwsdk-guide-working-in-3d

Demonstrates creating MeshBasicMaterial for simple, unlit colors. This material does not respond to lighting in the scene.

```javascript
import { MeshBasicMaterial } from 'three';

// Flat colors that don't respond to lighting
new MeshBasicMaterial({ color: 0xff0000 });
new MeshBasicMaterial({ color: 'red' });
new MeshBasicMaterial({ color: '#ff0000' });
```

--------------------------------

### Create System with Queries in WebXR with IWSDK

Source: https://developers.meta.com/horizon/documentation/web/iwsdk-guide-custom-systems

Illustrates the creation of a system in WebXR using IWSDK. Systems contain logic that operates on entities matching specific queries, which can include required components, excluded components, or value predicates. This example defines 'myQuery', 'specialQuery', and 'configQuery'.

```javascript
import { createSystem, eq, Types } from '@iwsdk/core';

export class MySystem extends createSystem(
  {
    // Regular query - entities with specific components
    myQuery: { required: [ComponentA, ComponentB] },

    // Query with exclusion - has ComponentA but NOT ComponentC
    specialQuery: { required: [ComponentA], excluded: [ComponentC] },

    // Query with value predicate - matches specific component values
    configQuery: {
      required: [PanelUI, PanelDocument],
      where: [eq(PanelUI, 'config', '/ui/welcome.json')],
    },
  },
  {
    // Optional config schema - system-level configuration
    speed: { type: Types.Float32, default: 1.0 },
    enabled: { type: Types.Boolean, default: true },
  },
) {
  // System implementation
}
```