Skip to content

Commit 5aec30f

Browse files
bbohlenderbbohlender
committed
v6 publish
0 parents  commit 5aec30f

File tree

254 files changed

+17541
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

254 files changed

+17541
-0
lines changed

‎.eslintrc

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"root": true,
3+
"parser": "@typescript-eslint/parser",
4+
"env": {
5+
"browser": true,
6+
"node": true,
7+
"es6": true
8+
},
9+
"settings": {
10+
"react": {
11+
"version": "detect"
12+
}
13+
},
14+
"extends": [
15+
"prettier",
16+
"plugin:prettier/recommended",
17+
"plugin:react-hooks/recommended",
18+
"plugin:import/recommended",
19+
"plugin:@react-three/recommended"
20+
],
21+
"plugins": ["@typescript-eslint", "react", "react-hooks", "import", "prettier", "@react-three"],
22+
"rules": {
23+
"import/no-unresolved": "off",
24+
"import/named": "off",
25+
"import/namespace": "off",
26+
"import/no-named-as-default-member": "off",
27+
"import/extensions": ["error", "ignorePackages"]
28+
}
29+
}

‎.gitattributes

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
* text eol=lf
2+
3+
*.png binary
4+
*.jpg binary
5+
*.jpeg binary
6+
*.gif binary
7+
*.ico binary
8+
*.mov binary
9+
*.mp4 binary
10+
*.mp3 binary
11+
*.flv binary
12+
*.fla binary
13+
*.wav binary
14+
*.swf binary
15+
*.gz binary
16+
*.zip binary
17+
*.7z binary
18+
*.ttf binary
19+
*.eot binary
20+
*.woff binary
21+
*.pyc binary
22+
*.pdf binary
23+
*.glb binary
24+
*.gltf binary

‎.github/FUNDING.yml

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
github: bbohlender
2+
polar: bbohlender

‎.github/workflows/packages.yml

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
name: Deploy Packages
2+
3+
on:
4+
push:
5+
tags:
6+
- '*'
7+
8+
jobs:
9+
deploy-packages:
10+
runs-on: ubuntu-latest
11+
permissions:
12+
contents: write
13+
steps:
14+
- name: Checkout code
15+
uses: actions/checkout@v3
16+
with:
17+
fetch-depth: 0
18+
19+
- name: Setup Node
20+
uses: actions/setup-node@v3
21+
with:
22+
node-version: 18
23+
24+
- uses: pnpm/action-setup@v2
25+
name: Install pnpm
26+
with:
27+
version: 8
28+
run_install: false
29+
30+
- uses: gittools/actions/gitversion/setup@v0
31+
with:
32+
versionSpec: "5.x"
33+
34+
- name: Install Dependencies
35+
run: pnpm install
36+
37+
- name: Check
38+
run: |
39+
pnpm -r check:prettier
40+
pnpm -r check:eslint
41+
42+
- name: Test
43+
run: |
44+
pnpm exec playwright install chromium
45+
pnpm -r test
46+
47+
- name: Gitversion
48+
id: gitversion
49+
uses: gittools/actions/gitversion/execute@v0
50+
51+
- name: Build
52+
run: |
53+
pnpm -F './packages/**/*' build
54+
55+
- name: Set Version
56+
run: pnpm -F './packages/**/*' exec json -f "package.json" -I -e 'this.version = "${{ steps.gitversion.outputs.fullSemVer }}"'
57+
58+
# TBD: push to npm
59+
60+
61+
62+
63+

‎.gitignore

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
node_modules
2+
dist
3+
package-lock.json
4+
.DS_Store

‎.prettierrc

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"semi": false,
3+
"trailingComma": "all",
4+
"singleQuote": true,
5+
"tabWidth": 2,
6+
"printWidth": 120,
7+
"endOfLine": "auto"
8+
}

‎CONTRIBUTING.md

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
## Contributing
2+
3+
This project uses [semantic commits](https://conventionalcommits.org) and [semver](https://semver.org).
4+
5+
To get started, make sure you have [Node](https://nodejs.org) and [PNPM](https://pnpm.io/) installed. Install dependencies, generate files, and build the libraries with:
6+
7+
```bash
8+
pnpm i
9+
pnpm -r build
10+
```
11+
12+
### Development
13+
14+
Locally run examples with:
15+
16+
```bash
17+
cd examples/react-three-xr
18+
pnpm dev
19+
```
20+
21+
**Important**
22+
23+
When making a change to the packages, the `vite` cache of the examples needs to be cleared (delete `node_modules/.vite` inside the running example). Rebuilding the libraries is not necassary unless types have changed.

‎GitVersion.yml

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
commit-message-incrementing: Disabled
2+
branches:
3+
main:
4+
increment: None
5+
develop:
6+
tag: beta
7+
increment: None

‎LICENSE

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
Copyright 2024 Bela Bohlender
2+
3+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
4+
5+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
6+
7+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
8+
9+
Copyright 2023 Coconut Capital
10+
11+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
12+
13+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

‎README.md

+95
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
<p align="center">
2+
<img src="./docs/getting-started/logo.svg" width="100" />
3+
</p>
4+
5+
<h1 align="center">xr</h1>
6+
<h3 align="center">Turn any R3F app into an interactive immersive experience.</h3>
7+
<br/>
8+
9+
10+
<p align="center">
11+
<a href="https://npmjs.com/package/@react-three/xr" target="_blank">
12+
<img src="https://img.shields.io/npm/v/@react-three/xr?style=flat&colorA=000000&colorB=000000" alt="NPM" />
13+
</a>
14+
<a href="https://npmjs.com/package/@react-three/xr" target="_blank">
15+
<img src="https://img.shields.io/npm/dt/@react-three/xr.svg?style=flat&colorA=000000&colorB=000000" alt="NPM" />
16+
</a>
17+
<a href="https://twitter.com/pmndrs" target="_blank">
18+
<img src="https://img.shields.io/twitter/follow/pmndrs?label=%40pmndrs&style=flat&colorA=000000&colorB=000000&logo=twitter&logoColor=000000" alt="Twitter" />
19+
</a>
20+
<a href="https://discord.gg/ZZjjNvJ" target="_blank">
21+
<img src="https://img.shields.io/discord/740090768164651008?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=000000" alt="Discord" />
22+
</a>
23+
</p>
24+
25+
```bash
26+
npm install three @react-three/fiber @react-three/xr@latest
27+
```
28+
29+
## What does it look like?
30+
31+
| A simple scene with a mesh that toggles its material color between `"red"` and `"blue"` when clicked through touching or pointing. | ![recording of interacting with the code below](./docs/getting-started/basic-example.gif) |
32+
|-|-|
33+
34+
```tsx
35+
import { Canvas } from '@react-three/fiber'
36+
import { XR, createXRStore } from '@react-three/xr'
37+
import { useState } from 'react'
38+
39+
const store = createXRStore()
40+
41+
export function App() {
42+
const [red, setRed] = useState(false)
43+
return <>
44+
<button onClick={() => store.enterAR()}>Enter AR</button>
45+
<Canvas>
46+
<XR store={store}>
47+
<mesh pointerEventsType={{ deny: 'grab' }} onClick={() => setRed(!red)} position={[0, 1, -1]}>
48+
<boxGeometry />
49+
<meshBasicMaterial color={red ? 'red' : 'blue'} />
50+
</mesh>
51+
</XR>
52+
</Canvas>
53+
</>
54+
}
55+
```
56+
57+
### How to enable XR for your @react-three/fiber app?
58+
59+
1. `const store = createXRStore()` create a xr store
60+
2. `store.enterAR()` call enter AR when clicking on a button
61+
3. `<XR>...</XR>` wrap your content with the XR component
62+
63+
... or read this guide for [converting a react-three/fiber app to XR](https://docs.pmnd.rs/xr/getting-started/convert-to-xr).
64+
65+
## Tutorials
66+
67+
- 👌 [Interactions](https://docs.pmnd.rs/xr/tutorials/interactions)
68+
- 🔧 [Options](https://docs.pmnd.rs/xr/tutorials/options)
69+
- 🧊 [Object Detection](https://docs.pmnd.rs/xr/tutorials/object-detection)
70+
- ✴ [Origin](https://docs.pmnd.rs/xr/tutorials/origin)
71+
- 🪄 [Teleport](https://docs.pmnd.rs/xr/tutorials/teleport)
72+
- 🕹️ [Gamepad](https://docs.pmnd.rs/xr/tutorials/gamepad)
73+
- 🎮 [Custom Controller/Hands/...](https://docs.pmnd.rs/xr/tutorials/custom-inputs)
74+
- ⛨ [Guards](https://docs.pmnd.rs/xr/tutorials/guards)
75+
76+
## Roadmap
77+
78+
- 🤳 XR Gestures
79+
- ⚓️ Anchors
80+
- 📺 Layers
81+
- 📱 Dom Overlays
82+
- 🕺 Tracked Body
83+
- 🎯 Hit Test
84+
- ↕ react-three/controls
85+
86+
## Migration guides
87+
88+
- from [@react-three/xr v5](https://docs.pmnd.rs/xr/migration/from-react-three-xr-5)
89+
- from [natuerlich](https://docs.pmnd.rs/xr/migration/from-natuerlich)
90+
91+
## Sponsors
92+
93+
This project is supported by a few companies and individuals building cutting-edge 3D Web & XR experiences. Check them out!
94+
95+
![Sponsors Overview](https://bbohlender.github.io/sponsors/screenshot.png)

‎docs/advanced/performance.md

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
---
2+
title: Performance
3+
description: Important considerations for building performant immersive web applications with react-three/xr
4+
nav: 15
5+
---
6+
7+
All performance optimizations for non-immersive 3D web applications are also applicable for immersive XR web applications. Relevant guides on the topic of performance for 3D web applications are the [R3F performance guide](https://docs.pmnd.rs/react-three-fiber/advanced/scaling-performance), [R3F performance pitfalls](https://docs.pmnd.rs/react-three-fiber/advanced/pitfalls), and the [Threejs tips and tricks](https://discoverthreejs.com/tips-and-tricks/#performance). In general, it is good to check if your web application's performance is GPU- or CPU-bound to select the correct optimization techniques.
8+
9+
When it comes to immersive XR web applications, there are a few other options to improve GPU performance. We also recommend taking a look at this [WebXR Performance Optimization guide](https://developer.oculus.com/documentation/web/webxr-perf/).
10+
11+
## Frame Buffer Scaling
12+
13+
The frame buffer scaling factor allows to control the size of the frame buffer your web application draws to. Decreasing this number can improve performance but reduces the resolution. A frame buffer scaling factor of 1.0 sets the frame buffer resolution to the native display resolution.
14+
15+
## Foveation
16+
17+
Foveation allows rendering with a lower resolution at the edges of the eye's viewport to improve GPU performance. If your application is optimized and the performance is still GPU bound, consider increasing the foveation to improve performance.

‎docs/advanced/pitfalls.md

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
---
2+
title: Pitfalls
3+
description: Pitfalls to avoid when building immersive web applications with react-three/xr
4+
nav: 14
5+
---
6+
7+
## Changing the camera position in XR
8+
9+
In contrast to non-immersive 3D applications, the camera transformation in MR/VR/AR applications should never be directly controlled by the developer since the user's head movement must control the camera's transformation. Therefore, pmndrs/xr provides the XROrigin component, which allows to control where the session's origin is placed inside the 3D scene. The session origin is at the users' feet once they recenter their session. This allows to implicitly control the camera position but prevents the user from getting motion sick when their movement is not reflected in the camera's movement.
10+
11+
## Reading the camera position in XR
12+
13+
When using @react-three/xr, the useThree hook will return the XR camera when in XR. Therefore, the returned camera and the `getWorldPosition` function can be used to get the world position of the xr camera, as well as the normal camera, when not in XR.
14+
15+
```tsx
16+
const camera = useThree(state => state.camera)
17+
useFrame(() => camera.getWorldPosition(target))
18+
```

0 commit comments

Comments
 (0)