diff --git a/.github/workflows/test-multiple-versions.yml b/.github/workflows/test-multiple-versions.yml
index 99ff0c85ed..afdc7363eb 100644
--- a/.github/workflows/test-multiple-versions.yml
+++ b/.github/workflows/test-multiple-versions.yml
@@ -32,8 +32,8 @@ jobs:
- 18.2.0
- 18.3.1
- 19.0.0-rc.0
- - 19.0.0-rc-b57d2823-20240822
- - 0.0.0-experimental-b57d2823-20240822
+ - 19.0.0-rc-206df66e-20240912
+ - 0.0.0-experimental-206df66e-20240912
steps:
- uses: actions/checkout@v4
- uses: pnpm/action-setup@v4
diff --git a/examples/demo/.prettierrc b/examples/demo/.prettierrc
deleted file mode 100644
index ee6764c57d..0000000000
--- a/examples/demo/.prettierrc
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "semi": false,
- "trailingComma": "all",
- "singleQuote": true,
- "tabWidth": 2,
- "printWidth": 140,
- "jsxBracketSameLine": true
-}
diff --git a/examples/demo/package.json b/examples/demo/package.json
index 8de2168759..f077dc8c2d 100644
--- a/examples/demo/package.json
+++ b/examples/demo/package.json
@@ -9,6 +9,10 @@
"lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
+ "prettier": {
+ "semi": false,
+ "singleQuote": true
+ },
"packageManager": "pnpm@8.15.0",
"dependencies": {
"@react-three/drei": "^9.78.2",
diff --git a/examples/demo/src/components/CodePreview.jsx b/examples/demo/src/components/CodePreview.jsx
index 72a78a8628..ae6650e39e 100644
--- a/examples/demo/src/components/CodePreview.jsx
+++ b/examples/demo/src/components/CodePreview.jsx
@@ -8,7 +8,8 @@ import typescriptCode from '../resources/typescript-code'
const useStore = create((set, get) => ({
lang: 'javascript',
setLang: (lang) => set(() => ({ lang })),
- getCode: () => (get().lang === 'javascript' ? javascriptCode : typescriptCode),
+ getCode: () =>
+ get().lang === 'javascript' ? javascriptCode : typescriptCode,
}))
export default function CodePreview() {
diff --git a/examples/demo/src/components/Details.jsx b/examples/demo/src/components/Details.jsx
index cfd8eb0fa1..845051a4f2 100644
--- a/examples/demo/src/components/Details.jsx
+++ b/examples/demo/src/components/Details.jsx
@@ -6,10 +6,16 @@ export default function Details() {
Github
diff --git a/examples/demo/src/components/Fireflies.jsx b/examples/demo/src/components/Fireflies.jsx
index 101cc5f63c..85848487f1 100644
--- a/examples/demo/src/components/Fireflies.jsx
+++ b/examples/demo/src/components/Fireflies.jsx
@@ -9,11 +9,21 @@ const r = () => Math.max(0.2, Math.random())
function Fatline({ curve, color }) {
const material = useRef()
- useFrame((state, delta) => (material.current.uniforms.dashOffset.value -= delta / 100))
+ useFrame(
+ (state, delta) =>
+ (material.current.uniforms.dashOffset.value -= delta / 100),
+ )
return (
-
+
)
}
@@ -22,10 +32,22 @@ export default function Fireflies({ count, colors, radius = 10 }) {
const lines = useMemo(
() =>
new Array(count).fill().map(() => {
- const pos = new Vector3(Math.sin(0) * radius * r(), Math.cos(0) * radius * r(), 0)
+ const pos = new Vector3(
+ Math.sin(0) * radius * r(),
+ Math.cos(0) * radius * r(),
+ 0,
+ )
const points = new Array(30).fill().map((_, index) => {
const angle = (index / 20) * Math.PI * 2
- return pos.add(new Vector3(Math.sin(angle) * radius * r(), Math.cos(angle) * radius * r(), 0)).clone()
+ return pos
+ .add(
+ new Vector3(
+ Math.sin(angle) * radius * r(),
+ Math.cos(angle) * radius * r(),
+ 0,
+ ),
+ )
+ .clone()
})
const curve = new CatmullRomCurve3(points).getPoints(100)
return {
diff --git a/examples/demo/src/components/Scene.jsx b/examples/demo/src/components/Scene.jsx
index 0b5cb9a304..0a6e861eae 100644
--- a/examples/demo/src/components/Scene.jsx
+++ b/examples/demo/src/components/Scene.jsx
@@ -2,7 +2,11 @@ import { Mesh, PlaneGeometry, Group, Vector3, MathUtils } from 'three'
import { memo, useRef, useState, useLayoutEffect } from 'react'
import { createRoot, events, extend, useFrame } from '@react-three/fiber'
import { Plane, useAspect, useTexture } from '@react-three/drei'
-import { EffectComposer, DepthOfField, Vignette } from '@react-three/postprocessing'
+import {
+ EffectComposer,
+ DepthOfField,
+ Vignette,
+} from '@react-three/postprocessing'
import { MaskFunction } from 'postprocessing'
import Fireflies from './Fireflies'
import bgUrl from '../resources/bg.jpg'
@@ -16,7 +20,14 @@ import '../materials/layerMaterial'
function Experience() {
const scaleN = useAspect(1600, 1000, 1.05)
const scaleW = useAspect(2200, 1000, 1.05)
- const textures = useTexture([bgUrl, starsUrl, groundUrl, bearUrl, leaves1Url, leaves2Url])
+ const textures = useTexture([
+ bgUrl,
+ starsUrl,
+ groundUrl,
+ bearUrl,
+ leaves1Url,
+ leaves2Url,
+ ])
const group = useRef()
const layersRef = useRef([])
const [movement] = useState(() => new Vector3())
@@ -25,34 +36,93 @@ function Experience() {
{ texture: textures[0], x: 0, y: 0, z: 0, factor: 0.005, scale: scaleW },
{ texture: textures[1], x: 0, y: 0, z: 10, factor: 0.005, scale: scaleW },
{ texture: textures[2], x: 0, y: 0, z: 20, scale: scaleW },
- { texture: textures[3], x: 0, y: 0, z: 30, scaleFactor: 0.83, scale: scaleN },
- { texture: textures[4], x: 0, y: 0, z: 40, factor: 0.03, scaleFactor: 1, wiggle: 0.6, scale: scaleW },
- { texture: textures[5], x: -20, y: -20, z: 49, factor: 0.04, scaleFactor: 1.3, wiggle: 1, scale: scaleW },
+ {
+ texture: textures[3],
+ x: 0,
+ y: 0,
+ z: 30,
+ scaleFactor: 0.83,
+ scale: scaleN,
+ },
+ {
+ texture: textures[4],
+ x: 0,
+ y: 0,
+ z: 40,
+ factor: 0.03,
+ scaleFactor: 1,
+ wiggle: 0.6,
+ scale: scaleW,
+ },
+ {
+ texture: textures[5],
+ x: -20,
+ y: -20,
+ z: 49,
+ factor: 0.04,
+ scaleFactor: 1.3,
+ wiggle: 1,
+ scale: scaleW,
+ },
]
useFrame((state, delta) => {
movement.lerp(temp.set(state.pointer.x, state.pointer.y * 0.2, 0), 0.2)
- group.current.position.x = MathUtils.lerp(group.current.position.x, state.pointer.x * 20, 0.05)
- group.current.rotation.x = MathUtils.lerp(group.current.rotation.x, state.pointer.y / 20, 0.05)
- group.current.rotation.y = MathUtils.lerp(group.current.rotation.y, -state.pointer.x / 2, 0.05)
- layersRef.current[4].uniforms.time.value = layersRef.current[5].uniforms.time.value += delta
+ group.current.position.x = MathUtils.lerp(
+ group.current.position.x,
+ state.pointer.x * 20,
+ 0.05,
+ )
+ group.current.rotation.x = MathUtils.lerp(
+ group.current.rotation.x,
+ state.pointer.y / 20,
+ 0.05,
+ )
+ group.current.rotation.y = MathUtils.lerp(
+ group.current.rotation.y,
+ -state.pointer.x / 2,
+ 0.05,
+ )
+ layersRef.current[4].uniforms.time.value =
+ layersRef.current[5].uniforms.time.value += delta
}, 1)
return (
- {layers.map(({ scale, texture, ref, factor = 0, scaleFactor = 1, wiggle = 0, x, y, z }, i) => (
-
- (layersRef.current[i] = el)}
- wiggle={wiggle}
- scale={scaleFactor}
- />
-
- ))}
+ {layers.map(
+ (
+ {
+ scale,
+ texture,
+ ref,
+ factor = 0,
+ scaleFactor = 1,
+ wiggle = 0,
+ x,
+ y,
+ z,
+ },
+ i,
+ ) => (
+
+ (layersRef.current[i] = el)}
+ wiggle={wiggle}
+ scale={scaleFactor}
+ />
+
+ ),
+ )}
)
}
@@ -65,7 +135,13 @@ function Effects() {
})
return (
-
+
)
@@ -95,18 +171,36 @@ function Canvas({ children }) {
state.events.connect(document.getElementById('root'))
state.setEvents({
compute: (event, state) => {
- state.pointer.set((event.clientX / state.size.width) * 2 - 1, -(event.clientY / state.size.height) * 2 + 1)
+ state.pointer.set(
+ (event.clientX / state.size.width) * 2 - 1,
+ -(event.clientY / state.size.height) * 2 + 1,
+ )
state.raycaster.setFromCamera(state.pointer, state.camera)
},
})
},
})
}
- const resize = () => root.current.configure({ width: window.innerWidth, height: window.innerHeight })
+ const resize = () =>
+ root.current.configure({
+ width: window.innerWidth,
+ height: window.innerHeight,
+ })
window.addEventListener('resize', resize)
root.current.render(children)
return () => window.removeEventListener('resize', resize)
}, [children])
- return
+ return (
+
+ )
}
diff --git a/examples/demo/src/components/SnippetLang.jsx b/examples/demo/src/components/SnippetLang.jsx
index 2eb75a9580..5c8d99b4fb 100644
--- a/examples/demo/src/components/SnippetLang.jsx
+++ b/examples/demo/src/components/SnippetLang.jsx
@@ -1,6 +1,10 @@
export default function SnippetLang({ lang, setLang }) {
return (
-