|
1 | | -# XR |
| 1 | +<p align="center"> |
| 2 | + <img src="../../docs/getting-started/logo.svg" width="100" /> |
| 3 | +</p> |
2 | 4 |
|
3 | | -Vanilla threejs version |
| 5 | +<h1 align="center">xr</h1> |
| 6 | +<h3 align="center">Turn any threejs app into an interactive immersive experience.</h3> |
| 7 | +<br/> |
| 8 | + |
| 9 | +<p align="center"> |
| 10 | + <a href="https://npmjs.com/package/@pmndrs/xr" target="_blank"> |
| 11 | + <img src="https://img.shields.io/npm/v/@pmndrs/xr?style=flat&colorA=000000&colorB=000000" alt="NPM" /> |
| 12 | + </a> |
| 13 | + <a href="https://npmjs.com/package/@pmndrs/xr" target="_blank"> |
| 14 | + <img src="https://img.shields.io/npm/dt/@pmndrs/xr.svg?style=flat&colorA=000000&colorB=000000" alt="NPM" /> |
| 15 | + </a> |
| 16 | + <a href="https://twitter.com/pmndrs" target="_blank"> |
| 17 | + <img src="https://img.shields.io/twitter/follow/pmndrs?label=%40pmndrs&style=flat&colorA=000000&colorB=000000&logo=twitter&logoColor=000000" alt="Twitter" /> |
| 18 | + </a> |
| 19 | + <a href="https://discord.gg/ZZjjNvJ" target="_blank"> |
| 20 | + <img src="https://img.shields.io/discord/740090768164651008?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=000000" alt="Discord" /> |
| 21 | + </a> |
| 22 | +</p> |
| 23 | + |
| 24 | +```bash |
| 25 | +npm install three @pmndrs/xr |
| 26 | +``` |
| 27 | + |
| 28 | +## What does it look like? |
| 29 | + |
| 30 | +| A simple scene with a mesh that toggles its material color between `"red"` and `"blue"` when clicked through touching or pointing. |  | |
| 31 | +| ---------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- | |
| 32 | + |
| 33 | +```tsx |
| 34 | +import { createXRStore } from '@pmndrs/xr' |
| 35 | +import { BoxGeometry, Mesh, MeshBasicMaterial, PerspectiveCamera, Scene, WebGLRenderer } from 'three' |
| 36 | +import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js' |
| 37 | + |
| 38 | +const camera = new PerspectiveCamera(70, 1, 0.01, 100) |
| 39 | +const scene = new Scene() |
| 40 | +const canvas = document.getElementById('root') as HTMLCanvasElement |
| 41 | +const renderer = new WebGLRenderer({ antialias: true, canvas, alpha: true }) |
| 42 | + |
| 43 | +const boxMaterial = new MeshBasicMaterial({ color: 'red' }) |
| 44 | +const box = new Mesh(new BoxGeometry(), boxMaterial) |
| 45 | +box.pointerEventsType = { deny: 'grab' } |
| 46 | +let red = false |
| 47 | +box.addEventListener('click', () => { |
| 48 | + red = !red |
| 49 | + boxMaterial.color.set(red ? 'red' : 'blue') |
| 50 | +}) |
| 51 | +scene.add(box) |
4 | 52 |
|
5 | | -```ts |
6 | 53 | const store = createXRStore(canvas, scene, camera, renderer.xr) |
| 54 | +document.getElementById('enter-ar')?.addEventListener('click', () => store.enterAR()) |
| 55 | + |
| 56 | +let prevTime: undefined | number |
| 57 | + |
| 58 | +renderer.setAnimationLoop((time, frame) => { |
| 59 | + const delta = prevTime == null ? 0 : time - prevTime |
| 60 | + prevTime = time |
| 61 | + store.update(frame, delta) |
| 62 | + renderer.render(scene, camera) |
| 63 | +}) |
| 64 | + |
| 65 | +function updateSize() { |
| 66 | + renderer.setSize(window.innerWidth, window.innerHeight) |
| 67 | + renderer.setPixelRatio(window.devicePixelRatio) |
| 68 | + camera.aspect = window.innerWidth / window.innerHeight |
| 69 | + camera.updateProjectionMatrix() |
| 70 | +} |
7 | 71 |
|
8 | | -const btn = document.getElementById('enter-ar') |
9 | | -btn.addEventListener('click', () => store.enterAR()) |
| 72 | +updateSize() |
| 73 | +window.addEventListener('resize', updateSize) |
10 | 74 | ``` |
| 75 | + |
| 76 | +### How to enable XR for your threejs app? |
| 77 | + |
| 78 | +1. `const store = createXRStore(canvas, scene, camera, renderer.xr)` create a xr store |
| 79 | +2. `store.enterAR()` call enter AR when clicking on a button |
| 80 | + |
| 81 | +## Tutorials |
| 82 | + |
| 83 | +_The following tutorials contain code for react-three/fiber but all informations are also applicable for @pmndrs/xr._ |
| 84 | + |
| 85 | +- 👌 [Interactions](https://docs.pmnd.rs/xr/tutorials/interactions) |
| 86 | +- 🔧 [Options](https://docs.pmnd.rs/xr/tutorials/options) |
| 87 | +- 🧊 [Object Detection](https://docs.pmnd.rs/xr/tutorials/object-detection) |
| 88 | +- ✴ [Origin](https://docs.pmnd.rs/xr/tutorials/origin) |
| 89 | +- 🪄 [Teleport](https://docs.pmnd.rs/xr/tutorials/teleport) |
| 90 | +- 🕹️ [Gamepad](https://docs.pmnd.rs/xr/tutorials/gamepad) |
| 91 | +- 🎮 [Custom Controller/Hands/...](https://docs.pmnd.rs/xr/tutorials/custom-inputs) |
| 92 | +- ⛨ [Guards](https://docs.pmnd.rs/xr/tutorials/guards) |
| 93 | + |
| 94 | +## Roadmap |
| 95 | + |
| 96 | +- 🤳 XR Gestures |
| 97 | +- ➕ Multimodal |
| 98 | +- ⚓️ Anchors |
| 99 | +- 📺 Layers |
| 100 | +- 📱 Dom Overlays |
| 101 | +- 🕺 Tracked Body |
| 102 | +- 🎯 Hit Test |
| 103 | +- ↕ pmndrs/controls |
| 104 | + |
| 105 | +## Sponsors |
| 106 | + |
| 107 | +This project is supported by a few companies and individuals building cutting-edge 3D Web & XR experiences. Check them out! |
| 108 | + |
| 109 | + |
0 commit comments