From e73018c2a3ca659a83cbcb66451e96ffc78de218 Mon Sep 17 00:00:00 2001 From: Bela Bohlender Date: Tue, 16 Jul 2024 10:56:19 +0200 Subject: [PATCH] prepare deploy --- .github/workflows/packages.yml | 48 +++++++++--- packages/pointer-events/package.json | 15 ++++ packages/react/xr/package.json | 19 ++++- packages/xr/README.md | 109 +++++++++++++++++++++++++-- packages/xr/package.json | 16 +++- 5 files changed, 189 insertions(+), 18 deletions(-) diff --git a/.github/workflows/packages.yml b/.github/workflows/packages.yml index fc33e14..1362dff 100644 --- a/.github/workflows/packages.yml +++ b/.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,39 @@ 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 }}" + + - id: check-pointer-events + uses: PostHog/check-package-version@v2 + with: + path: ./packages/pointer-events/ + + - name: Deploy pointer events Package + if: steps.check-pointer-events.outputs.is-new-version == 'true' + working-directory: ./packages/pointer-events + run: pnpm publish --access public --no-git-checks --tag latest + - id: check-xr-vanilla + uses: PostHog/check-package-version@v2 + with: + path: ./packages/xr/ + + - name: Deploy XR Vanilla Package + if: steps.check-xr-vanilla.outputs.is-new-version == 'true' + working-directory: ./packages/xr + run: pnpm publish --access public --no-git-checks --tag latest + + - id: check-xr-react + uses: PostHog/check-package-version@v2 + with: + path: ./packages/react/xr/ - - - + - name: Deploy XR React Package + if: steps.check-xr-react.outputs.is-new-version == 'true' + working-directory: ./packages/react/xr + run: pnpm publish --access public --no-git-checks --tag latest diff --git a/packages/pointer-events/package.json b/packages/pointer-events/package.json index 8e4d132..368caa5 100644 --- a/packages/pointer-events/package.json +++ b/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": "git@github.com:pmndrs/xr.git" + }, "files": [ "dist" ], diff --git a/packages/react/xr/package.json b/packages/react/xr/package.json index 7f01311..cbe29aa 100644 --- a/packages/react/xr/package.json +++ b/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": "git@github.com:pmndrs/xr.git" + }, "files": [ "dist" ], diff --git a/packages/xr/README.md b/packages/xr/README.md index 640d472..bd7501b 100644 --- a/packages/xr/README.md +++ b/packages/xr/README.md @@ -1,10 +1,109 @@ -# XR +

+ +

-Vanilla threejs version +

xr

+

Turn any threejs app into an interactive immersive experience.

+
+ +

+ + NPM + + + NPM + + + Twitter + + + Discord + +

+ +```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) diff --git a/packages/xr/package.json b/packages/xr/package.json index 96f407d..c7fe186 100644 --- a/packages/xr/package.json +++ b/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": "git@github.com:pmndrs/xr.git" + }, "license": "SEE LICENSE IN LICENSE", "scripts": { "build": "tsc",