Skip to content

Commit

Permalink
Merge branch 'master' into fix/native-responsetype
Browse files Browse the repository at this point in the history
  • Loading branch information
CodyJasonBennett committed May 6, 2024
2 parents a689a1f + 39fe68b commit bbdb5af
Show file tree
Hide file tree
Showing 39 changed files with 1,255 additions and 565 deletions.
2 changes: 1 addition & 1 deletion .codesandbox/ci.json
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{
"sandboxes": ["/example"],
"node": "14"
"node": "18"
}
6 changes: 3 additions & 3 deletions .github/workflows/test.yml
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,10 @@ jobs:
- name: Checkout repo
uses: actions/checkout@v4

- name: Use Node ${{ matrix.node }}
uses: actions/setup-node@v3
- name: Use Node 20
uses: actions/setup-node@v4
with:
node-version: ${{ matrix.node }}
node-version: 20

- name: Install deps and build (with cache)
uses: bahmutov/npm-install@v1
Expand Down
2 changes: 1 addition & 1 deletion docs/advanced/pitfalls.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ If you must use intervals, use references as well, but keep in mind that this is
```jsx
useEffect(() => {
const interval = setInterval(() => ref.current.position.x += 0.1), 1)
const interval = setInterval(() => ref.current.position.x += 0.1, 1)
return () => clearInterval(interval)
}, [])
```
Expand Down
25 changes: 23 additions & 2 deletions docs/getting-started/examples.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,16 @@ nav: 3

<Grid cols={1}>
<li>
<Codesandbox id="7qytdw" tags={['bruno', 'simon', 'threejs-journey', 'fisheye']} />
<Codesandbox id="6d97z4" tags={['selection', 'tiltshift']} />
</li>
</Grid>
<Grid cols={2}>
<li>
<Codesandbox id="9s2wd9" tags={['border-radius']} />
</li>
<li>
<Codesandbox id="7qytdw" tags={['bruno', 'simon', 'threejs-journey', 'fisheye']} />
</li>
<li>
<Codesandbox id="xy8c8z" tags={['lusion', 'n8ao']} />
</li>
Expand All @@ -32,6 +38,9 @@ nav: 3
</li>
</Grid>
<Grid cols={4}>
<li>
<Codesandbox id="5w35n6" tags={['ssgi', 'rapier']} />
</li>
<li>
<Codesandbox id="gwthnh" tags={['clouds']} />
</li>
Expand All @@ -53,9 +62,18 @@ nav: 3
<li>
<Codesandbox id="drc6qg" tags={['portals']} />
</li>
<li>
<Codesandbox id="hmbn1l" tags={['video', 'cookies', 'caustics']} />
</li>
<li>
<Codesandbox id="dq6wwe" tags={['glass', 'transmission', 'bloom']} />
</li>
<li>
<Codesandbox id="dc5fjy" tags={['cards', 'image']} />
</li>
<li>
<Codesandbox id="3ywzzx" tags={['refraction']} />
</li>
<li>
<Codesandbox id="lx2h8" tags={['reflections', 'annotations']} />
</li>
Expand Down Expand Up @@ -338,7 +356,7 @@ nav: 3
<Codesandbox id="2yqpv" />
</li>
<li>
<Codesandbox id="0mgum" />
<Codesandbox id="ptdgrn" />
</li>
<li>
<Codesandbox id="66cd7" />
Expand All @@ -351,6 +369,9 @@ nav: 3
<li>
<Codesandbox id="rrppl0y8l4" />
</li>
<li>
<Codesandbox id="yup2o" />
</li>
<li>
<Codesandbox id="0z8i2c" />
</li>
Expand Down
15 changes: 9 additions & 6 deletions docs/getting-started/introduction.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -80,8 +80,9 @@ function Box(props) {

createRoot(document.getElementById('root')).render(
<Canvas>
<ambientLight />
<pointLight position={[10, 10, 10]} />
<ambientLight intensity={Math.PI / 2} />
<spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} />
<pointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} />
<Box position={[-1.2, 0, 0]} />
<Box position={[1.2, 0, 0]} />
</Canvas>,
Expand Down Expand Up @@ -122,8 +123,9 @@ function Box(props: ThreeElements['mesh']) {

createRoot(document.getElementById('root')).render(
<Canvas>
<ambientLight />
<pointLight position={[10, 10, 10]} />
<ambientLight intensity={Math.PI / 2} />
<spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} />
<pointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} />
<Box position={[-1.2, 0, 0]} />
<Box position={[1.2, 0, 0]} />
</Canvas>,
Expand Down Expand Up @@ -165,8 +167,9 @@ function Box(props) {
export default function App() {
return (
<Canvas>
<ambientLight />
<pointLight position={[10, 10, 10]} />
<ambientLight intensity={Math.PI / 2} />
<spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} />
<pointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} />
<Box position={[-1.2, 0, 0]} />
<Box position={[1.2, 0, 0]} />
</Canvas>
Expand Down
28 changes: 14 additions & 14 deletions example/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,27 +7,27 @@
"serve": "vite preview"
},
"dependencies": {
"@react-spring/core": "^9.6.1",
"@react-spring/three": "^9.6.1",
"@react-three/drei": "^9.74.7",
"@react-spring/core": "^9.7.3",
"@react-spring/three": "^9.7.3",
"@react-three/drei": "^9.93.0",
"@use-gesture/react": "latest",
"@vitejs/plugin-react": "^3.1.0",
"@vitejs/plugin-react": "^4.2.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-merge-refs": "^2.0.1",
"react-merge-refs": "^2.1.1",
"react-use-refs": "^1.0.1",
"styled-components": "^5.3.6",
"three": "^0.149.0",
"three-stdlib": "^2.21.8",
"styled-components": "^6.1.8",
"three": "^0.160.0",
"three-stdlib": "^2.29.1",
"use-error-boundary": "^2.0.6",
"wouter": "^2.10.0",
"zustand": "^4.3.3"
"wouter": "^2.12.1",
"zustand": "^4.4.7"
},
"devDependencies": {
"@types/react": "^18.0.28",
"@types/styled-components": "^5.1.26",
"@types/react": "^18.2.47",
"@types/styled-components": "^5.1.34",
"@vitejs/plugin-react-refresh": "^1.3.6",
"typescript": "^4.9.5",
"vite": "^4.1.1"
"typescript": "^5.3.3",
"vite": "^5.0.11"
}
}
2 changes: 1 addition & 1 deletion example/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ function Demo() {
const { Component } = visibleComponents[compName]

return (
<ErrorBoundary key={compName} fallback={(e: any) => <Error>{e}</Error>}>
<ErrorBoundary key={compName} fallback={(e: any) => <Error>{e.message}</Error>}>
<Component />
</ErrorBoundary>
)
Expand Down
2 changes: 1 addition & 1 deletion example/src/demos/AutoDispose.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ function Switcher() {
export default function App() {
return (
<Canvas orthographic camera={{ zoom: 100 }}>
<ambientLight />
<ambientLight intensity={Math.PI} />
<Switcher />
</Canvas>
)
Expand Down
6 changes: 3 additions & 3 deletions example/src/demos/ContextMenuOverride.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@ export default function App() {
orthographic
camera={{ zoom: 150, fov: 75, position: [0, 0, 25] }}
onPointerMissed={() => console.log('canvas.missed')}>
<ambientLight />
<pointLight position={[10, 10, 10]} />
<ambientLight intensity={Math.PI} />
<pointLight decay={0} position={[10, 10, 10]} />
<mesh
scale={[2, 2, 2]}
position={[1, 0, 0]}
Expand All @@ -19,7 +19,7 @@ export default function App() {
set((value) => !value)
}}
onPointerMissed={() => console.log('mesh.missed')}>
<boxBufferGeometry args={[1, 1, 1]} />
<boxGeometry args={[1, 1, 1]} />
<meshPhysicalMaterial color={state ? 'hotpink' : 'blue'} />
</mesh>
</Canvas>
Expand Down
6 changes: 3 additions & 3 deletions example/src/demos/Gestures.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -46,9 +46,9 @@ function Obj({ scale = 1, z = 0, opacity = 1 }) {
export default function App() {
return (
<Canvas>
<ambientLight intensity={0.5} />
<spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} />
<pointLight position={[-10, -10, -10]} />
<ambientLight intensity={0.5 * Math.PI} />
<spotLight decay={0} position={[10, 10, 10]} angle={0.15} penumbra={1} />
<pointLight decay={0} position={[-10, -10, -10]} />
<Obj z={-1} scale={0.5} />
<Obj opacity={0.8} />
</Canvas>
Expand Down
2 changes: 1 addition & 1 deletion example/src/demos/Gltf.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ function Test() {
export default function App() {
return (
<Canvas>
<ambientLight />
<ambientLight intensity={Math.PI} />
<Suspense fallback={null}>
<Test />
</Suspense>
Expand Down
6 changes: 3 additions & 3 deletions example/src/demos/MultiView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -149,9 +149,9 @@ const App = () => (
function Scene({ children, controls = true, preset }: any) {
return (
<Bounds fit clip observe>
<ambientLight intensity={1} />
<pointLight position={[20, 30, 10]} />
<pointLight position={[-10, -10, -10]} color="blue" />
<ambientLight intensity={Math.PI} />
<pointLight decay={0} position={[20, 30, 10]} />
<pointLight decay={0} position={[-10, -10, -10]} color="blue" />
<Soda scale={3} position={[-1, -0.75, 1]} />
<Soda scale={3} position={[1, -0.75, 1]} />
<Soda scale={3} position={[0, -0.75, 0]} />
Expand Down
6 changes: 3 additions & 3 deletions example/src/demos/Portals.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@ export function Lights() {
return (
<>
<color attach="background" args={['#f0f0f0']} />
<ambientLight intensity={1} />
<pointLight position={[20, 30, 10]} />
<pointLight position={[-10, -10, -10]} color="blue" />
<ambientLight intensity={Math.PI} />
<pointLight decay={0} position={[20, 30, 10]} />
<pointLight decay={0} position={[-10, -10, -10]} color="blue" />
</>
)
}
Expand Down
6 changes: 3 additions & 3 deletions example/src/demos/ResetProps.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -50,9 +50,9 @@ function Scene() {

return (
<>
<ambientLight intensity={0.5} />
<pointLight position={[10, 10, 10]} intensity={2} />
<pointLight position={[-10, -10, -10]} color="red" intensity={4} />
<ambientLight intensity={0.5 * Math.PI} />
<pointLight decay={0} position={[10, 10, 10]} intensity={2} />
<pointLight decay={0} position={[-10, -10, -10]} color="red" intensity={4} />

<mesh
scale={hovered ? 1.25 : 1}
Expand Down
4 changes: 2 additions & 2 deletions example/src/demos/StopPropagation.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -57,8 +57,8 @@ function Plane({ stop = false, color, position }: any) {
const App = () => (
<Canvas camera={{ fov: 75, position: [0, 0, -2.25] }}>
<Suspense fallback={null}>
<ambientLight />
<pointLight position={[10, 10, 10]} />
<ambientLight intensity={Math.PI} />
<pointLight decay={0} position={[10, 10, 10]} />
<Plane color="lightblue" position={[0.5, 0, -1]} />
<Plane stop color="aquamarine" position={[0, 0, -0.5]} />
<Plane color="hotpink" position={[-0.5, 0, 0]} />
Expand Down
4 changes: 2 additions & 2 deletions example/src/demos/SuspenseAndErrors.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,8 @@ export default function App() {
}, [])
return (
<Canvas orthographic camera={{ position: [10, 10, 10], zoom: 100 }}>
<ambientLight />
<pointLight position={[10, 10, 5]} intensity={2} />
<ambientLight intensity={Math.PI} />
<pointLight decay={0} position={[10, 10, 5]} intensity={2} />
<mesh>
<boxGeometry />
<meshStandardMaterial color="orange" />
Expand Down
2 changes: 1 addition & 1 deletion example/src/demos/SuspenseMaterial.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ export default function App() {
const [arg, inc] = useReducer((x) => x + 1, 0)
return (
<Canvas>
<ambientLight />
<ambientLight intensity={Math.PI} />
<directionalLight />
<mesh onClick={inc}>
<sphereGeometry args={[1, 64, 32]} />
Expand Down
55 changes: 33 additions & 22 deletions example/src/demos/Test.tsx
Original file line number Diff line number Diff line change
@@ -1,35 +1,46 @@
import * as THREE from 'three'
import React, { useState, useEffect, useReducer } from 'react'
import * as React from 'react'
import { Canvas, useFrame } from '@react-three/fiber'
import { OrbitControls, Hud } from '@react-three/drei'

function Test() {
const [o1] = useState(
() => new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshBasicMaterial({ color: 'hotpink' })),
)
const [o2] = useState(
() => new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshBasicMaterial({ color: 'aquamarine' })),
function Box({ color = 'orange', ...props }) {
const ref = React.useRef<THREE.Mesh>(null!)
const [hovered, hover] = React.useState(false)
const [clicked, click] = React.useState(false)
useFrame((state, delta) => (ref.current.rotation.x += delta))
return (
<mesh
{...props}
ref={ref}
scale={clicked ? 1.5 : 1}
onClick={() => click(!clicked)}
onPointerOver={(event) => (event.stopPropagation(), hover(true))}
onPointerOut={() => hover(false)}>
<boxGeometry />
<meshStandardMaterial color={hovered ? 'hotpink' : color} />
</mesh>
)
const [which, toggle] = useReducer((state) => !state, true)
useEffect(() => {
const interval = setInterval(toggle, 1000)
return () => clearInterval(interval)
}, [])

useFrame((state) => {
//console.log(state.pointer.x)
})

return <primitive object={which ? o1 : o2} />
}

export default function App() {
const [foo, bar] = useState(0)
useEffect(() => {
setTimeout(() => bar(1), 1000)
const [visible, set] = React.useState(true)
React.useEffect(() => {
setTimeout(() => set(false), 2000)
setTimeout(() => set(true), 4000)
}, [])
return (
<Canvas>
<Test />
<ambientLight intensity={Math.PI / 2} />
<spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} />
<pointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} />
<Box position={[-1.2, 0, 0]} />
<Hud>
<ambientLight intensity={Math.PI / 2} />
<spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} />
<pointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} />
{visible && <Box color="skyblue" position={[1.2, 0, 0]} />}
</Hud>
<OrbitControls />
</Canvas>
)
}
6 changes: 3 additions & 3 deletions example/src/demos/ViewTracking.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -238,9 +238,9 @@ export default function App() {
function Scene() {
return (
<>
<ambientLight intensity={1} />
<pointLight position={[20, 30, 10]} intensity={1} />
<pointLight position={[-10, -10, -10]} color="blue" />
<ambientLight intensity={Math.PI} />
<pointLight decay={0} position={[20, 30, 10]} intensity={1} />
<pointLight decay={0} position={[-10, -10, -10]} color="blue" />
<Environment preset="dawn" />
</>
)
Expand Down
4 changes: 2 additions & 2 deletions example/src/demos/Viewcube.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -49,8 +49,8 @@ function Viewcube() {
))}
<boxGeometry args={[80, 80, 80]} />
</mesh>
<ambientLight intensity={0.5} />
<pointLight position={[10, 10, 10]} intensity={0.5} />
<ambientLight intensity={0.5 * Math.PI} />
<pointLight decay={0} position={[10, 10, 10]} intensity={0.5} />
</group>,
scene,
{ camera, events: { priority: events.priority + 1 } },
Expand Down
Loading

0 comments on commit bbdb5af

Please sign in to comment.