Event Badge 3D

1"use client";
2import * as THREE from "three";
3import { useEffect, useRef, useState } from "react";
4import { Canvas, extend, useThree, useFrame } from "@react-three/fiber";
5import {
6  useGLTF,
7  useTexture,
8  Environment,
9  Lightformer,
10} from "@react-three/drei";
11import {
12  BallCollider,
13  CuboidCollider,
14  Physics,
15  RigidBody,
16  useRopeJoint,
17  useSphericalJoint,
18} from "@react-three/rapier";
19import { MeshLineGeometry, MeshLineMaterial } from "meshline";
20 
21extend({ MeshLineGeometry, MeshLineMaterial });
22 
23declare global {
24  namespace JSX {
25    interface IntrinsicElements {
26      meshLineGeometry: any;
27      meshLineMaterial: any;
28    }
29  }
30}
31 
32// Preload assets
33if (typeof window !== "undefined") {
34  useGLTF.preload(
35    "https://assets.vercel.com/image/upload/contentful/image/e5382hct74si/5huRVDzcoDwnbgrKUo1Lzs/53b6dd7d6b4ffcdbd338fa60265949e1/tag.glb",
36  );
37  useTexture.preload(
38    "https://assets.vercel.com/image/upload/contentful/image/e5382hct74si/SOT1hmCesOHxEYxL7vkoZ/c57b29c85912047c414311723320c16b/band.jpg",
39  );
40}
41 
42export default function EventIdcard() {
43  //   const { debug } = useControls({ debug: false })
44  return (
45    <div className="w-full h-[500px]">
46      <Canvas camera={{ position: [0, 0, 13], fov: 25 }}>
47        <ambientLight intensity={Math.PI} />
48        <Physics interpolate gravity={[0, -40, 0]} timeStep={1 / 60}>
49          <Band />
50        </Physics>
51        <Environment background blur={0.75}>
52          <color attach="background" args={["black"]} />
53          <Lightformer
54            intensity={2}
55            color="white"
56            position={[0, -1, 5]}
57            rotation={[0, 0, Math.PI / 3]}
58            scale={[100, 0.1, 1]}
59          />
60          <Lightformer
61            intensity={3}
62            color="white"
63            position={[-1, -1, 1]}
64            rotation={[0, 0, Math.PI / 3]}
65            scale={[100, 0.1, 1]}
66          />
67          <Lightformer
68            intensity={3}
69            color="white"
70            position={[1, 1, 1]}
71            rotation={[0, 0, Math.PI / 3]}
72            scale={[100, 0.1, 1]}
73          />
74          <Lightformer
75            intensity={10}
76            color="white"
77            position={[-10, 0, 14]}
78            rotation={[0, Math.PI / 2, Math.PI / 3]}
79            scale={[100, 10, 1]}
80          />
81        </Environment>
82      </Canvas>
83    </div>
84  );
85}
86 
87type GLTFResult = {
88  nodes: {
89    card: THREE.Mesh;
90    clip: THREE.Mesh;
91    clamp: THREE.Mesh;
92  };
93  materials: {
94// … truncated