Profile
Back to NewsBack
GitHub Trending 3 min
Reader Mode
facebook/immersive-web-sdk: WebXR made simple. Full-featured framework with interactions, locomotion, and spatial UI. Powered by Three.js.

facebook/immersive-web-sdk: WebXR made simple. Full-featured framework with interactions, locomotion, and spatial UI. Powered by Three.js.

6 hours ago

Immersive Web SDK

npm version npm download language license

Where every webpage can become a world.

The Immersive Web SDK makes building immersive web experiences as approachable as traditional web development. It's a complete collection of frameworks and tools built on Three.js with a high-performance Entity Component System, developer-first workflow with one-command setup and built-in emulation, and production-ready systems for grab interactions, locomotion, spatial audio, physics, and scene understanding.

Same code, two experiences: Run immersively in VR/AR headsets and automatically provide mouse-and-keyboard emulation on desktop browsers. No browser extensions, no special setup—anyone with a laptop can develop for the immersive web.

Getting Started

Create a new project with a single command:

npm create @iwsdk@latest

Or install into an existing project:

npm install @iwsdk/core three@npm:[email protected]

Keep the exact three alias at the application root and override transitive resolutions so the app and IWSDK share one runtime:

{
  "dependencies": {
    "@iwsdk/core": "^0.5.3",
    "three": "npm:[email protected]"
  },
  "overrides": {
    "three": "npm:[email protected]"
  },
  "pnpm": {
    "overrides": {
      "three": "npm:[email protected]"
    }
  }
}

Documentation

For guides, concepts, and API reference, visit: https://iwsdk.dev

Packages

| Package | Description | | ---------------------------------------------------- | ------------------------------------------------- | | @iwsdk/core | Core SDK with ECS, systems, and WebXR integration | | @iwsdk/create | CLI for scaffolding new projects | | @iwsdk/locomotor | Locomotion engine for Three.js WebXR | | @iwsdk/xr-input | WebXR input system for Three.js | | @iwsdk/vite-plugin-dev | XR emulation, AI agent tooling, and dev browser |

Development

# Use the pinned Node major, install dependencies, and build workspace packages
nvm use
corepack [email protected] run bootstrap

Build all packages as tgz files (for examples to consume)

npm run build:tgz

Run an example (fresh install from local tgz packages)

cd examples/locomotion && npm run fresh:dev

Lint and format

corepack [email protected] run lint corepack [email protected] run format

Build a specific package

corepack [email protected] --filter @iwsdk/core build

bootstrap is also the repair command for a partial or stale source build. It uses the lockfile, builds packages in dependency order, and generates WebXR input profiles from the pinned npm asset package instead of making a separate CDN request. Run corepack [email protected] run doctor for environment, proxy, and generated-output checks.

For a network-restricted checkout whose pnpm store is already warm, use corepack [email protected] run bootstrap:offline. Initial dependency installation still needs registry access (and honors standard npm/pnpm proxy configuration), but subsequent profile generation and builds are offline-safe. A directory-linked @iwsdk/cli now keeps a stable launcher; if its dist is missing, it prints the exact package build command instead of leaving a broken executable link.

Development Workflow

The examples use file: dependencies pointing to .tgz files built from local packages. This simulates how end-users will consume the packages from npm.

  1. npm run build:tgz - Builds all packages in dependency order and creates .tgz archives
  2. npm run fresh:dev (in example) - Cleans node_modules, reinstalls from tgz files, and starts dev server
This ensures examples always test against the latest local build.

License

IWSDK is licensed under the MIT License. See the LICENSE file for details.

Contributing

Contributions are welcome! Please review our Contributing Guidelines and Code of Conduct before submitting issues or pull requests.

Developer Terms

Chat with me