prepare deploy

.github/workflows/packages.yml

@@ -9,7 +9,7 @@ jobs:
   deploy-packages:
     runs-on: ubuntu-latest
     permissions:
-      contents: write
+      contents: read
     steps:
       - name: Checkout code
         uses: actions/checkout@v3
@@ -29,7 +29,7 @@ jobs:
 
       - uses: gittools/actions/gitversion/setup@v0
         with:
-          versionSpec: "5.x"
+          versionSpec: '5.x'
 
       - name: Install Dependencies
         run: pnpm install
@@ -39,10 +39,10 @@ jobs:
           pnpm -r check:prettier
           pnpm -r check:eslint
 
-#      - name: Test
-#        run: |
-#          pnpm exec playwright install chromium
-#          pnpm -r test
+      #      - name: Test
+      #        run: |
+      #          pnpm exec playwright install chromium
+      #          pnpm -r test
 
       - name: Gitversion
         id: gitversion
@@ -51,13 +51,21 @@ jobs:
       - name: Build
         run: |
           pnpm -F './packages/**/*' build
-      
+
       - name: Set Version
         run: pnpm -F './packages/**/*' exec json -f "package.json" -I -e 'this.version = "${{ steps.gitversion.outputs.fullSemVer }}"'
 
-# TBD: push to npm
+      - name: Set publishing config
+        run: pnpm config set '//registry.npmjs.org/:_authToken' "${{ secrets.NPM_TOKEN }}"
+
+      - name: Deploy pointer events Package
+        working-directory: ./packages/pointer-events
+        run: pnpm publish --force --access public --no-git-checks --tag latest
 
+      - name: Deploy XR Vanilla Package
+        working-directory: ./packages/xr
+        run: pnpm publish --force --access public --no-git-checks --tag latest
 
-
-
-
+      - name: Deploy XR React Package
+        working-directory: ./packages/react/xr
+        run: pnpm publish --force --access public --no-git-checks --tag latest

packages/pointer-events/package.json

@@ -1,8 +1,23 @@
 {
   "name": "@pmndrs/pointer-events",
   "description": "framework agnostic pointer-events implementation for threejs",
+  "license": "SEE LICENSE IN LICENSE",
   "version": "0.0.0",
+  "homepage": "https://github.com/pmndrs/xr",
+  "author": "Bela Bohlender",
   "type": "module",
+  "keywords": [
+    "r3f",
+    "events",
+    "pointer",
+    "three.js",
+    "userinterface",
+    "typescript"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "[email protected]:pmndrs/xr.git"
+  },
   "files": [
     "dist"
   ],

packages/react/xr/package.json

@@ -1,6 +1,23 @@
 {
     "name": "@react-three/xr",
-    "description": "XR for react-three-fiber",
+    "description": "VR/AR for react-three-fiber",
+    "author": "Bela Bohlender",
+    "license": "SEE LICENSE IN LICENSE",
+    "homepage": "https://github.com/pmndrs/xr",
+    "type": "module",
+    "keywords": [
+      "r3f",
+      "xr",
+      "ar",
+      "vr",
+      "three.js",
+      "react",
+      "typescript"
+    ],
+    "repository": {
+      "type": "git",
+      "url": "[email protected]:pmndrs/xr.git"
+    },
     "files": [
         "dist"
     ],

packages/xr/README.md

@@ -1,10 +1,109 @@
-# XR
+<p align="center">
+  <img src="../../docs/getting-started/logo.svg" width="100" />
+</p>
 
-Vanilla threejs version
+<h1 align="center">xr</h1>
+<h3 align="center">Turn any threejs app into an interactive immersive experience.</h3>
+<br/>
+
+<p align="center">
+  <a href="https://npmjs.com/package/@pmndrs/xr" target="_blank">
+    <img src="https://img.shields.io/npm/v/@pmndrs/xr?style=flat&colorA=000000&colorB=000000" alt="NPM" />
+  </a>
+  <a href="https://npmjs.com/package/@pmndrs/xr" target="_blank">
+    <img src="https://img.shields.io/npm/dt/@pmndrs/xr.svg?style=flat&colorA=000000&colorB=000000" alt="NPM" />
+  </a>
+  <a href="https://twitter.com/pmndrs" target="_blank">
+    <img src="https://img.shields.io/twitter/follow/pmndrs?label=%40pmndrs&style=flat&colorA=000000&colorB=000000&logo=twitter&logoColor=000000" alt="Twitter" />
+  </a>
+  <a href="https://discord.gg/ZZjjNvJ" target="_blank">
+    <img src="https://img.shields.io/discord/740090768164651008?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=000000" alt="Discord" />
+  </a>
+</p>
+
+```bash
+npm install three @pmndrs/xr
+```
+
+## What does it look like?
+
+| 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) |
+| ---------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- |
+
+```tsx
+import { createXRStore } from '@pmndrs/xr'
+import { BoxGeometry, Mesh, MeshBasicMaterial, PerspectiveCamera, Scene, WebGLRenderer } from 'three'
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
+
+const camera = new PerspectiveCamera(70, 1, 0.01, 100)
+const scene = new Scene()
+const canvas = document.getElementById('root') as HTMLCanvasElement
+const renderer = new WebGLRenderer({ antialias: true, canvas, alpha: true })
+
+const boxMaterial = new MeshBasicMaterial({ color: 'red' })
+const box = new Mesh(new BoxGeometry(), boxMaterial)
+box.pointerEventsType = { deny: 'grab' }
+let red = false
+box.addEventListener('click', () => {
+  red = !red
+  boxMaterial.color.set(red ? 'red' : 'blue')
+})
+scene.add(box)
 
-```ts
 const store = createXRStore(canvas, scene, camera, renderer.xr)
+document.getElementById('enter-ar')?.addEventListener('click', () => store.enterAR())
+
+let prevTime: undefined | number
+
+renderer.setAnimationLoop((time, frame) => {
+  const delta = prevTime == null ? 0 : time - prevTime
+  prevTime = time
+  store.update(frame, delta)
+  renderer.render(scene, camera)
+})
+
+function updateSize() {
+  renderer.setSize(window.innerWidth, window.innerHeight)
+  renderer.setPixelRatio(window.devicePixelRatio)
+  camera.aspect = window.innerWidth / window.innerHeight
+  camera.updateProjectionMatrix()
+}
 
-const btn = document.getElementById('enter-ar')
-btn.addEventListener('click', () => store.enterAR())
+updateSize()
+window.addEventListener('resize', updateSize)
 ```
+
+### How to enable XR for your threejs app?
+
+1. `const store = createXRStore(canvas, scene, camera, renderer.xr)` create a xr store
+2. `store.enterAR()` call enter AR when clicking on a button
+
+## Tutorials
+
+_The following tutorials contain code for react-three/fiber but all informations are also applicable for @pmndrs/xr._
+
+- 👌 [Interactions](https://docs.pmnd.rs/xr/tutorials/interactions)
+- 🔧 [Options](https://docs.pmnd.rs/xr/tutorials/options)
+- 🧊 [Object Detection](https://docs.pmnd.rs/xr/tutorials/object-detection)
+- ✴ [Origin](https://docs.pmnd.rs/xr/tutorials/origin)
+- 🪄 [Teleport](https://docs.pmnd.rs/xr/tutorials/teleport)
+- 🕹️ [Gamepad](https://docs.pmnd.rs/xr/tutorials/gamepad)
+- 🎮 [Custom Controller/Hands/...](https://docs.pmnd.rs/xr/tutorials/custom-inputs)
+- ⛨ [Guards](https://docs.pmnd.rs/xr/tutorials/guards)
+
+## Roadmap
+
+- 🤳 XR Gestures
+- ➕ Multimodal
+- ⚓️ Anchors
+- 📺 Layers
+- 📱 Dom Overlays
+- 🕺 Tracked Body
+- 🎯 Hit Test
+- ↕ pmndrs/controls
+
+## Sponsors
+
+This project is supported by a few companies and individuals building cutting-edge 3D Web & XR experiences. Check them out!
+
+![Sponsors Overview](https://bbohlender.github.io/sponsors/screenshot.png)

packages/xr/package.json

@@ -2,8 +2,22 @@
   "name": "@pmndrs/xr",
   "author": "Bela Bohlender",
   "type": "module",
-  "description": "",
+  "description": "VR/AR for threejs",
+  "homepage": "https://github.com/pmndrs/xr",
   "version": "0.0.0",
+  "keywords": [
+    "r3f",
+    "xr",
+    "ar",
+    "vr",
+    "three.js",
+    "react",
+    "typescript"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "[email protected]:pmndrs/xr.git"
+  },
   "license": "SEE LICENSE IN LICENSE",
   "scripts": {
     "build": "tsc",