"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())), ); }} > ); }

Vercel 3D Event Badge

Installation

Install the package

Paste this code into your project

Update import paths as needed

Stop building from scratch.Ship faster with Pro templates.

Stop building from scratch.
Ship faster with Pro templates.