微修正

Author: takuma-hmng8

.storybook/stories/UseBrush.tsx

@@ -36,8 +36,9 @@ const setConfig = () => {
 export const UseBrush = (args: BrushParams) => {
    const updateGUI = useGUI(setGUI);
    const fxRef = React.useRef<FxMaterialProps>();
-   const size = useThree((state) => state.size);
-   const dpr = useThree((state) => state.viewport.dpr);
+   const { size, dpr } = useThree((state) => {
+      return { size: state.size, dpr: state.viewport.dpr };
+   });
    const [updateBrush] = useBrush({ size, dpr });
    useFrame((props) => {
       const fx = updateBrush(props, setConfig());
@@ -57,8 +58,9 @@ export const UseBrushWithTexture = (args: BrushParams) => {
    const [bg] = useLoader(THREE.TextureLoader, ["thumbnail.jpg"]);
    const updateGUI = useGUI(setGUI);
    const fxRef = React.useRef<FxMaterialProps>();
-   const size = useThree((state) => state.size);
-   const dpr = useThree((state) => state.viewport.dpr);
+   const { size, dpr } = useThree((state) => {
+      return { size: state.size, dpr: state.viewport.dpr };
+   });
    const [updateFxTexture] = useFxTexture({ size, dpr });
    const [updateBrush] = useBrush({ size, dpr });
 

.storybook/stories/UseDuoTone.tsx

@@ -29,8 +29,9 @@ export const UseDuoTone = (args: DuoToneParams) => {
    const updateGUI = useGUI(setGUI);
    const [bg] = useLoader(THREE.TextureLoader, ["thumbnail.jpg"]);
    const fxRef = React.useRef<FxMaterialProps>();
-   const size = useThree((state) => state.size);
-   const dpr = useThree((state) => state.viewport.dpr);
+   const { size, dpr } = useThree((state) => {
+      return { size: state.size, dpr: state.viewport.dpr };
+   });
    const [updateFxTexture] = useFxTexture({ size, dpr });
    const [updateDuoTone] = useDuoTone({ size, dpr });
 

.storybook/stories/UseFluid.tsx

@@ -39,8 +39,9 @@ export const UseFluid = (args: FluidParams) => {
    const updateGUI = useGUI(setGUI);
 
    const fxRef = React.useRef<FxMaterialProps>();
-   const size = useThree((state) => state.size);
-   const dpr = useThree((state) => state.viewport.dpr);
+   const { size, dpr } = useThree((state) => {
+      return { size: state.size, dpr: state.viewport.dpr };
+   });
    const [updateFluid] = useFluid({ size, dpr });
 
    useFrame((props) => {
@@ -60,8 +61,9 @@ export const UseFluid = (args: FluidParams) => {
 export const UseFluidWithTexture = (args: FluidParams) => {
    const updateGUI = useGUI(setGUI);
    const fxRef = React.useRef<FxMaterialProps>();
-   const size = useThree((state) => state.size);
-   const dpr = useThree((state) => state.viewport.dpr);
+   const { size, dpr } = useThree((state) => {
+      return { size: state.size, dpr: state.viewport.dpr };
+   });
    const [updateFluid] = useFluid({ size, dpr });
 
    const [bg] = useLoader(THREE.TextureLoader, ["thumbnail.jpg"]);

.storybook/stories/UseFogProjection.tsx

@@ -40,8 +40,9 @@ export const UseFogProjection = (args: FogProjectionParams) => {
    const updateGUI = useGUI(setGUI);
    const [bg] = useLoader(THREE.TextureLoader, ["thumbnail.jpg"]);
    const fxRef = React.useRef<FxMaterialProps>();
-   const size = useThree((state) => state.size);
-   const dpr = useThree((state) => state.viewport.dpr);
+   const { size, dpr } = useThree((state) => {
+      return { size: state.size, dpr: state.viewport.dpr };
+   });
    const [updateFxTexture] = useFxTexture({ size, dpr });
    const [updateNoise] = useNoise({ size, dpr });
    const [updateFogProjection] = useFogProjection({ size, dpr });

.storybook/stories/UseFxTexture.tsx

@@ -39,8 +39,9 @@ export const UseFxTexture = (args: FxTextureParams) => {
       "momo.jpg",
    ]);
    const fxRef = React.useRef<FxMaterialProps>();
-   const size = useThree((state) => state.size);
-   const dpr = useThree((state) => state.viewport.dpr);
+   const { size, dpr } = useThree((state) => {
+      return { size: state.size, dpr: state.viewport.dpr };
+   });
    const [updateFxTexture] = useFxTexture({ size, dpr });
    const [updateNoise] = useNoise({ size, dpr });
 

.storybook/stories/UseNoise.tsx

@@ -32,8 +32,9 @@ export const UseNoise = (args: NoiseParams) => {
    const updateGUI = useGUI(setGUI);
 
    const fxRef = React.useRef<FxMaterialProps>();
-   const size = useThree((state) => state.size);
-   const dpr = useThree((state) => state.viewport.dpr);
+   const { size, dpr } = useThree((state) => {
+      return { size: state.size, dpr: state.viewport.dpr };
+   });
    const [updateNoise] = useNoise({ size, dpr });
 
    useFrame((props) => {

.storybook/stories/UseRipple.tsx

@@ -58,8 +58,9 @@ export const UseRippleWithTexture = (args: RippleParams) => {
    ]);
    const updateGUI = useGUI(setGUI);
    const fxRef = React.useRef<FxMaterialProps>();
-   const size = useThree((state) => state.size);
-   const dpr = useThree((state) => state.viewport.dpr);
+   const { size, dpr } = useThree((state) => {
+      return { size: state.size, dpr: state.viewport.dpr };
+   });
    const [updateFxTexture] = useFxTexture({ size, dpr });
    const [updateRipple] = useRipple({ size, texture: ripple });
 

.storybook/stories/UseSimpleBlur.tsx

@@ -30,8 +30,9 @@ export const UseSimpleBlur = (args: SimpleBlurParams) => {
    const updateGUI = useGUI(setGUI);
    const [bg] = useLoader(THREE.TextureLoader, ["thumbnail.jpg"]);
    const fxRef = React.useRef<FxMaterialProps>();
-   const size = useThree((state) => state.size);
-   const dpr = useThree((state) => state.viewport.dpr);
+   const { size, dpr } = useThree((state) => {
+      return { size: state.size, dpr: state.viewport.dpr };
+   });
    const [updateFxTexture] = useFxTexture({ size, dpr });
    const [updateSimpleBlur] = useSimpleBlur({ size, dpr });
 

.storybook/stories/UseWave.tsx

@@ -46,8 +46,9 @@ export const UseWave = (args: WaveParams) => {
    const updateGUI = useGUI(setGUI);
 
    const fxRef = React.useRef<FxMaterialProps>();
-   const size = useThree((state) => state.size);
-   const dpr = useThree((state) => state.viewport.dpr);
+   const { size, dpr } = useThree((state) => {
+      return { size: state.size, dpr: state.viewport.dpr };
+   });
    const [updateWave] = useWave({ size, dpr });
 
    useFrame((props) => {
@@ -67,8 +68,9 @@ export const UseWave = (args: WaveParams) => {
 export const UseWaveWithTexture = (args: WaveParams) => {
    const updateGUI = useGUI(setGUI);
    const fxRef = React.useRef<FxMaterialProps>();
-   const size = useThree((state) => state.size);
-   const dpr = useThree((state) => state.viewport.dpr);
+   const { size, dpr } = useThree((state) => {
+      return { size: state.size, dpr: state.viewport.dpr };
+   });
 
    const [updateWave] = useWave({ size, dpr });
    const [updateFxTexture] = useFxTexture({ size, dpr });

app/_home/index.tsx

@@ -19,8 +19,9 @@ export const Home = () => {
    const updateGUI = useGUI(setGUI);
    const mainShaderRef = useRef<FxTransparentMaterialProps>();
 
-   const size = useThree((state) => state.size);
-   const dpr = useThree((state) => state.viewport.dpr);
+   const { size, dpr } = useThree((state) => {
+      return { size: state.size, dpr: state.viewport.dpr };
+   });
 
    const [updateNoise] = useNoise({ size, dpr });