feat: fix build problem

GodSoul-Studio · Dec 13, 2024 · 429d69a · 429d69a
1 parent 0ca6424
commit 429d69a
Show file tree

Hide file tree

Showing 2 changed files with 134 additions and 30 deletions.
diff --git a/components/three/FloatingBoxes.tsx b/components/three/FloatingBoxes.tsx
@@ -1,20 +1,22 @@
 "use client";
 
-import { useRef } from 'react';
-import { useFrame } from '@react-three/fiber';
-import { Box } from '@react-three/drei';
-import * as THREE from 'three';
+import { useRef } from "react";
+import { useFrame } from "@react-three/fiber";
+import { Box } from "@react-three/drei";
+import * as THREE from "three";
 
 export function FloatingBoxes() {
-  const boxes = useRef([...Array(5)].map(() => ({
-    position: [
-      (Math.random() - 0.5) * 10,
-      (Math.random() - 0.5) * 10,
-      (Math.random() - 0.5) * 10
-    ],
-    rotation: [Math.random() * Math.PI, Math.random() * Math.PI, 0],
-    scale: 0.5 + Math.random() * 0.5
-  })));
+  const boxes = useRef(
+    [...Array(5)].map(() => ({
+      position: [
+        (Math.random() - 0.5) * 10,
+        (Math.random() - 0.5) * 10,
+        (Math.random() - 0.5) * 10,
+      ],
+      rotation: [Math.random() * Math.PI, Math.random() * Math.PI, 0],
+      scale: 0.5 + Math.random() * 0.5,
+    }))
+  );
 
   useFrame((state) => {
     const time = state.clock.getElapsedTime();
@@ -28,7 +30,107 @@ export function FloatingBoxes() {
   return (
     <>
       {boxes.current.map((box, i) => (
-        <Box key={i} args={[1, 1, 1]} position={box.position} scale={box.scale}>
+        <Box
+          key={i}
+          args={[1, 1, 1]}
+          position={box.position}
+          scale={box.scale}
+          visible={undefined}
+          attach={undefined}
+          onUpdate={undefined}
+          up={undefined}
+          rotation={undefined}
+          matrix={undefined}
+          quaternion={undefined}
+          layers={undefined}
+          dispose={undefined}
+          type={undefined}
+          id={undefined}
+          uuid={undefined}
+          name={undefined}
+          parent={undefined}
+          modelViewMatrix={undefined}
+          normalMatrix={undefined}
+          matrixWorld={undefined}
+          matrixAutoUpdate={undefined}
+          matrixWorldAutoUpdate={undefined}
+          matrixWorldNeedsUpdate={undefined}
+          castShadow={undefined}
+          receiveShadow={undefined}
+          frustumCulled={undefined}
+          renderOrder={undefined}
+          animations={undefined}
+          userData={undefined}
+          customDepthMaterial={undefined}
+          customDistanceMaterial={undefined}
+          isObject3D={undefined}
+          onBeforeRender={undefined}
+          onAfterRender={undefined}
+          applyMatrix4={undefined}
+          applyQuaternion={undefined}
+          setRotationFromAxisAngle={undefined}
+          setRotationFromEuler={undefined}
+          setRotationFromMatrix={undefined}
+          setRotationFromQuaternion={undefined}
+          rotateOnAxis={undefined}
+          rotateOnWorldAxis={undefined}
+          rotateX={undefined}
+          rotateY={undefined}
+          rotateZ={undefined}
+          translateOnAxis={undefined}
+          translateX={undefined}
+          translateY={undefined}
+          translateZ={undefined}
+          localToWorld={undefined}
+          worldToLocal={undefined}
+          lookAt={undefined}
+          add={undefined}
+          remove={undefined}
+          removeFromParent={undefined}
+          clear={undefined}
+          getObjectById={undefined}
+          getObjectByName={undefined}
+          getObjectByProperty={undefined}
+          getObjectsByProperty={undefined}
+          getWorldPosition={undefined}
+          getWorldQuaternion={undefined}
+          getWorldScale={undefined}
+          getWorldDirection={undefined}
+          raycast={undefined}
+          traverse={undefined}
+          traverseVisible={undefined}
+          traverseAncestors={undefined}
+          updateMatrix={undefined}
+          updateMatrixWorld={undefined}
+          updateWorldMatrix={undefined}
+          toJSON={undefined}
+          clone={undefined}
+          copy={undefined}
+          addEventListener={undefined}
+          hasEventListener={undefined}
+          removeEventListener={undefined}
+          dispatchEvent={undefined}
+          onClick={undefined}
+          onContextMenu={undefined}
+          onDoubleClick={undefined}
+          onPointerUp={undefined}
+          onPointerDown={undefined}
+          onPointerOver={undefined}
+          onPointerOut={undefined}
+          onPointerEnter={undefined}
+          onPointerLeave={undefined}
+          onPointerMove={undefined}
+          onPointerMissed={undefined}
+          onPointerCancel={undefined}
+          onWheel={undefined}
+          material={undefined}
+          geometry={undefined}
+          morphTargetInfluences={undefined}
+          morphTargetDictionary={undefined}
+          isMesh={undefined}
+          updateMorphTargets={undefined}
+          getVertexPosition={0}
+        >
           <meshStandardMaterial
             color={new THREE.Color().setHSL(i * 0.2, 0.8, 0.5)}
             transparent
@@ -40,4 +142,4 @@ export function FloatingBoxes() {
       ))}
     </>
   );
-}
+}
diff --git a/components/three/ParticleField.tsx b/components/three/ParticleField.tsx
@@ -1,39 +1,41 @@
 "use client";
 
-import { useRef, useMemo } from 'react';
-import { useFrame } from '@react-three/fiber';
-import * as THREE from 'three';
+import { useRef, useMemo } from "react";
+import { useFrame } from "@react-three/fiber";
+import * as THREE from "three";
 
 export function ParticleField() {
-  const points = useRef();
+  const points = useRef<THREE.Points | null>(null); // Ensure points is typed correctly
 
   const particlesCount = 1000;
   const positions = useMemo(() => {
     const positions = new Float32Array(particlesCount * 3);
-
     for (let i = 0; i < particlesCount; i++) {
-      positions[i * 3] = (Math.random() - 0.5) * 10;
-      positions[i * 3 + 1] = (Math.random() - 0.5) * 10;
-      positions[i * 3 + 2] = (Math.random() - 0.5) * 10;
+      positions[i * 3] = (Math.random() - 0.5) * 10; // X
+      positions[i * 3 + 1] = (Math.random() - 0.5) * 10; // Y
+      positions[i * 3 + 2] = (Math.random() - 0.5) * 10; // Z
     }
-
     return positions;
-  }, []);
+  }, [particlesCount]);
 
   useFrame((state) => {
     const time = state.clock.getElapsedTime();
-    for (let i = 0; i < particlesCount; i++) {
-      const i3 = i * 3;
-      points.current.geometry.attributes.position.array[i3 + 1] += Math.sin(time + positions[i3]) * 0.001;
+    if (points.current) {
+      const positionArray = points.current.geometry.attributes.position.array as Float32Array;
+      for (let i = 0; i < particlesCount; i++) {
+        const i3 = i * 3;
+        positionArray[i3 + 1] += Math.sin(time + positions[i3]) * 0.001; // Update Y position
+      }
+      points.current.geometry.attributes.position.needsUpdate = true;
     }
-    points.current.geometry.attributes.position.needsUpdate = true;
   });
 
   return (
     <points ref={points}>
       <bufferGeometry>
         <bufferAttribute
           attach="attributes-position"
+          args={[positions, 3]} // Provide the array and itemSize as arguments
           count={particlesCount}
           array={positions}
           itemSize={3}
@@ -48,4 +50,4 @@ export function ParticleField() {
       />
     </points>
   );
-}
+}