demo update

Author: takuma-hmng8

app/ShaderFx.tsx

@@ -2,9 +2,26 @@
 
 import { Suspense, useState } from "react";
 import { Canvas } from "@react-three/fiber";
-import { Perf } from "r3f-perf";
+// import { Perf } from "r3f-perf";
 import { PerformanceMonitor } from "@react-three/drei";
 
+const Loading = () => {
+   return (
+      <div
+         style={{
+            fontSize: "16px",
+            color: "white",
+            width: "100%",
+            height: "100%",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+         }}>
+         Loading...
+      </div>
+   );
+};
+
 export const ShaderFx = ({
    children,
    preserveDrawingBuffer = false,
@@ -18,25 +35,28 @@ export const ShaderFx = ({
 }) => {
    const [dpr, setDpr] = useState(1.5);
    return (
-      <Canvas
-         dpr={dpr}
-         gl={{ preserveDrawingBuffer: preserveDrawingBuffer }}
-         shadows={shadows}>
-         <PerformanceMonitor
-            factor={1}
-            onChange={({ factor }) => {
-               if (preserveDrawingBuffer) {
-                  return;
-               }
-               if (!isDprUpdate) {
-                  return;
-               }
-               console.log(`dpr:${dpr}`);
-               setDpr(Math.round((1.0 + 1.0 * factor) * 10) / 10);
-            }}>
-            <Suspense fallback={null}>{children}</Suspense>
-            {/* <Perf position={"bottom-left"} minimal={false} /> */}
-         </PerformanceMonitor>
-      </Canvas>
+      <Suspense fallback={<Loading />}>
+         <Canvas
+            dpr={dpr}
+            gl={{ preserveDrawingBuffer: preserveDrawingBuffer }}
+            shadows={shadows}>
+            <PerformanceMonitor
+               factor={1}
+               onChange={({ factor }) => {
+                  if (preserveDrawingBuffer) {
+                     return;
+                  }
+                  if (!isDprUpdate) {
+                     return;
+                  }
+                  console.log(`dpr:${dpr}`);
+                  setDpr(Math.round((1.0 + 1.0 * factor) * 10) / 10);
+               }}>
+               {children}
+               {/* <Suspense fallback={null}>{children}</Suspense> */}
+               {/* <Perf position={"bottom-left"} minimal={false} /> */}
+            </PerformanceMonitor>
+         </Canvas>
+      </Suspense>
    );
 };

app/obscurus/Playground.tsx

@@ -57,8 +57,8 @@ const PARTICLE_CONFIG: MorphParticlesParams = {
    color1: new THREE.Color(0x000000),
    color2: new THREE.Color(0x000000),
    color3: new THREE.Color(0x000000),
-   wobbleStrength: 0.4,
-   warpStrength: 2.6,
+   wobbleStrength: 0.6,
+   warpStrength: 3,
    wobblePositionFrequency: 0.4,
    wobbleTimeFrequency: 0.4,
    warpTimeFrequency: 0.2,
@@ -129,7 +129,7 @@ const setWobbleConfig = () => {
 export const Playground = () => {
    useGUI(setGUI);
    const [noise] = useLoader(THREE.TextureLoader, ["/noise.jpg"]);
-   const { size, viewport } = useThree();
+   const { size, viewport, camera } = useThree();
    const [updateWobble, wobble] = useCreateWobble3D({
       baseMaterial: THREE.MeshPhysicalMaterial,
       geometry: useMemo(() => new THREE.IcosahedronGeometry(2.4, 10), []),
@@ -143,7 +143,8 @@ export const Playground = () => {
    useEffect(() => {
       const particleMat = particles.points.material as THREE.ShaderMaterial;
       particleMat.blending = THREE.NormalBlending;
-   }, [noise, updateParticle, particles.points.material]);
+      camera.position.z = 8;
+   }, [noise, updateParticle, particles.points.material, camera]);
 
    useFrame((props) => {
       updateWobble(props, {