chore(Storybook): update lighting for r155

pmndrs · Feb 18, 2025 · 5bc49d0 · 5bc49d0
1 parent 77f649d
commit 5bc49d0
Show file tree

Hide file tree

Showing 9 changed files with 24 additions and 17 deletions.
diff --git a/.storybook/Setup.tsx b/.storybook/Setup.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { Vector3 } from 'three'
-import { Canvas, Props as CanvasProps } from '@react-three/fiber'
+import { Canvas, CanvasProps } from '@react-three/fiber'
 
 import { OrbitControls } from '../src'
 
@@ -25,8 +25,8 @@ export const Setup = ({
     {children}
     {lights && (
       <>
-        <ambientLight intensity={0.8} />
-        <pointLight intensity={1} position={[0, 6, 0]} />
+        <ambientLight intensity={0.8 * Math.PI} />
+        <pointLight intensity={1 * Math.PI} position={[0, 6, 0]} />
       </>
     )}
     {controls && <OrbitControls makeDefault />}

diff --git a/.storybook/stories/Adaptive.stories.tsx b/.storybook/stories/Adaptive.stories.tsx
@@ -60,7 +60,7 @@ function AdaptiveScene(props: ComponentProps<typeof AdaptiveDpr>) {
         <Archer />
       </Suspense>
       <directionalLight
-        intensity={0.2}
+        intensity={0.2 * Math.PI}
         position={[10, 10, 5]}
         shadow-mapSize-width={64}
         shadow-mapSize-height={64}

diff --git a/.storybook/stories/HTML.stories.tsx b/.storybook/stories/HTML.stories.tsx
@@ -123,8 +123,8 @@ function HTMLOrthographicScene(props: HtmlProps) {
           <Html {...props}>Orthographic</Html>
         }
       </Icosahedron>
-      <ambientLight intensity={0.8} />
-      <pointLight intensity={1} position={[0, 6, 0]} />
+      <ambientLight intensity={0.8 * Math.PI} />
+      <pointLight intensity={1 * Math.PI} position={[0, 6, 0]} />
     </>
   )
 }
@@ -195,8 +195,8 @@ function HTMLOccluderScene(props: HtmlProps) {
           </Html>
         </Icosahedron>
       </group>
-      <ambientLight intensity={0.8} />
-      <pointLight intensity={1} position={[0, 6, 0]} />
+      <ambientLight intensity={0.8 * Math.PI} />
+      <pointLight intensity={1 * Math.PI} position={[0, 6, 0]} />
     </>
   )
 }

diff --git a/.storybook/stories/MeshRefractionMaterial.stories.tsx b/.storybook/stories/MeshRefractionMaterial.stories.tsx
@@ -74,7 +74,7 @@ function RefractionScene(props: React.ComponentProps<typeof MeshRefractionMateri
   return (
     <>
       <color attach="background" args={['#f0f0f0']} />
-      <ambientLight intensity={0.5} />
+      <ambientLight intensity={0.5 * Math.PI} />
       <spotLight position={[5, 5, -10]} angle={0.15} penumbra={1} />
       <pointLight position={[-10, -10, -10]} />
 
@@ -110,7 +110,14 @@ function RefractionScene(props: React.ComponentProps<typeof MeshRefractionMateri
         scale={12}
         position={[0, -0.5, 0]}
       >
-        <RandomizedLight amount={8} radius={10} ambient={0.5} intensity={1} position={[5, 5, -10]} bias={0.001} />
+        <RandomizedLight
+          amount={8}
+          radius={10}
+          ambient={0.5}
+          intensity={1 * Math.PI}
+          position={[5, 5, -10]}
+          bias={0.001}
+        />
       </AccumulativeShadows>
       <Environment files="https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/1k/aerodynamics_workshop_1k.hdr" />
       <OrbitControls makeDefault autoRotate autoRotateSpeed={0.1} minPolarAngle={0} maxPolarAngle={Math.PI / 2} />

diff --git a/.storybook/stories/MeshTransmissionMaterial.stories.tsx b/.storybook/stories/MeshTransmissionMaterial.stories.tsx
@@ -56,7 +56,7 @@ function GelatinousCube(props: React.ComponentProps<typeof MeshTransmissionMater
 function MeshTransmissionMaterialScene(props: React.ComponentProps<typeof MeshTransmissionMaterial>) {
   return (
     <>
-      <ambientLight />
+      <ambientLight intensity={Math.PI} />
       <group position={[0, -2.5, 0]}>
         <Center top>
           <GelatinousCube {...props} />
@@ -70,7 +70,7 @@ function MeshTransmissionMaterialScene(props: React.ComponentProps<typeof MeshTr
           opacity={0.8}
           scale={20}
         >
-          <RandomizedLight radius={10} ambient={0.5} intensity={1} position={[2.5, 8, -2.5]} bias={0.001} />
+          <RandomizedLight radius={10} ambient={0.5} intensity={1 * Math.PI} position={[2.5, 8, -2.5]} bias={0.001} />
         </AccumulativeShadows>
       </group>
       <OrbitControls minPolarAngle={0} maxPolarAngle={Math.PI / 2} autoRotate autoRotateSpeed={0.05} makeDefault />

diff --git a/.storybook/stories/Reflector.stories.tsx b/.storybook/stories/Reflector.stories.tsx
@@ -76,7 +76,7 @@ function ReflectorScene({
       <TorusKnot args={[0.5, 0.2, 128, 32]} ref={$box} position={[0, 1, 0]}>
         <meshPhysicalMaterial color="hotpink" />
       </TorusKnot>
-      <spotLight intensity={1} position={[10, 6, 10]} penumbra={1} angle={0.3} />
+      <spotLight intensity={1 * Math.PI} position={[10, 6, 10]} penumbra={1} angle={0.3} />
       <Environment preset="city" />
     </>
   )

diff --git a/.storybook/stories/RoundedBox.stories.tsx b/.storybook/stories/RoundedBox.stories.tsx
@@ -48,7 +48,7 @@ function RoundedBoxScene2(props: React.ComponentProps<typeof RoundedBox>) {
 
   return (
     <>
-      <spotLight position={[35, 35, 35]} intensity={2} />
+      <spotLight position={[35, 35, 35]} intensity={2 * Math.PI} />
       <RoundedBox ref={ref} {...props}>
         <meshPhongMaterial color="#f3f3f3" />
       </RoundedBox>

diff --git a/.storybook/stories/ShadowAlpha.stories.tsx b/.storybook/stories/ShadowAlpha.stories.tsx
@@ -41,7 +41,7 @@ function ShadowAlphaScene(props: React.ComponentProps<typeof ShadowAlpha>) {
       </Plane>
 
       <directionalLight castShadow position={[10, 40, 10]} />
-      <ambientLight intensity={0.5} />
+      <ambientLight intensity={0.5 * Math.PI} />
     </>
   )
 }

diff --git a/.storybook/stories/useCamera.stories.tsx b/.storybook/stories/useCamera.stories.tsx
@@ -63,8 +63,8 @@ function UseCameraScene() {
         <boxGeometry args={[60, 60, 60]} />
       </mesh>
 
-      <ambientLight intensity={0.5} />
-      <pointLight position={[10, 10, 10]} intensity={0.5} />
+      <ambientLight intensity={0.5 * Math.PI} />
+      <pointLight position={[10, 10, 10]} intensity={0.5 * Math.PI} />
     </>,
     virtualScene
   )