"use client"; import * as THREE from "three"; import { useEffect, useRef, useState } from "react"; import { Canvas, extend, useThree, useFrame } from "@react-three/fiber"; import { useGLTF, useTexture, Environment, Lightformer, } from "@react-three/drei"; import { BallCollider, CuboidCollider, Physics, RigidBody, useRopeJoint, useSphericalJoint, } from "@react-three/rapier"; import { MeshLineGeometry, MeshLineMaterial } from "meshline"; extend({ MeshLineGeometry, MeshLineMaterial }); if (typeof window !== "undefined") { useGLTF.preload( "https://assets.vercel.com/image/upload/contentful/image/e5382hct74si/5huRVDzcoDwnbgrKUo1Lzs/53b6dd7d6b4ffcdbd338fa60265949e1/tag.glb", ); useTexture.preload( "https://assets.vercel.com/image/upload/contentful/image/e5382hct74si/SOT1hmCesOHxEYxL7vkoZ/c57b29c85912047c414311723320c16b/band.jpg", ); } export default function EventIdcard() { // const { debug } = useControls({ debug: false }) return (

); } type GLTFResult = { nodes: { card: THREE.Mesh; clip: THREE.Mesh; clamp: THREE.Mesh; }; materials: { base: THREE.MeshStandardMaterial; metal: THREE.MeshStandardMaterial; }; }; type DragPosition = THREE.Vector3 | false; type RigidBodySegmentProps = { type: "dynamic" | "fixed" | "kinematicPosition"; canSleep: boolean; colliders: "ball" | "cuboid" | "hull" | "trimesh" | false; angularDamping: number; linearDamping: number; }; function Band({ maxSpeed = 50, minSpeed = 10 }) { const band = useRef(null); const lineGeometry = useRef(null); const fixed = useRef(null); const j1 = useRef(null); const j2 = useRef(null); const j3 = useRef(null); const card = useRef(null); const vec = new THREE.Vector3(); const ang = new THREE.Vector3(); const rot = new THREE.Vector3(); const dir = new THREE.Vector3(); const segmentProps: RigidBodySegmentProps = { type: "dynamic", canSleep: true, colliders: false, angularDamping: 2, linearDamping: 2, }; const { nodes, materials } = useGLTF( "https://assets.vercel.com/image/upload/contentful/image/e5382hct74si/5huRVDzcoDwnbgrKUo1Lzs/53b6dd7d6b4ffcdbd338fa60265949e1/tag.glb", ) as unknown as GLTFResult; const texture = useTexture( "https://assets.vercel.com/image/upload/contentful/image/e5382hct74si/SOT1hmCesOHxEYxL7vkoZ/c57b29c85912047c414311723320c16b/band.jpg", ); useThree((state) => state.size); const [curve] = useState( () => new THREE.CatmullRomCurve3([ new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3(), ]), ); const [dragged, drag] = useState(false); const [hovered, hover] = useState(false); useRopeJoint(fixed, j1, [[0, 0, 0], [0, 0, 0], 1]); useRopeJoint(j1, j2, [[0, 0, 0], [0, 0, 0], 1]); useRopeJoint(j2, j3, [[0, 0, 0], [0, 0, 0], 1]); useSphericalJoint(j3, card, [ [0, 0, 0], [0, 1.45, 0], ]); useEffect(() => { if (hovered) { document.body.style.cursor = dragged ? "grabbing" : "grab"; return () => void (document.body.style.cursor = "auto"); } }, [hovered, dragged]); useFrame((state, delta) => { if (dragged && card.current) { vec.set(state.pointer.x, state.pointer.y, 0.5).unproject(state.camera); dir.copy(vec).sub(state.camera.position).normalize(); vec.add(dir.multiplyScalar(state.camera.position.length())); [card, j1, j2, j3, fixed].forEach((ref) => ref.current?.wakeUp()); card.current?.setNextKinematicTranslation({ x: vec.x - (dragged as THREE.Vector3).x, y: vec.y - (dragged as THREE.Vector3).y, z: vec.z - (dragged as THREE.Vector3).z, }); } if (fixed.current) { [j1, j2].forEach((ref) => { if (!ref.current.lerped) ref.current.lerped = new THREE.Vector3().copy( ref.current.translation(), ); const clampedDistance = Math.max( 0.1, Math.min(1, ref.current.lerped.distanceTo(ref.current.translation())), ); ref.current.lerped.lerp( ref.current.translation(), delta * (minSpeed + clampedDistance * (maxSpeed - minSpeed)), ); }); curve.points[0].copy(j3.current.translation()); curve.points[1].copy(j2.current.lerped); curve.points[2].copy(j1.current.lerped); curve.points[3].copy(fixed.current.translation()); if (lineGeometry.current && lineGeometry.current.setPoints) { const points = curve.getPoints(32); lineGeometry.current.setPoints(points); } ang.copy(card.current.angvel()); rot.copy(card.current.rotation()); card.current.setAngvel({ x: ang.x, y: ang.y - rot.y * 0.25, z: ang.z }); } }); curve.curveType = "chordal"; texture.wrapS = texture.wrapT = THREE.RepeatWrapping; return ( <> hover(true)} onPointerOut={() => hover(false)} onPointerUp={(e: THREE.Event) => { const target = e.target as HTMLElement; if (target instanceof HTMLElement) { target.releasePointerCapture( (e as unknown as globalThis.PointerEvent).pointerId, ); } drag(false); }} onPointerDown={(e: THREE.Event) => { const target = e.target as HTMLElement; if (target instanceof HTMLElement) { target.setPointerCapture( (e as unknown as globalThis.PointerEvent).pointerId, ); } drag( new THREE.Vector3() .copy((e as unknown as { point: THREE.Vector3 }).point) .sub(vec.copy(card.current.translation())), ); }} > ); }

3D Event Badge

Installation