"use client"; // Adapted from reactbits.dev/components/lanyard import { useEffect, useRef } from 'react'; import type { CSSProperties } from 'react'; import * as THREE from 'three'; type Orientation = 'portrait' | 'landscape'; type Finish = 'glossy' | 'matte' | 'holographic' | 'metallic'; type Metal = 'graphite' | 'silver' | 'gold'; type Anchor = 'left' | 'center' | 'right'; type ImageFit = 'cover' | 'contain'; type Rgb = [number, number, number]; type Point = { clientX: number; clientY: number }; interface PathLike { moveTo(x: number, y: number): unknown; lineTo(x: number, y: number): unknown; bezierCurveTo(c1x: number, c1y: number, c2x: number, c2y: number, x: number, y: number): unknown; } export interface LanyardProps { frontImage?: string; backImage?: string; imageFit?: ImageFit; cardColor?: string; orientation?: Orientation; finish?: Finish; cornerRadius?: number; size?: number; anchor?: Anchor; strapLength?: number; strapImage?: string; strapColor?: string; strapWidth?: number; metal?: Metal; gravity?: number; damping?: number; elasticity?: number; breeze?: number; interactive?: boolean; intro?: boolean; className?: string; style?: CSSProperties; } interface Settings { frontImage?: string; backImage?: string; imageFit: ImageFit; cardColor: string; orientation: Orientation; finish: Finish; cornerRadius: number; size: number; anchor: Anchor; strapLength: number; strapImage?: string; strapColor: string; strapWidth: number; metal: Metal; gravity: number; damping: number; elasticity: number; breeze: number; interactive: boolean; intro: boolean; } interface Images { front: HTMLImageElement | null; back: HTMLImageElement | null; strap: HTMLImageElement | null; } interface CardLayout { width: number; height: number; radius: number; slot: { width: number; height: number; y: number }; ringY: number; hangY: number; } interface FinishLook { roughness: number; metalness: number; clearcoat: number; clearcoatRoughness: number; foil: number; anisotropy: number; } interface Body { position: THREE.Vector3; previous: THREE.Vector3; velocity: THREE.Vector3; quaternion: THREE.Quaternion; previousQuaternion: THREE.Quaternion; angular: THREE.Vector3; mass: number; inverseInertia: THREE.Vector3; hang: THREE.Vector3; } interface Grab { local: THREE.Vector3; rotation: THREE.Quaternion; reach: number; from: THREE.Vector3; target: THREE.Vector3; } interface Simulation { nodes: THREE.Vector3[]; previous: THREE.Vector3[]; velocities: THREE.Vector3[]; lengths: Float64Array; impulses: Float64Array; rest: number; anchor: THREE.Vector3; body: Body; grab: Grab | null; turn: number; twist: number; twistRaw: number; calm: number; } interface Physics { gravity: number; hold: number; stiffness: number; spring: number; bandDamping: number; linearDrag: number; angularDrag: number; air: number; broadside: number; spinAir: number; nodeDrag: number; nodeAir: number; twist: number; twistDamping: number; grip: number; gripDamping: number; breeze: number; } interface Applied { layoutKey?: string; framingKey?: string; imageKey?: string; faceKey?: string; strapColor?: string; strapScale?: number; } interface Press { x: number; y: number; time: number; point: THREE.Vector3; } const CARD_SIZES: Record = { portrait: [1.6, 2.25], landscape: [2.25, 1.6] }; const ANCHORS: Record = { left: 0.27, center: 0.5, right: 0.73 }; const THICKNESS = 0.018; const BEVEL = 0.007; const JOINTS = 4; const NODE_WEIGHT = 1 / 0.05; const MAX_STEP = 1 / 960; const ITERATIONS = 2; const SAMPLES = 72; const FOV = 24; const STRAP_WIDTH = 0.36; const RING_RADIUS = 0.095; const RING_TUBE = 0.0135; const EYELET_RADIUS = 0.036; const CLAMP_BODY = 0.15; const FACE_WIDTH = 1024; const FINISHES: Record = { glossy: { roughness: 0.42, metalness: 0, clearcoat: 1, clearcoatRoughness: 0.06, foil: 0, anisotropy: 0 }, matte: { roughness: 0.85, metalness: 0, clearcoat: 0, clearcoatRoughness: 0.6, foil: 0, anisotropy: 0 }, holographic: { roughness: 0.3, metalness: 0, clearcoat: 1, clearcoatRoughness: 0.04, foil: 1, anisotropy: 0 }, metallic: { roughness: 0.36, metalness: 0.75, clearcoat: 0.5, clearcoatRoughness: 0.18, foil: 0, anisotropy: 0.7 } }; const BAND_COLUMNS = [0, 0.07, 0.93, 1]; const BAND_BEND = [-0.95, -0.28, 0.28, 0.95]; const FLIP_SPIN = 9; const FOIL_VERTEX_HEAD = ` varying vec2 vFoilUv; varying vec3 vFoilX; varying vec3 vFoilY; `; const FOIL_VERTEX_BODY = ` vFoilUv = uv; vFoilX = normalize((modelViewMatrix * vec4(1.0, 0.0, 0.0, 0.0)).xyz); vFoilY = normalize((modelViewMatrix * vec4(0.0, 1.0, 0.0, 0.0)).xyz); `; const FOIL_FRAGMENT_HEAD = ` uniform float foilStrength; uniform float foilAspect; uniform vec3 foilKey; uniform vec3 foilFill; uniform vec3 foilTop; varying vec2 vFoilUv; varying vec3 vFoilX; varying vec3 vFoilY; float foilHash(vec2 p) { p = fract(p * vec2(234.34, 435.345)); p += dot(p, p + 34.23); return fract(p.x * p.y); } float foilBump(float t, float center, float width) { float x = (t - center) / width; return max(0.0, 1.0 - x * x); } vec3 foilSpectrum(float t) { return vec3( foilBump(t, 0.82, 0.32) + 0.4 * foilBump(t, 0.02, 0.12), foilBump(t, 0.5, 0.26), foilBump(t, 0.18, 0.24) ); } vec3 foilGrating(float u, float spacing) { vec3 color = vec3(0.0); for (int m = 1; m <= 2; m++) { float order = float(m); float t = (spacing * abs(u) / order - 0.38) / 0.32; color += foilSpectrum(t) / order; } return color; } vec3 foilShard(vec2 p) { vec2 base = floor(p); float best = 9.0; float edge = 9.0; vec2 id = base; for (int j = -1; j <= 1; j++) { for (int i = -1; i <= 1; i++) { vec2 cell = base + vec2(float(i), float(j)); vec2 site = cell + vec2(foilHash(cell), foilHash(cell + 7.31)) * 0.9 + 0.05; float d = length(site - p); if (d < best) { edge = best; best = d; id = cell; } else if (d < edge) { edge = d; } } } return vec3(foilHash(id + 3.17), foilHash(id + 11.73), edge - best); } `; const FOIL_FRAGMENT_BODY = ` if (foilStrength > 0.0) { vec3 foilView = normalize(vViewPosition); vec3 foilNormal = normalize(normal); vec2 foilP = vec2(vFoilUv.x, vFoilUv.y * foilAspect); vec3 shard = foilShard(foilP * 26.0); vec2 ray = foilP - vec2(-1.6, 2.6 * foilAspect); float angle = atan(ray.y, ray.x) + (shard.x - 0.5) * 0.16; vec3 grating = normalize(vFoilX * cos(angle) + vFoilY * sin(angle)); float spacing = 1.7 * (0.95 + shard.y * 0.1); vec3 rainbow = foilGrating(dot(foilKey + foilView, grating), spacing); rainbow += 0.6 * foilGrating(dot(foilTop + foilView, grating), spacing); rainbow *= 0.8 + 0.2 * smoothstep(0.0, 0.04, shard.z); rainbow = max(rainbow - 0.35 * min(rainbow.r, min(rainbow.g, rainbow.b)), 0.0); vec2 grid = foilP * 64.0; vec2 cell = floor(grid); vec2 jitter = vec2(foilHash(cell + 1.7), foilHash(cell + 9.2)); float flake = smoothstep(0.32, 0.06, length(fract(grid) - jitter * 0.6 - 0.2)) * step(0.45, foilHash(cell + 4.4)); vec3 facet = normalize(foilNormal + (vFoilX * (jitter.x - 0.5) + vFoilY * (jitter.y - 0.5)) * 0.8); float glint = pow(max(dot(reflect(-foilKey, facet), foilView), 0.0), 28.0); glint += 0.7 * pow(max(dot(reflect(-foilTop, facet), foilView), 0.0), 28.0); float fine = 1.0 - smoothstep(0.35, 0.9, max(fwidth(grid.x), fwidth(grid.y))); vec3 sparkle = flake * glint * fine * (vec3(0.7) + foilGrating(dot(foilKey + foilView, grating) + jitter.x * 0.4, spacing)); float ink = dot(diffuseColor.rgb, vec3(0.2126, 0.7152, 0.0722)); float foil = foilStrength * (0.08 + 0.92 * smoothstep(0.04, 0.7, ink)); float facing = clamp(dot(foilNormal, foilView), 0.0, 1.0); float tint = clamp(dot(rainbow, vec3(0.4)), 0.0, 1.0); outgoingLight = outgoingLight * (1.0 - foil * (0.3 + 0.32 * tint)) + (rainbow * 0.62 * (0.4 + 0.6 * facing) + sparkle * 1.6) * foil; } `; const METALS: Record = { silver: { color: '#d9dce2', roughness: 0.16 }, gold: { color: '#e4b965', roughness: 0.2 }, graphite: { color: '#4d4f55', roughness: 0.28 } }; const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value)); const mix = (a: number, b: number, t: number) => a + (b - a) * t; const parseColor = (value: string, fallback: Rgb): Rgb => { try { const ctx = document.createElement('canvas').getContext('2d'); if (!ctx) return fallback; ctx.fillStyle = '#000000'; ctx.fillStyle = value; const resolved = ctx.fillStyle; if (resolved.startsWith('#')) { const n = parseInt(resolved.slice(1), 16); return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]; } const parts = resolved.match(/[\d.]+/g); if (!parts || parts.length < 3) return fallback; return [Number(parts[0]) / 255, Number(parts[1]) / 255, Number(parts[2]) / 255]; } catch { return fallback; } }; const luminance = (rgb: Rgb) => 0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2]; const toCss = (rgb: Rgb, alpha = 1) => `rgba(${Math.round(rgb[0] * 255)}, ${Math.round(rgb[1] * 255)}, ${Math.round(rgb[2] * 255)}, ${alpha})`; const seeded = (start: number) => { let state = start >>> 0; return () => { state = (state + 0x6d2b79f5) >>> 0; let t = state; t = Math.imul(t ^ (t >>> 15), t | 1); t ^= t + Math.imul(t ^ (t >>> 7), t | 61); return ((t ^ (t >>> 14)) >>> 0) / 4294967296; }; }; const traceRoundedRect = (path: PathLike, x: number, y: number, width: number, height: number, radius: number) => { const r = Math.max(0, Math.min(radius, width / 2, height / 2)); const k = r * 0.4477; path.moveTo(x + r, y); path.lineTo(x + width - r, y); path.bezierCurveTo(x + width - k, y, x + width, y + k, x + width, y + r); path.lineTo(x + width, y + height - r); path.bezierCurveTo(x + width, y + height - k, x + width - k, y + height, x + width - r, y + height); path.lineTo(x + r, y + height); path.bezierCurveTo(x + k, y + height, x, y + height - k, x, y + height - r); path.lineTo(x, y + r); path.bezierCurveTo(x, y + k, x + k, y, x + r, y); }; const loadImage = ( cache: Map>, url?: string ): Promise => { if (!url) return Promise.resolve(null); const cached = cache.get(url); if (cached) return cached; const promise = new Promise(resolve => { const image = new Image(); image.crossOrigin = 'anonymous'; image.decoding = 'async'; image.onload = () => resolve(image); image.onerror = () => resolve(null); image.src = url; }); cache.set(url, promise); return promise; }; const cardLayout = (orientation: Orientation, cornerRadius: number): CardLayout => { const [width, height] = CARD_SIZES[orientation] || CARD_SIZES.portrait; const radius = mix(0.03, Math.min(width, height) * 0.2, clamp(cornerRadius, 0, 1)); const slot = { width: 0.34, height: 0.07, y: height / 2 - 0.13 }; const ringY = height / 2 - 0.055; return { width, height, radius, slot, ringY, hangY: ringY + RING_RADIUS }; }; const buildCardGeometry = (layout: CardLayout) => { const { width, height, radius, slot } = layout; const outline = new THREE.Shape(); traceRoundedRect( outline, -width / 2 + BEVEL, -height / 2 + BEVEL, width - BEVEL * 2, height - BEVEL * 2, Math.max(radius - BEVEL, 0.005) ); const hole = new THREE.Path(); traceRoundedRect( hole, -slot.width / 2 - BEVEL, slot.y - slot.height / 2 - BEVEL, slot.width + BEVEL * 2, slot.height + BEVEL * 2, slot.height / 2 + BEVEL ); outline.holes.push(hole); const body = new THREE.ExtrudeGeometry(outline, { depth: THICKNESS, bevelEnabled: true, bevelThickness: BEVEL, bevelSize: BEVEL, bevelSegments: 5, curveSegments: 24 }); body.translate(0, 0, -THICKNESS / 2); // Slightly oversized face so the photo covers the bevel rim (no card frame). const facePad = BEVEL * 0.35; const faceOutline = new THREE.Shape(); traceRoundedRect( faceOutline, -width / 2 - facePad, -height / 2 - facePad, width + facePad * 2, height + facePad * 2, radius + facePad ); const faceHole = new THREE.Path(); traceRoundedRect( faceHole, -slot.width / 2, slot.y - slot.height / 2, slot.width, slot.height, slot.height / 2 ); faceOutline.holes.push(faceHole); const face = new THREE.ShapeGeometry(faceOutline, 24); const position = face.getAttribute('position'); const uv = face.getAttribute('uv'); for (let i = 0; i < position.count; i++) { uv.setXY(i, (position.getX(i) + width / 2) / width, (position.getY(i) + height / 2) / height); } uv.needsUpdate = true; return { body, face }; }; const buildClampGeometry = (width: number) => { const shape = new THREE.Shape(); const w = width * 1.16; traceRoundedRect(shape, -w / 2 + 0.014, -CLAMP_BODY / 2 + 0.014, w - 0.028, CLAMP_BODY - 0.028, 0.024); const geometry = new THREE.ExtrudeGeometry(shape, { depth: 0.02, bevelEnabled: true, bevelThickness: 0.014, bevelSize: 0.014, bevelSegments: 6, curveSegments: 10 }); geometry.translate(0, 0, -0.01); return geometry; }; const buildBandGeometry = (count: number) => { const columns = BAND_COLUMNS.length; const geometry = new THREE.BufferGeometry(); geometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array(count * columns * 3), 3)); geometry.setAttribute('normal', new THREE.BufferAttribute(new Float32Array(count * columns * 3), 3)); geometry.setAttribute('uv', new THREE.BufferAttribute(new Float32Array(count * columns * 2), 2)); const index: number[] = []; for (let i = 0; i < count - 1; i++) { for (let c = 0; c < columns - 1; c++) { const a = i * columns + c; index.push(a, a + columns, a + 1, a + 1, a + columns, a + columns + 1); } } geometry.setIndex(index); return geometry; }; const buildEnvironment = (renderer: THREE.WebGLRenderer) => { const scene = new THREE.Scene(); scene.background = new THREE.Color(0.035, 0.035, 0.04); const geometry = new THREE.PlaneGeometry(1, 1); const materials: THREE.Material[] = []; const panel = (intensity: number, position: [number, number, number], scale: [number, number], rotation = 0) => { const material = new THREE.MeshBasicMaterial({ color: new THREE.Color(intensity, intensity, intensity), side: THREE.DoubleSide }); materials.push(material); const mesh = new THREE.Mesh(geometry, material); mesh.position.set(...position); mesh.scale.set(scale[0], scale[1], 1); mesh.lookAt(0, 0, 0); mesh.rotateZ(rotation); scene.add(mesh); }; panel(2.6, [0, 4.5, 8], [9, 4]); panel(6, [-5.5, 0.5, 7], [0.9, 14]); panel(4, [5, -0.5, 8], [0.6, 14]); panel(3.5, [0, -1, 9], [24, 0.35], Math.PI / 3); panel(2.5, [1, 2.5, 9], [24, 0.2], Math.PI / 3); panel(1.4, [0, 6, -6], [12, 4]); panel(0.5, [0, -7, 1], [16, 6]); panel(0.9, [8, 0, -2], [4, 10]); const pmrem = new THREE.PMREMGenerator(renderer); const target = pmrem.fromScene(scene, 0.035); pmrem.dispose(); geometry.dispose(); materials.forEach(material => material.dispose()); return target; }; const makeCanvasTexture = (canvas: HTMLCanvasElement, anisotropy: number) => { const texture = new THREE.CanvasTexture(canvas); texture.colorSpace = THREE.SRGBColorSpace; texture.anisotropy = anisotropy; return texture; }; const buildGrainTexture = () => { const size = 128; const canvas = document.createElement('canvas'); canvas.width = size; canvas.height = size; const ctx = canvas.getContext('2d'); if (!ctx) return new THREE.CanvasTexture(canvas); const random = seeded(7); const field = Float32Array.from({ length: size * size }, () => random()); const height = (x: number, y: number) => { let sum = 0; for (let j = -1; j <= 1; j++) { for (let i = -1; i <= 1; i++) sum += field[((y + j + size) % size) * size + ((x + i + size) % size)]; } return (sum / 9) * 1.6; }; const image = ctx.createImageData(size, size); for (let y = 0; y < size; y++) { for (let x = 0; x < size; x++) { const nx = height((x - 1 + size) % size, y) - height((x + 1) % size, y); const ny = height(x, (y - 1 + size) % size) - height(x, (y + 1) % size); const length = Math.hypot(nx, ny, 1); const i = (y * size + x) * 4; image.data[i] = ((nx / length) * 0.5 + 0.5) * 255; image.data[i + 1] = ((ny / length) * 0.5 + 0.5) * 255; image.data[i + 2] = ((1 / length) * 0.5 + 0.5) * 255; image.data[i + 3] = 255; } } ctx.putImageData(image, 0, 0); const texture = new THREE.CanvasTexture(canvas); texture.wrapS = THREE.RepeatWrapping; texture.wrapT = THREE.RepeatWrapping; texture.repeat.set(5, 7); return texture; }; const buildWeaveTexture = () => { const size = 128; const threads = 8; const random = seeded(19); const fiber = Float32Array.from({ length: size * size }, () => random()); const profile = (f: number) => Math.sqrt(Math.max(0, 1 - 4 * f * f)); const height = (x: number, y: number) => { const px = ((x % size) + size) % size; const py = ((y % size) + size) % size; const u = (px / size) * threads; const v = (py / size) * threads; const cu = Math.floor(u); const cv = Math.floor(v); const fu = u - cu - 0.5; const fv = v - cv - 0.5; const lift = (cu + cv) % 2 === 0; const warp = profile(fu) * (0.55 + 0.45 * Math.cos(fv * Math.PI * (lift ? 1 : 0.6))); const weft = profile(fv) * (0.55 + 0.45 * Math.cos(fu * Math.PI * (lift ? 0.6 : 1))); return (lift ? Math.max(warp, weft * 0.7) : Math.max(weft, warp * 0.7)) + fiber[py * size + px] * 0.08; }; const data = new Uint8Array(size * size * 4); for (let y = 0; y < size; y++) { for (let x = 0; x < size; x++) { const nx = (height(x - 1, y) - height(x + 1, y)) * 1.6; const ny = (height(x, y - 1) - height(x, y + 1)) * 1.6; const length = Math.hypot(nx, ny, 1); const i = (y * size + x) * 4; data[i] = ((nx / length) * 0.5 + 0.5) * 255; data[i + 1] = ((ny / length) * 0.5 + 0.5) * 255; data[i + 2] = ((1 / length) * 0.5 + 0.5) * 255; data[i + 3] = 255; } } const texture = new THREE.DataTexture(data, size, size); texture.wrapS = THREE.RepeatWrapping; texture.wrapT = THREE.RepeatWrapping; texture.magFilter = THREE.LinearFilter; texture.minFilter = THREE.LinearMipmapLinearFilter; texture.generateMipmaps = true; texture.needsUpdate = true; return texture; }; const drawFitted = ( ctx: CanvasRenderingContext2D, image: HTMLImageElement, width: number, height: number, fit: ImageFit ) => { const scale = (fit === 'contain' ? Math.min : Math.max)(width / image.width, height / image.height); const w = image.width * scale; const h = image.height * scale; ctx.drawImage(image, (width - w) / 2, (height - h) / 2, w, h); }; const paintFace = (canvas: HTMLCanvasElement, image: HTMLImageElement | null, color: Rgb, fit: ImageFit) => { const ctx = canvas.getContext('2d'); if (!ctx) return; ctx.fillStyle = toCss(color); ctx.fillRect(0, 0, canvas.width, canvas.height); if (image) drawFitted(ctx, image, canvas.width, canvas.height, fit); }; const paintStrap = (canvas: HTMLCanvasElement, image: HTMLImageElement | null, color: Rgb) => { const across = 192; const along = image ? Math.max(64, Math.round((image.width / image.height) * across)) : across * 2; canvas.width = across; canvas.height = along; const ctx = canvas.getContext('2d'); if (!ctx) return along / across; ctx.fillStyle = toCss(color); ctx.fillRect(0, 0, across, along); if (image) { ctx.save(); ctx.translate(across, 0); ctx.rotate(Math.PI / 2); ctx.drawImage(image, 0, 0, along, across); ctx.restore(); return along / across; } const ink: Rgb = luminance(color) > 0.5 ? [0, 0, 0] : [1, 1, 1]; ctx.fillStyle = toCss(ink, 0.05); for (let y = 0; y < along; y += 4) ctx.fillRect(0, y, across, 1); ctx.fillStyle = toCss(ink, 0.2); for (let y = 0; y < along; y += 14) { ctx.fillRect(across * 0.075, y, 2, 8); ctx.fillRect(across * 0.925 - 2, y, 2, 8); } return along / across; }; const createSimulation = (): Simulation => { const vectors = () => Array.from({ length: JOINTS + 1 }, () => new THREE.Vector3()); return { nodes: vectors(), previous: vectors(), velocities: vectors(), lengths: new Float64Array(JOINTS), impulses: new Float64Array(JOINTS), rest: 1, anchor: new THREE.Vector3(), body: { position: new THREE.Vector3(), previous: new THREE.Vector3(), velocity: new THREE.Vector3(), quaternion: new THREE.Quaternion(), previousQuaternion: new THREE.Quaternion(), angular: new THREE.Vector3(), mass: 1, inverseInertia: new THREE.Vector3(1, 1, 1), hang: new THREE.Vector3() }, grab: null, turn: 0, twist: 0, twistRaw: 0, calm: 0 }; }; const scratch = { a: new THREE.Vector3(), b: new THREE.Vector3(), c: new THREE.Vector3(), d: new THREE.Vector3(), e: new THREE.Vector3(), f: new THREE.Vector3(), g: new THREE.Vector3(), pin: new THREE.Vector3(), q: new THREE.Quaternion(), r: new THREE.Quaternion() }; const applyInverseInertia = (body: Body, vector: THREE.Vector3, out: THREE.Vector3) => { scratch.r.copy(body.quaternion).invert(); out.copy(vector).applyQuaternion(scratch.r); out.set(out.x * body.inverseInertia.x, out.y * body.inverseInertia.y, out.z * body.inverseInertia.z); return out.applyQuaternion(body.quaternion); }; const rotateBody = (q: THREE.Quaternion, w: THREE.Vector3) => { const { x: qx, y: qy, z: qz, w: qw } = q; q.x += 0.5 * (w.x * qw + w.y * qz - w.z * qy); q.y += 0.5 * (w.y * qw + w.z * qx - w.x * qz); q.z += 0.5 * (w.z * qw + w.x * qy - w.y * qx); q.w += 0.5 * (-w.x * qx - w.y * qy - w.z * qz); q.normalize(); }; const bodyWeight = (body: Body, r: THREE.Vector3, normal: THREE.Vector3) => { const rn = scratch.c.crossVectors(r, normal); return 1 / body.mass + rn.dot(applyInverseInertia(body, rn, scratch.d)); }; const pushBody = (body: Body, r: THREE.Vector3, impulse: THREE.Vector3) => { body.position.addScaledVector(impulse, 1 / body.mass); rotateBody(body.quaternion, applyInverseInertia(body, scratch.e.crossVectors(r, impulse), scratch.f)); }; const solveSegment = (sim: Simulation, i: number, h: number, physics: Physics) => { const { nodes, body } = sim; const a = nodes[i]; const wa = i === 0 ? 0 : NODE_WEIGHT; const last = i === JOINTS - 1; const r = scratch.g; let b = nodes[i + 1]; if (last) { r.copy(body.hang).applyQuaternion(body.quaternion); b = scratch.b.copy(body.position).add(r); } const delta = scratch.a.subVectors(b, a); const length = delta.length(); const stretch = length - sim.rest; if (stretch <= 0 || length < 1e-9) return; const normal = delta.divideScalar(length); const wb = last ? bodyWeight(body, r, normal) : NODE_WEIGHT; const rate = (length - sim.lengths[i]) / h; const tension = physics.hold * Math.tanh((physics.stiffness * stretch) / physics.hold) + physics.spring * stretch + physics.bandDamping * Math.max(0, rate); const room = tension * h * h - sim.impulses[i]; if (room <= 0) return; const lambda = Math.min(stretch / (wa + wb), room); sim.impulses[i] += lambda; if (wa) a.addScaledVector(normal, lambda * wa); if (last) pushBody(body, r, normal.multiplyScalar(-lambda)); else b.addScaledVector(normal, -lambda * wb); }; const solvePin = (body: Body, grab: Grab, target: THREE.Vector3) => { const r = scratch.g.copy(grab.local).applyQuaternion(body.quaternion); const delta = scratch.a.copy(target).sub(body.position).sub(r); const distance = delta.length(); if (distance < 1e-9) return; const normal = delta.divideScalar(distance); const lambda = distance / bodyWeight(body, r, normal); pushBody(body, r, normal.multiplyScalar(lambda)); }; const placeHanging = (sim: Simulation, layout: CardLayout, intro: boolean) => { const { nodes, previous, velocities, body, anchor } = sim; nodes[0].copy(anchor); for (let i = 1; i <= JOINTS; i++) { nodes[i].copy(nodes[i - 1]); if (intro) nodes[i].x += sim.rest; else nodes[i].y -= sim.rest; } body.quaternion.identity(); if (intro) body.quaternion.setFromAxisAngle(new THREE.Vector3(0, 0, 1), Math.PI / 2); body.hang.set(0, layout.hangY, 0); const offset = scratch.a.copy(body.hang).applyQuaternion(body.quaternion); body.position.copy(nodes[JOINTS]).sub(offset); body.previous.copy(body.position); body.previousQuaternion.copy(body.quaternion); body.velocity.set(0, 0, 0); body.angular.set(0, 0, 0); for (let i = 0; i <= JOINTS; i++) { previous[i].copy(nodes[i]); velocities[i].set(0, 0, 0); } sim.lengths.fill(sim.rest); sim.turn = 0; sim.twist = 0; sim.twistRaw = 0; sim.calm = 0; }; const configureSimulation = (sim: Simulation, layout: CardLayout, length: number) => { sim.rest = length / JOINTS; const { width, height } = layout; const body = sim.body; const t = THICKNESS + BEVEL * 2; body.mass = 1; body.inverseInertia.set( 12 / (height * height + t * t), 12 / (width * width + t * t), 12 / (width * width + height * height) ); body.hang.set(0, layout.hangY, 0); }; const stepSimulation = (sim: Simulation, dt: number, physics: Physics, time: number) => { const steps = Math.max(1, Math.ceil(dt / MAX_STEP - 1e-6)); const h = dt / steps; const { nodes, previous, velocities, body } = sim; const windX = physics.breeze * (Math.sin(time * 0.53) * 0.7 + Math.sin(time * 1.31 + 1.7) * 0.3) * 3; const windZ = physics.breeze * Math.sin(time * 0.37 + 0.6) * 2; const grab = sim.grab; const pin = scratch.pin; const nodeDrag = Math.exp(-physics.nodeDrag * h); const linearDrag = Math.exp(-physics.linearDrag * h); const angularDrag = Math.exp(-physics.angularDrag * h); for (let s = 0; s < steps; s++) { for (let i = 1; i < JOINTS; i++) { const v = velocities[i]; v.y -= physics.gravity * h; v.x += windX * h; v.z += windZ * h; previous[i].copy(nodes[i]); nodes[i].addScaledVector(v, h); } body.previous.copy(body.position); body.previousQuaternion.copy(body.quaternion); const q = body.quaternion; if (grab) { const turn = scratch.q.copy(grab.rotation).multiply(scratch.r.copy(q).invert()); if (turn.w < 0) turn.set(-turn.x, -turn.y, -turn.z, -turn.w); const torque = scratch.a.set(turn.x, turn.y, turn.z).multiplyScalar(2 * physics.grip); torque.addScaledVector(body.angular, -physics.gripDamping); body.angular.addScaledVector(applyInverseInertia(body, torque, scratch.b), h); } const up = scratch.a.set(0, 1, 0).applyQuaternion(q); const front = scratch.b.set(-up.x * up.z, -up.y * up.z, 1 - up.z * up.z); if (front.lengthSq() > 1e-3) { const facing = scratch.d.set(0, 0, 1).applyQuaternion(q); const raw = Math.atan2(scratch.e.crossVectors(front, facing).dot(up), front.dot(facing)); let turned = raw - sim.twistRaw; if (turned > Math.PI) turned -= Math.PI * 2; else if (turned < -Math.PI) turned += Math.PI * 2; sim.twist += turned; sim.twistRaw = raw; } if (!grab) { const spin = body.angular.dot(up); body.angular.addScaledVector(up, (physics.twist * (sim.turn - sim.twist) - physics.twistDamping * spin) * h); } body.velocity.y -= physics.gravity * h; body.velocity.x += windX * 0.35 * h; body.velocity.z += windZ * 0.35 * h; body.position.addScaledVector(body.velocity, h); rotateBody(body.quaternion, scratch.f.copy(body.angular).multiplyScalar(h)); sim.impulses.fill(0); if (grab) pin.lerpVectors(grab.from, grab.target, (s + 1) / steps); for (let iteration = 0; iteration < ITERATIONS; iteration++) { for (let i = 0; i < JOINTS; i++) solveSegment(sim, i, h, physics); if (grab) solvePin(body, grab, pin); } for (let i = 1; i < JOINTS; i++) { const v = velocities[i].subVectors(nodes[i], previous[i]).divideScalar(h).multiplyScalar(nodeDrag); v.multiplyScalar(1 / (1 + physics.nodeAir * v.length() * h)); } body.velocity.subVectors(body.position, body.previous).divideScalar(h); const dq = scratch.q.copy(body.previousQuaternion).invert().premultiply(body.quaternion); body.angular.set(dq.x, dq.y, dq.z).multiplyScalar((2 / h) * (dq.w < 0 ? -1 : 1)); const normal = scratch.a.set(0, 0, 1).applyQuaternion(body.quaternion); const across = body.velocity.dot(normal); const along = scratch.b.copy(body.velocity).addScaledVector(normal, -across); along.multiplyScalar(1 / (1 + physics.air * along.length() * h)); body.velocity .copy(along) .addScaledVector(normal, across / (1 + physics.broadside * Math.abs(across) * h)) .multiplyScalar(linearDrag); body.angular.multiplyScalar(angularDrag / (1 + physics.spinAir * body.angular.length() * h)); if (body.velocity.lengthSq() > 3600) body.velocity.setLength(60); if (body.angular.lengthSq() > 1600) body.angular.setLength(40); nodes[JOINTS].copy(body.hang).applyQuaternion(body.quaternion).add(body.position); for (let i = 0; i < JOINTS; i++) sim.lengths[i] = nodes[i].distanceTo(nodes[i + 1]); } if (grab) grab.from.copy(grab.target); let energy = body.velocity.lengthSq() + body.angular.lengthSq() * 0.3; for (let i = 1; i < JOINTS; i++) energy += velocities[i].lengthSq() * 0.05; sim.calm = energy < 2e-4 ? sim.calm + dt : 0; }; export function Lanyard({ frontImage, backImage, imageFit = 'cover', cardColor = '#ffffff', orientation = 'portrait', finish = 'glossy', cornerRadius = 0.3, size = 0.6, anchor = 'center', strapLength = 0.5, strapImage, strapColor = '#111111', strapWidth = 0.65, metal = 'silver', gravity = 1, damping = 0.5, elasticity = 0.5, breeze = 0.5, interactive = true, intro = true, className = '', style }: LanyardProps) { const containerRef = useRef(null); const settingsRef = useRef(null); const applyRef = useRef<(() => void) | null>(null); settingsRef.current = { frontImage, backImage, imageFit: imageFit === 'contain' ? 'contain' : 'cover', cardColor, orientation: orientation === 'landscape' ? 'landscape' : 'portrait', finish, cornerRadius, size, anchor, strapLength, strapImage, strapColor, strapWidth, metal, gravity, damping, elasticity, breeze, interactive, intro }; useEffect(() => { applyRef.current?.(); }); useEffect(() => { const container = containerRef.current; if (!container) return undefined; let renderer: THREE.WebGLRenderer; try { renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, powerPreference: 'high-performance' }); } catch { return undefined; } renderer.setClearColor(0x000000, 0); renderer.outputColorSpace = THREE.SRGBColorSpace; renderer.toneMapping = THREE.NeutralToneMapping; renderer.toneMappingExposure = 1; const canvas = renderer.domElement; canvas.className = 'block w-full h-full'; canvas.setAttribute('aria-hidden', 'true'); container.appendChild(canvas); const anisotropy = Math.min(8, renderer.capabilities.getMaxAnisotropy()); const scene = new THREE.Scene(); const environment = buildEnvironment(renderer); scene.environment = environment.texture; const camera = new THREE.PerspectiveCamera(FOV, 1, 0.1, 200); const keyLight = new THREE.DirectionalLight(0xffffff, 1.6); keyLight.position.set(-2.5, 4, 6); const fillLight = new THREE.DirectionalLight(0xffffff, 0.35); fillLight.position.set(3, -1, 4); scene.add(keyLight, fillLight); const imageCache = new Map>(); const images: Images = { front: null, back: null, strap: null }; const frontCanvas = document.createElement('canvas'); const backCanvas = document.createElement('canvas'); const strapCanvas = document.createElement('canvas'); const frontTexture = makeCanvasTexture(frontCanvas, anisotropy); const backTexture = makeCanvasTexture(backCanvas, anisotropy); const strapTexture = makeCanvasTexture(strapCanvas, anisotropy); strapTexture.wrapS = THREE.ClampToEdgeWrapping; strapTexture.wrapT = THREE.RepeatWrapping; const grain = buildGrainTexture(); const weave = buildWeaveTexture(); const foilUniforms = { foilStrength: { value: 0 }, foilAspect: { value: 1.4 }, foilKey: { value: new THREE.Vector3() }, foilFill: { value: new THREE.Vector3() }, foilTop: { value: new THREE.Vector3() } }; const injectFoil = (shader: THREE.WebGLProgramParametersWithUniforms) => { Object.assign(shader.uniforms, foilUniforms); shader.vertexShader = shader.vertexShader .replace('#include ', `#include \n${FOIL_VERTEX_HEAD}`) .replace('#include ', `#include \n${FOIL_VERTEX_BODY}`); shader.fragmentShader = shader.fragmentShader .replace('#include ', `#include \n${FOIL_FRAGMENT_HEAD}`) .replace('#include ', `${FOIL_FRAGMENT_BODY}\n#include `); }; const frontMaterial = new THREE.MeshPhysicalMaterial({ map: frontTexture, normalMap: grain, normalScale: new THREE.Vector2(0.06, 0.06) }); const backMaterial = new THREE.MeshPhysicalMaterial({ map: backTexture, normalMap: grain, normalScale: new THREE.Vector2(0.06, 0.06) }); frontMaterial.onBeforeCompile = injectFoil; backMaterial.onBeforeCompile = injectFoil; const edgeMaterial = new THREE.MeshPhysicalMaterial(); const metalMaterial = new THREE.MeshStandardMaterial({ metalness: 1 }); const bandMaterial = new THREE.MeshPhysicalMaterial({ map: strapTexture, normalMap: weave, normalScale: new THREE.Vector2(0.7, 0.7), roughness: 0.68, sheen: 1, sheenRoughness: 0.42, sheenColor: new THREE.Color(0.32, 0.32, 0.34), side: THREE.DoubleSide }); const cardGroup = new THREE.Group(); const bodyMesh = new THREE.Mesh(undefined, edgeMaterial); const frontMesh = new THREE.Mesh(undefined, frontMaterial); const backMesh = new THREE.Mesh(undefined, backMaterial); const ring = new THREE.Mesh(new THREE.TorusGeometry(RING_RADIUS, RING_TUBE, 18, 72), metalMaterial); ring.rotation.y = Math.PI / 2 - 0.7; cardGroup.add(bodyMesh, frontMesh, backMesh, ring); scene.add(cardGroup); const bandGeometry = buildBandGeometry(SAMPLES); const band = new THREE.Mesh(bandGeometry, bandMaterial); band.frustumCulled = false; scene.add(band); const clampGroup = new THREE.Group(); const clampMesh = new THREE.Mesh(buildClampGeometry(STRAP_WIDTH), metalMaterial); clampMesh.position.y = EYELET_RADIUS + CLAMP_BODY / 2 - 0.004; const eyelet = new THREE.Mesh(new THREE.TorusGeometry(EYELET_RADIUS, 0.0105, 14, 40), metalMaterial); clampGroup.add(clampMesh, eyelet); scene.add(clampGroup); const sim = createSimulation(); const controls: THREE.Vector3[] = []; const mouth = new THREE.Vector3(); const tuck = new THREE.Vector3(); const curve = new THREE.CatmullRomCurve3(controls, false, 'centripetal'); const view = { width: 1, height: 1 }; let layout = cardLayout('portrait', 0.3); let applied: Applied = {}; let strapScale = STRAP_WIDTH; let tileRatio = 2; let raf = 0; let last = performance.now(); let time = 0; let visible = true; let alive = true; let placed = false; let hovering = false; let press: Press | null = null; let imageToken = 0; const reducedMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false; const paintFaces = () => { const s = settingsRef.current!; const color = parseColor(s.cardColor, [1, 1, 1]); const width = FACE_WIDTH; const height = Math.round((FACE_WIDTH * layout.height) / layout.width); if (frontCanvas.width !== width || frontCanvas.height !== height) { frontCanvas.width = width; frontCanvas.height = height; backCanvas.width = width; backCanvas.height = height; frontTexture.dispose(); backTexture.dispose(); } paintFace(frontCanvas, images.front, color, s.imageFit); paintFace(backCanvas, images.back || images.front, color, s.imageFit); frontTexture.needsUpdate = true; backTexture.needsUpdate = true; start(); }; const repaintStrap = () => { const s = settingsRef.current!; tileRatio = paintStrap(strapCanvas, images.strap, parseColor(s.strapColor, [0.07, 0.07, 0.07])); weave.repeat.set(2, 2 * tileRatio); strapTexture.dispose(); strapTexture.needsUpdate = true; start(); }; const frameView = () => { const s = settingsRef.current!; const aspect = view.width / view.height; let viewHeight = layout.height / clamp(s.size, 0.15, 0.9); const minimumWidth = layout.width / 0.72; if (viewHeight * aspect < minimumWidth) viewHeight = minimumWidth / aspect; const viewWidth = viewHeight * aspect; camera.aspect = aspect; camera.position.set(0, 0, viewHeight / 2 / Math.tan((FOV * Math.PI) / 360)); camera.lookAt(0, 0, 0); camera.updateProjectionMatrix(); camera.updateMatrixWorld(); foilUniforms.foilKey.value.set(-2.5, 4, 6).normalize().transformDirection(camera.matrixWorldInverse); foilUniforms.foilFill.value.set(3, -1, 4).normalize().transformDirection(camera.matrixWorldInverse); foilUniforms.foilTop.value.set(0.5, 4.5, 8).normalize().transformDirection(camera.matrixWorldInverse); const anchorX = ((ANCHORS[s.anchor] ?? 0.5) - 0.5) * viewWidth; const anchorY = viewHeight / 2 + 0.2; const cardTop = viewHeight / 2 - viewHeight * mix(0.12, 0.42, clamp(s.strapLength, 0, 1)); const hangTop = cardTop + (layout.hangY - layout.height / 2); sim.anchor.set(anchorX, anchorY, 0); configureSimulation(sim, layout, anchorY - hangTop); sim.nodes[0].copy(sim.anchor); sim.previous[0].copy(sim.anchor); }; const apply = () => { const s = settingsRef.current!; const layoutKey = `${s.orientation}|${s.cornerRadius}`; if (layoutKey !== applied.layoutKey) { layout = cardLayout(s.orientation, s.cornerRadius); const geometry = buildCardGeometry(layout); bodyMesh.geometry.dispose(); frontMesh.geometry.dispose(); backMesh.geometry.dispose(); bodyMesh.geometry = geometry.body; frontMesh.geometry = geometry.face; backMesh.geometry = geometry.face.clone(); frontMesh.position.z = THICKNESS / 2 + BEVEL + 0.0006; backMesh.rotation.y = Math.PI; backMesh.position.z = -(THICKNESS / 2 + BEVEL + 0.0006); ring.position.set(0, layout.ringY, 0); applied.framingKey = ''; } const framingKey = `${layoutKey}|${s.size}|${s.anchor}|${s.strapLength}|${view.width}|${view.height}`; if (framingKey !== applied.framingKey) { frameView(); if (!placed) { placeHanging(sim, layout, s.intro && !reducedMotion); placed = true; } else if (layoutKey !== applied.layoutKey) { placeHanging(sim, layout, false); } } const imageKey = `${s.frontImage}|${s.backImage}|${s.strapImage}`; if (imageKey !== applied.imageKey) { const token = ++imageToken; Promise.all([ loadImage(imageCache, s.frontImage), loadImage(imageCache, s.backImage), loadImage(imageCache, s.strapImage) ]).then(([front, back, strap]) => { if (!alive || token !== imageToken) return; images.front = front; images.back = back; images.strap = strap; paintFaces(); repaintStrap(); }); } const faceKey = `${layoutKey}|${s.cardColor}|${s.imageFit}`; if (faceKey !== applied.faceKey) paintFaces(); if (s.strapColor !== applied.strapColor) repaintStrap(); const finish = FINISHES[s.finish] || FINISHES.glossy; const card = parseColor(s.cardColor, [1, 1, 1]); [frontMaterial, backMaterial].forEach(material => { material.roughness = finish.roughness; material.metalness = finish.metalness; material.clearcoat = finish.clearcoat; material.clearcoatRoughness = finish.clearcoatRoughness; material.anisotropy = finish.anisotropy; }); foilUniforms.foilStrength.value = finish.foil; foilUniforms.foilAspect.value = layout.height / layout.width; edgeMaterial.color.setRGB(card[0], card[1], card[2], THREE.SRGBColorSpace); edgeMaterial.roughness = Math.min(finish.roughness, 0.35); edgeMaterial.metalness = finish.metalness; edgeMaterial.clearcoat = 1; edgeMaterial.clearcoatRoughness = 0.08; const metalLook = METALS[s.metal] || METALS.silver; metalMaterial.color.set(metalLook.color); metalMaterial.roughness = metalLook.roughness; strapScale = STRAP_WIDTH * clamp(s.strapWidth, 0.4, 2); if (strapScale !== applied.strapScale) { clampMesh.geometry.dispose(); clampMesh.geometry = buildClampGeometry(strapScale); } canvas.style.touchAction = s.interactive ? 'pan-y' : 'auto'; applied = { layoutKey, framingKey, imageKey, faceKey, strapColor: s.strapColor, strapScale }; start(); }; const points = Array.from({ length: SAMPLES }, () => new THREE.Vector3()); const sides = Array.from({ length: SAMPLES }, () => new THREE.Vector3()); const bends = BAND_BEND.map((angle): [number, number] => [Math.cos(angle), Math.sin(angle)]); const work = { tangent: new THREE.Vector3(), toCamera: new THREE.Vector3(), basis: new THREE.Matrix4(), up: new THREE.Vector3(), across: new THREE.Vector3(), facing: new THREE.Vector3(), end: new THREE.Vector3() }; const updateBand = () => { const hang = sim.nodes[JOINTS]; const reach = EYELET_RADIUS + CLAMP_BODY + 0.05; let guide = JOINTS - 1; while (guide > 0 && sim.nodes[guide].distanceTo(hang) < reach * 1.1) guide--; const axis = work.up.subVectors(sim.nodes[guide], hang); if (axis.lengthSq() < 1e-8) axis.set(0, 1, 0).applyQuaternion(sim.body.quaternion); axis.normalize(); mouth.copy(hang).addScaledVector(axis, reach); tuck.copy(hang).addScaledVector(axis, EYELET_RADIUS + CLAMP_BODY * 0.35); controls.length = 0; for (let i = 0; i <= guide; i++) controls.push(sim.nodes[i]); controls.push(mouth, tuck); curve.updateArcLengths(); for (let i = 0; i < SAMPLES; i++) curve.getPointAt(i / (SAMPLES - 1), points[i]); const length = curve.getLength(); const held = 1 - mouth.distanceTo(tuck) / Math.max(length, 0.001); const position = bandGeometry.getAttribute('position'); const normal = bandGeometry.getAttribute('normal'); const uv = bandGeometry.getAttribute('uv'); const columns = BAND_COLUMNS.length; const restLength = sim.rest * JOINTS; const repeats = restLength / (strapScale * tileRatio); const width = strapScale / Math.pow(Math.max(1, length / Math.max(restLength, 0.001)), 0.35); const { tangent, toCamera, across, facing } = work; for (let i = 0; i < SAMPLES; i++) { tangent.subVectors(points[Math.min(SAMPLES - 1, i + 1)], points[Math.max(0, i - 1)]); if (tangent.lengthSq() < 1e-12) tangent.set(0, -1, 0); tangent.normalize(); toCamera.subVectors(camera.position, points[i]).normalize(); const side = sides[i].crossVectors(toCamera, tangent); if (side.lengthSq() < 1e-10) side.copy(i > 0 ? sides[i - 1] : scratch.a.set(1, 0, 0)); side.normalize(); if (i > 0 && side.dot(sides[i - 1]) < 0) side.negate(); const angle = -sim.twist * Math.pow(Math.min(1, i / (SAMPLES - 1) / held), 1.3); facing.crossVectors(tangent, side); across.copy(side).multiplyScalar(Math.cos(angle)).addScaledVector(facing, Math.sin(angle)); facing.crossVectors(tangent, across); const p = points[i]; const v = (1 - i / (SAMPLES - 1)) * repeats; for (let c = 0; c < columns; c++) { const k = i * columns + c; const offset = (BAND_COLUMNS[c] - 0.5) * width; const [bendCos, bendSin] = bends[c]; position.setXYZ(k, p.x + across.x * offset, p.y + across.y * offset, p.z + across.z * offset); normal.setXYZ( k, facing.x * bendCos + across.x * bendSin, facing.y * bendCos + across.y * bendSin, facing.z * bendCos + across.z * bendSin ); uv.setXY(k, BAND_COLUMNS[c], v); } } work.end.copy(across); position.needsUpdate = true; normal.needsUpdate = true; uv.needsUpdate = true; across.copy(work.end).addScaledVector(axis, -work.end.dot(axis)).normalize(); facing.crossVectors(across, axis).normalize(); work.basis.makeBasis(across, axis, facing); clampGroup.quaternion.setFromRotationMatrix(work.basis); clampGroup.position.copy(hang); }; const render = () => { cardGroup.position.copy(sim.body.position); cardGroup.quaternion.copy(sim.body.quaternion); updateBand(); renderer.render(scene, camera); }; const physics = (): Physics => { const s = settingsRef.current!; const gravity = 40 * clamp(s.gravity, 0, 3); const weight = Math.max(gravity, 20); const springy = clamp(s.elasticity, 0, 1); const settle = clamp(s.damping, 0, 1); return { gravity, hold: weight * mix(2.2, 5.5, springy), stiffness: weight * 10 * JOINTS, spring: weight * mix(0.1, 0.4, springy) * JOINTS, bandDamping: weight * mix(0.3, 0.08, springy) * JOINTS, linearDrag: 0.25 * Math.pow(16, settle), angularDrag: 0.5 * Math.pow(12, settle), air: 0.15, broadside: 0.5, spinAir: 0.03, nodeDrag: 2, nodeAir: 0.2, twist: 30, twistDamping: 3, grip: 40, gripDamping: 6, breeze: reducedMotion ? 0 : clamp(s.breeze, 0, 1) }; }; const tick = (now: number) => { raf = 0; if (!alive) return; const dt = Math.min(1 / 30, Math.max(1 / 240, (now - last) / 1000)); last = now; time += dt; const current = physics(); stepSimulation(sim, dt, current, time); const body = sim.body; if (!Number.isFinite(body.position.x + body.position.y + body.position.z + body.quaternion.w)) { sim.grab = null; placeHanging(sim, layout, false); } render(); const resting = sim.calm > 1.2 && !sim.grab && current.breeze === 0; if (visible && !resting) raf = requestAnimationFrame(tick); }; const start = () => { if (raf || !visible || !alive) return; sim.calm = 0; last = performance.now(); raf = requestAnimationFrame(tick); }; const raycaster = new THREE.Raycaster(); const pointer = new THREE.Vector2(); const toPointer = (event: Point) => { const rect = canvas.getBoundingClientRect(); pointer.set( ((event.clientX - rect.left) / rect.width) * 2 - 1, -((event.clientY - rect.top) / rect.height) * 2 + 1 ); raycaster.setFromCamera(pointer, camera); }; const pickCard = () => { cardGroup.updateMatrixWorld(); const hits = raycaster.intersectObjects([bodyMesh, frontMesh, backMesh], false); return hits[0] || null; }; const setCursor = (value: string) => { if (canvas.style.cursor !== value) canvas.style.cursor = value; }; const flip = (point: THREE.Vector3) => { const body = sim.body; const up = scratch.a.set(0, 1, 0).applyQuaternion(body.quaternion); let direction = sim.turn > 0 ? -1 : 1; if (sim.turn === 0) { const away = scratch.c.subVectors(point, camera.position).normalize(); direction = scratch.b.subVectors(point, body.position).cross(away).dot(up) < 0 ? -1 : 1; } sim.turn = sim.turn === 0 ? Math.PI * direction : 0; body.angular.addScaledVector(up, FLIP_SPIN * direction); }; const onPointerDown = (event: PointerEvent) => { if (!settingsRef.current!.interactive || event.button > 0) return; toPointer(event); const hit = pickCard(); if (!hit) return; sim.grab = { local: hit.point.clone().sub(sim.body.position).applyQuaternion(sim.body.quaternion.clone().invert()), rotation: sim.body.quaternion.clone(), reach: hit.distance, from: hit.point.clone(), target: hit.point.clone() }; press = { x: event.clientX, y: event.clientY, time: performance.now(), point: hit.point.clone() }; canvas.setPointerCapture?.(event.pointerId); setCursor('grabbing'); event.preventDefault(); start(); }; const onPointerMove = (event: PointerEvent) => { if (!settingsRef.current!.interactive) return; toPointer(event); if (sim.grab) { if (press && Math.hypot(event.clientX - press.x, event.clientY - press.y) > 6) press = null; raycaster.ray.at(sim.grab.reach, sim.grab.target); start(); return; } if (event.pointerType === 'touch') return; hovering = !!pickCard(); setCursor(hovering ? 'grab' : ''); }; const onPointerUp = (event: PointerEvent) => { if (!sim.grab) return; sim.grab = null; if (press && event.type === 'pointerup' && performance.now() - press.time < 450) flip(press.point); press = null; canvas.releasePointerCapture?.(event.pointerId); setCursor(hovering && event.pointerType !== 'touch' ? 'grab' : ''); start(); }; const onTouchStart = (event: TouchEvent) => { if (!settingsRef.current!.interactive || event.touches.length !== 1) return; toPointer(event.touches[0]); if (pickCard()) event.preventDefault(); }; canvas.addEventListener('pointerdown', onPointerDown); canvas.addEventListener('pointermove', onPointerMove); canvas.addEventListener('pointerup', onPointerUp); canvas.addEventListener('pointercancel', onPointerUp); canvas.addEventListener('lostpointercapture', onPointerUp); canvas.addEventListener('touchstart', onTouchStart, { passive: false }); const resize = () => { view.width = Math.max(1, container.clientWidth); view.height = Math.max(1, container.clientHeight); renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2)); renderer.setSize(view.width, view.height, false); apply(); render(); }; const resizeObserver = new ResizeObserver(resize); resizeObserver.observe(container); const intersectionObserver = new IntersectionObserver(([entry]) => { visible = entry.isIntersecting; if (visible) start(); }); intersectionObserver.observe(container); const onVisibility = () => { if (!document.hidden) start(); }; document.addEventListener('visibilitychange', onVisibility); applyRef.current = apply; resize(); return () => { alive = false; cancelAnimationFrame(raf); applyRef.current = null; resizeObserver.disconnect(); intersectionObserver.disconnect(); document.removeEventListener('visibilitychange', onVisibility); canvas.removeEventListener('pointerdown', onPointerDown); canvas.removeEventListener('pointermove', onPointerMove); canvas.removeEventListener('pointerup', onPointerUp); canvas.removeEventListener('pointercancel', onPointerUp); canvas.removeEventListener('lostpointercapture', onPointerUp); canvas.removeEventListener('touchstart', onTouchStart); [bodyMesh, frontMesh, backMesh, ring, clampMesh, eyelet, band].forEach(mesh => mesh.geometry?.dispose()); [frontMaterial, backMaterial, edgeMaterial, metalMaterial, bandMaterial].forEach(material => material.dispose()); [frontTexture, backTexture, strapTexture, grain, weave].forEach(texture => texture.dispose()); environment.dispose(); renderer.dispose(); if (canvas.parentNode) canvas.parentNode.removeChild(canvas); }; }, []); return (

); } export default function LanyardDemo() { return (

); }