add components for rendering stls

Author: Brookke

src/components/STLPileViewer.tsx

@@ -0,0 +1,181 @@
+import { Canvas } from "@react-three/fiber";
+import { OrbitControls, Environment } from "@react-three/drei";
+import { Physics, RigidBody } from "@react-three/rapier";
+import { Suspense, useEffect, useState } from "react";
+import { STLLoader } from "three/examples/jsm/loaders/STLLoader.js";
+import * as THREE from "three";
+
+interface STLModelConfig {
+  url: string;
+  position?: [number, number, number];
+  scale?: number;
+  quantity?: number;
+}
+
+interface PhysicsSTLProps {
+  config: STLModelConfig;
+  delay: number;
+  color: string;
+}
+
+// Generate a random pastel color
+function generateRandomColor(): string {
+  const hue = Math.random() * 360;
+  const saturation = 60 + Math.random() * 20; // 60-80%
+  const lightness = 65 + Math.random() * 15; // 65-80%
+  return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
+}
+
+function PhysicsSTL({ config, delay, color }: PhysicsSTLProps) {
+  const [geometry, setGeometry] = useState<THREE.BufferGeometry | null>(null);
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const loader = new STLLoader();
+    loader.load(
+      config.url,
+      (loadedGeometry) => {
+        loadedGeometry.computeBoundingBox();
+        setGeometry(loadedGeometry);
+      },
+      undefined,
+      (error) => {
+        console.error("Error loading STL:", error);
+      },
+    );
+  }, [config.url]);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsVisible(true);
+    }, delay);
+    return () => clearTimeout(timer);
+  }, [delay]);
+
+  if (!geometry || !isVisible) return null;
+
+  const position = config.position || [
+    (Math.random() - 0.5) * 0.3,
+    5,
+    (Math.random() - 0.5) * 0.3,
+  ];
+
+  const scale = config.scale || 1;
+
+  return (
+    <RigidBody
+      position={position}
+      colliders="cuboid"
+      restitution={0.2}
+      friction={0.3}
+      linearDamping={0.5}
+      angularDamping={0.5}
+      canSleep={true}
+    >
+      <mesh geometry={geometry} scale={scale} castShadow receiveShadow>
+        <meshStandardMaterial
+          color={color}
+          roughness={0.35}
+          metalness={0.0}
+          envMapIntensity={0.6}
+        />
+      </mesh>
+    </RigidBody>
+  );
+}
+
+function Ground() {
+  return (
+    <RigidBody type="fixed" colliders="cuboid" friction={0.4}>
+      <mesh position={[0, -0.6, 0]} receiveShadow>
+        <boxGeometry args={[10, 0.5, 10]} />
+        <meshStandardMaterial color="#b2b2b2ff" roughness={0.9} />
+      </mesh>
+    </RigidBody>
+  );
+}
+
+export interface Props {
+  models: STLModelConfig[];
+  height?: string;
+  backgroundColor?: string;
+  enableReset?: boolean;
+  dropDelay?: number;
+  className?: string;
+}
+
+export default function STLPileViewer({
+  models,
+  height = "600px",
+  backgroundColor = "rgba(0,0,0,0)",
+  dropDelay = 200,
+  className,
+}: Props) {
+  // Expand models based on quantity and randomize order
+  const expandedModels = models.flatMap((model) => {
+    const quantity = model.quantity || 1;
+    return Array.from({ length: quantity }, () => ({
+      ...model,
+      color: generateRandomColor(),
+    }));
+  });
+
+  // Shuffle the expanded models array
+  const shuffledModels = [...expandedModels].sort(() => Math.random() - 0.5);
+
+  return (
+    <div style={{ position: "relative" }}>
+      <div
+        className={className}
+        style={{
+          width: "100%",
+          maxWidth: "1200px",
+          height,
+          margin: "2rem auto",
+          borderRadius: "8px",
+          overflow: "hidden",
+        }}
+      >
+        <Canvas
+          camera={{ position: [0, 3, 4], fov: 50 }}
+          shadows
+          style={{ background: backgroundColor }}
+        >
+          {/* <ambientLight intensity={0.1}  castShadow/> */}
+          <directionalLight
+            castShadow
+            position={[10, 10, 10]}
+            intensity={0.02}
+            shadow-mapSize={[1024, 1024]}
+          />
+          <directionalLight position={[-10, -10, -10]} intensity={0.4} />
+          <Environment preset="city" />
+
+          <Suspense fallback={null}>
+            <Physics gravity={[0, -9.81, 0]}>
+              <Ground />
+              {shuffledModels.map((model, index) => (
+                <PhysicsSTL
+                  config={model}
+                  delay={index * dropDelay}
+                  color={model.color}
+                />
+              ))}
+            </Physics>
+          </Suspense>
+
+          <OrbitControls
+            enableDamping
+            dampingFactor={0.05}
+            autoRotate={false}
+            enablePan={true}
+            enableZoom={false}
+            minDistance={3}
+            maxDistance={15}
+            target={[0, 0, 0]}
+          />
+        </Canvas>
+      </div>
+    </div>
+  );
+}

src/components/STLViewer.tsx

@@ -0,0 +1,130 @@
+import { Canvas } from "@react-three/fiber";
+import { OrbitControls, Center, Environment } from "@react-three/drei";
+import { Suspense, useEffect, useState } from "react";
+import { STLLoader } from "three/examples/jsm/loaders/STLLoader.js";
+import * as THREE from "three";
+
+interface STLModelProps {
+  url: string;
+  rotationX?: number;
+  rotationY?: number;
+  rotationZ?: number;
+}
+
+function STLModel({
+  url,
+  rotationX = 0,
+  rotationY = 0,
+  rotationZ = 0,
+}: STLModelProps) {
+  const [geometry, setGeometry] = useState<THREE.BufferGeometry | null>(null);
+
+  useEffect(() => {
+    const loader = new STLLoader();
+    loader.load(
+      url,
+      (loadedGeometry) => {
+        loadedGeometry.computeBoundingBox();
+        setGeometry(loadedGeometry);
+      },
+      undefined,
+      (error) => {
+        console.error("Error loading STL:", error);
+      },
+    );
+  }, [url]);
+
+  if (!geometry) return null;
+
+  return (
+    <Center>
+      <mesh
+        geometry={geometry}
+        rotation={[rotationX, rotationY, rotationZ]}
+        scale={1.5}
+        castShadow
+        receiveShadow
+      >
+        <meshStandardMaterial
+          color={"#a9a9a9ff"}
+          roughness={0.35}
+          metalness={0.0}
+          envMapIntensity={0.3}
+        />
+      </mesh>
+    </Center>
+  );
+}
+
+export interface Props {
+  modelPath: string;
+  height?: string;
+  cameraDistance?: number;
+  cameraHeight?: number;
+  autoRotate?: boolean;
+  backgroundColor?: string;
+  rotationX?: number;
+  rotationY?: number;
+  rotationZ?: number;
+  className?: string;
+}
+
+export default function STLViewer({
+  modelPath,
+  height = "400px",
+  cameraDistance = 2,
+  cameraHeight = 45,
+  autoRotate = true,
+  backgroundColor = "rgba(0,0,0,0)",
+  rotationX = 0,
+  rotationY = 0,
+  rotationZ = 0,
+  className,
+}: Props) {
+  return (
+    <div
+      className={className}
+      style={{
+        width: "100%",
+        maxWidth: "800px",
+        height,
+        margin: "2rem auto",
+        borderRadius: "8px",
+        overflow: "hidden",
+      }}
+    >
+      <Canvas
+        camera={{ position: [20, cameraHeight, cameraDistance], fov: 50 }}
+        shadows
+        style={{ background: backgroundColor }}
+      >
+        {/* <ambientLight intensity={4} /> */}
+        <directionalLight
+          castShadow
+          position={[20, cameraHeight, cameraDistance]}
+          intensity={1}
+        />
+        {/* <directionalLight position={[-1, -1, -1]} intensity={0.3} /> */}
+        <Environment preset="city" />
+
+        <Suspense fallback={null}>
+          <STLModel
+            url={modelPath}
+            rotationX={rotationX}
+            rotationY={rotationY}
+            rotationZ={rotationZ}
+          />
+        </Suspense>
+
+        <OrbitControls
+          enableDamping
+          dampingFactor={0.05}
+          autoRotate={autoRotate}
+          autoRotateSpeed={2.0}
+          enablePan={false}
+          enableZoom={false}
+        />
+      </Canvas>
+    </div>
+  );
+}