Sandcastle

A friendly framework for creating spatial-first, multi-user WebXR apps

Features

• Built on vanilla Three.js

• Made for WebXR (ergonomic XR session & state management & easy XR input event handling)

• Built-in Physics & Collision Detection courtesy of CannonJS

• Easy, WebRTC-based networking & media streaming courtesy of ThreeNetwork

• Designed for XR Packages and shared WebXR experiences/multiapps

• Tiny project build sizes (~250kb gzipped before assets, way less than the image above!)

---

Usage

Run npm init sandcastle NAMEOFPROJECT OR npx create-sandcastle NAMEOFPROJECT, where NAMEOFPROJECT is your desired project name.

This will automatically:

1. clone this repo into a new folder of that name
2. install Sandcastle's dependencies
3. remove the .git repo
4. launch the dev server and
5. open the default scene (located at ./src/examples/defaultScene.js) in your browser.

---

Development & Building

• npm start will launch the dev server and open the sample scene.

• npm run build will process and build your project into a dist folder.

• npm run build-xrpk will npm build, then create an XR Package in dist. (Note that this script runs an interactive CLI for details about the various aspects of your XR Package.)

• npm run dev-xrpk will do the same but output an unminified, source-mapped XR Package to help you debug your XR Package in your runtime of choice (we recommend Chimera). Please note the resulting .wbn file size will be very large - don't use this in production!

---

Learning Resources

• Check out the Wiki for a closer look at Sandcastle's Networking API, Physics API, event handling and state management, asset pipelines and more.

• See the examples folder for usage examples of networking, media streaming, physics, AR-in-VR experiences and more.

This project is in pre-alpha and currently undergoes daily work. Is something broken or unclear? Please file an issue!