Skip to content

Commit 5835b68

Browse files
bbohlenderbbohlender
committed
prepare handle alpha release
1 parent e5757da commit 5835b68

File tree

8 files changed

+190
-18
lines changed

8 files changed

+190
-18
lines changed

‎.github/workflows/alpha.yml

+113
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
name: Deploy Beta Packages
2+
3+
on:
4+
push:
5+
branches:
6+
- develop
7+
8+
jobs:
9+
deploy-packages:
10+
runs-on: ubuntu-latest
11+
permissions:
12+
contents: read
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: Copy README
56+
run: cp ./README.md packages/react/xr
57+
58+
- name: Set Version
59+
run: pnpm -F './packages/**/*' exec json -f "package.json" -I -e 'this.version = "${{ steps.gitversion.outputs.fullSemVer }}"'
60+
61+
- name: Set publishing config
62+
run: pnpm config set '//registry.npmjs.org/:_authToken' "${{ secrets.NPM_TOKEN }}"
63+
64+
- id: check-pointer-events
65+
uses: PostHog/check-package-version@v2
66+
with:
67+
path: ./packages/pointer-events/
68+
69+
- name: Deploy pointer events Package
70+
if: steps.check-pointer-events.outputs.is-new-version == 'true'
71+
working-directory: ./packages/pointer-events
72+
run: pnpm publish --access public --no-git-checks --tag alpha
73+
74+
75+
- id: check-handle-vanilla
76+
uses: PostHog/check-package-version@v2
77+
with:
78+
path: ./packages/handle/
79+
80+
- name: Deploy Handle Vanilla Package
81+
if: steps.check-handle-vanilla.outputs.is-new-version == 'true'
82+
working-directory: ./packages/handle
83+
run: pnpm publish --access public --no-git-checks --tag alpha
84+
85+
- id: check-xr-vanilla
86+
uses: PostHog/check-package-version@v2
87+
with:
88+
path: ./packages/xr/
89+
90+
- name: Deploy XR Vanilla Package
91+
if: steps.check-xr-vanilla.outputs.is-new-version == 'true'
92+
working-directory: ./packages/xr
93+
run: pnpm publish --access public --no-git-checks --tag alpha
94+
95+
- id: check-handle-react
96+
uses: PostHog/check-package-version@v2
97+
with:
98+
path: ./packages/react/handle/
99+
100+
- name: Deploy Handle React Package
101+
if: steps.check-handle-react.outputs.is-new-version == 'true'
102+
working-directory: ./packages/react/handle
103+
run: pnpm publish --access public --no-git-checks --tag alpha
104+
105+
- id: check-xr-react
106+
uses: PostHog/check-package-version@v2
107+
with:
108+
path: ./packages/react/xr/
109+
110+
- name: Deploy XR React Package
111+
if: steps.check-xr-react.outputs.is-new-version == 'true'
112+
working-directory: ./packages/react/xr
113+
run: pnpm publish --access public --no-git-checks --tag alpha

‎.github/workflows/packages.yml

+2
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ on:
44
push:
55
tags:
66
- '*'
7+
branches:
8+
- main
79

810
jobs:
911
deploy-packages:

‎GitVersion.yml

-1
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,4 @@ branches:
33
main:
44
increment: None
55
develop:
6-
tag: beta
76
increment: None

‎examples/handle/app.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { createXRStore, noEvents, PointerEvents, XR, XROrigin } from '@react-thr
33
import { Environment } from '@react-three/drei'
44
import { Door } from './door.js'
55
import { Spaceship } from './spaceship.js'
6+
import { OrbitHandles } from '@react-three/handle'
67

78
const store = createXRStore()
89

@@ -13,6 +14,7 @@ export function App() {
1314
<button onClick={() => store.enterAR()}>Enter AR</button>
1415
<Canvas camera={{ position: [1, 1, 1] }} events={noEvents} style={{ width: '100%', flexGrow: 1 }}>
1516
<PointerEvents />
17+
<OrbitHandles />
1618
<XR store={store}>
1719
<Environment preset="city" />
1820
<Door scale={0.01} />

‎examples/handle/door.tsx

+12-16
Original file line numberDiff line numberDiff line change
@@ -41,22 +41,18 @@ export function Door(props: JSX.IntrinsicElements['group']) {
4141
material={materials.Door}
4242
position={[0.852, 0.017, 0.782]}
4343
/>
44-
<Handle
45-
apply={(state, target) => {
46-
target.rotation.z = Math.round(state.current.rotation.z / 0.1) * 0.1
47-
}}
48-
translate="as-rotate"
49-
rotate={{ x: false, y: false, z: [-Math.PI, 0] }}
50-
>
51-
<HandleTarget position={[0.81, 0.043, 0.803]}>
52-
<Handle
53-
stopPropagation={false}
54-
translate={false}
55-
scale={false}
56-
rotate={{ x: false, y: [-Math.PI / 2, 0], z: false }}
57-
>
58-
<mesh geometry={nodes.Circle002_Glossy_0.geometry} material={materials.Glossy} />
59-
</Handle>
44+
<Handle translate="as-rotate" rotate={{ x: false, y: false, z: [-Math.PI, 0] }}>
45+
<HandleTarget>
46+
<group position={[0.81, 0.043, 0.803]}>
47+
<Handle
48+
stopPropagation={false}
49+
translate={false}
50+
scale={false}
51+
rotate={{ x: false, y: [-Math.PI / 2, 0], z: false }}
52+
>
53+
<mesh geometry={nodes.Circle002_Glossy_0.geometry} material={materials.Glossy} />
54+
</Handle>
55+
</group>
6056
</HandleTarget>
6157
</Handle>
6258
</HandleTarget>

‎packages/handle/README.md

+9-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
11
# @pmndrs/handle
22

3-
framework agnostic expandable handle implementation for threejs
3+
framework agnostic handle implementation for threejs
4+
5+
## How to use
6+
7+
```ts
8+
//lets create a handle to translate the object on the x axis (the target and the handle are both the object)
9+
const store = new HandleStore(object, () => ({ scale: false, rotate: false, translate: "x" }))
10+
store.bind(object)
11+
```

‎packages/react/handle/README.md

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<h1 align="center">@react-three/handle</h1>
2+
<h3 align="center">The one to handle them all 👌</h3>
3+
<br/>
4+
5+
<p align="center">
6+
<a href="https://npmjs.com/package/@react-three/handle" target="_blank">
7+
<img src="https://img.shields.io/npm/v/@react-three/handle?style=flat&colorA=000000&colorB=000000" alt="NPM" />
8+
</a>
9+
<a href="https://npmjs.com/package/@react-three/handle" target="_blank">
10+
<img src="https://img.shields.io/npm/dt/@react-three/handle.svg?style=flat&colorA=000000&colorB=000000" alt="NPM" />
11+
</a>
12+
<a href="https://twitter.com/pmndrs" target="_blank">
13+
<img src="https://img.shields.io/twitter/follow/pmndrs?label=%40pmndrs&style=flat&colorA=000000&colorB=000000&logo=twitter&logoColor=000000" alt="Twitter" />
14+
</a>
15+
<a href="https://discord.gg/ZZjjNvJ" target="_blank">
16+
<img src="https://img.shields.io/discord/740090768164651008?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=000000" alt="Discord" />
17+
</a>
18+
</p>
19+
20+
```bash
21+
npm install three @react-three/fiber @react-three/handle@latest @react-three/xr@latest
22+
```
23+
24+
| A example with a handle for controlling the scale rotation and position of a simple red cube by grabbing it with any type of input (mouse, touch, grab, point) in XR and non-XR applications. | ![recording of interacting with the code below](./handle.gif) |
25+
| ---------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- |
26+
27+
```tsx
28+
import { Canvas } from '@react-three/fiber'
29+
import { noEvents, PointerEvents } from '@react-three/xr'
30+
import { Handle } from '@react-three/handle'
31+
32+
export function App() {
33+
return (
34+
<Canvas events={noEvents}>
35+
<PointerEvents />
36+
<Environment preset="city" />
37+
<Handle>
38+
<mesh position-z={-1}>
39+
<boxGeometry />
40+
<meshStandardMaterial color="red" />
41+
</mesh>
42+
</Handle>
43+
</Canvas>
44+
)
45+
}
46+
```
47+
48+
## Sponsors
49+
50+
This project is supported by a few companies and individuals building cutting-edge 3D Web & XR experiences. Check them out!
51+
52+
![Sponsors Overview](https://bbohlender.github.io/sponsors/screenshot.png)

‎packages/react/handle/handle.gif

1.21 MB
Loading

0 commit comments

Comments
 (0)