|
| 1 | +import React, { useRef, useMemo } from "react"; |
| 2 | +import { BufferGeometry, Float32BufferAttribute, Color, BufferAttribute, InterleavedBufferAttribute, MathUtils, Mesh, DoubleSide } from "three"; |
| 3 | +import { useFrame } from "@react-three/fiber"; |
| 4 | + |
| 5 | +// Helper function to generate random vertices |
| 6 | +const generateVertices = (points: number = 55, size: number = 4): number[] => { |
| 7 | + const vertices: number[] = []; |
| 8 | + for (let i = 0; i < points; i++) { |
| 9 | + const x = Math.random() * size - size * 0.5; |
| 10 | + const y = Math.random() * size - size * 0.5; |
| 11 | + const z = Math.random() * size - size * 0.5; |
| 12 | + vertices.push(x, y, z); |
| 13 | + } |
| 14 | + return vertices; |
| 15 | +}; |
| 16 | + |
| 17 | +// Helper function to generate colors based on vertices |
| 18 | +const generateColors = (vertices: number[], colormod: number = 1): number[] => { |
| 19 | + const colors: number[] = []; |
| 20 | + for (let i = 0; i < vertices.length; i += 3) { |
| 21 | + const x = vertices[i]; |
| 22 | + const y = vertices[i + 1]; |
| 23 | + const z = vertices[i + 2]; |
| 24 | + const distance = Math.sqrt(x * x + y * y + z * z); |
| 25 | + const color = new Color(); |
| 26 | + const hue = distance * colormod % 1; |
| 27 | + color.setHSL(hue, 1, 0.5); |
| 28 | + colors.push(color.r, color.g, color.b); |
| 29 | + } |
| 30 | + return colors; |
| 31 | +}; |
| 32 | + |
| 33 | +// Helper function to interpolate mesh attributes |
| 34 | +const interpolateAttributes = (attr: BufferAttribute | InterleavedBufferAttribute, target: number[], delta: number) => { |
| 35 | + for (let i = 0; i < attr.count * 3; i++) { |
| 36 | + attr.array[i] = MathUtils.lerp(attr.array[i] as number, target[i], 2 * delta); |
| 37 | + } |
| 38 | + attr.needsUpdate = true; |
| 39 | +}; |
| 40 | + |
| 41 | +// Helper function to rotate a mesh |
| 42 | +const rotateMesh = (mesh: Mesh | null, delta: number) => { |
| 43 | + if (mesh) { |
| 44 | + mesh.rotation.y += 0.05 * delta; |
| 45 | + mesh.rotation.x += 0.05 * delta; |
| 46 | + } |
| 47 | +}; |
| 48 | + |
| 49 | +// MorphingMesh component |
| 50 | +const MorphingMesh: React.FC = () => { |
| 51 | + const solidMeshRef = useRef<Mesh>(null); |
| 52 | + const wireframeMeshRef = useRef<Mesh>(null); |
| 53 | + |
| 54 | + // Use refs instead of state for tracking morphing progress and targets |
| 55 | + const morphProgressRef = useRef(0); |
| 56 | + const morphTargetRef = useRef<number[] | null>(null); |
| 57 | + const targetColorsRef = useRef<number[]>([]); |
| 58 | + |
| 59 | + // Memoizing the initial vertices and colors |
| 60 | + const initialVertices = useMemo(() => generateVertices(), []); |
| 61 | + const initialColors = useMemo(() => generateColors(initialVertices), [initialVertices]); |
| 62 | + |
| 63 | + // Create the geometry with position and color attributes |
| 64 | + const geometry = useMemo(() => { |
| 65 | + const geo = new BufferGeometry(); |
| 66 | + geo.setAttribute("position", new Float32BufferAttribute(initialVertices, 3)); |
| 67 | + geo.setAttribute("color", new Float32BufferAttribute(initialColors, 3)); |
| 68 | + return geo; |
| 69 | + }, [initialVertices, initialColors]); |
| 70 | + |
| 71 | + // handleClick generates new random geometry and colors |
| 72 | + // and sets the morph target to the new geometry |
| 73 | + // click position is use as modifier for color generation |
| 74 | + const handleClick = (event: any) => { |
| 75 | + const { point } = event; |
| 76 | + const colormod = Math.abs(point.x + point.y - point.z) * Math.random(); |
| 77 | + const newVertices = generateVertices(); |
| 78 | + const newColors = generateColors(newVertices, colormod); |
| 79 | + morphTargetRef.current = newVertices; |
| 80 | + targetColorsRef.current = newColors; |
| 81 | + morphProgressRef.current = 0; |
| 82 | + }; |
| 83 | + |
| 84 | + useFrame((_, delta) => { |
| 85 | + if (solidMeshRef.current && wireframeMeshRef.current) { |
| 86 | + |
| 87 | + if (morphTargetRef.current) { |
| 88 | + const positionAttr = solidMeshRef.current.geometry.attributes.position; |
| 89 | + const colorAttr = solidMeshRef.current.geometry.attributes.color; |
| 90 | + |
| 91 | + interpolateAttributes(positionAttr, morphTargetRef.current, delta); |
| 92 | + interpolateAttributes(colorAttr, targetColorsRef.current, delta); |
| 93 | + |
| 94 | + morphProgressRef.current += delta; |
| 95 | + if (morphProgressRef.current >= 1) { |
| 96 | + morphProgressRef.current = 1; |
| 97 | + morphTargetRef.current = null; |
| 98 | + targetColorsRef.current = []; |
| 99 | + } |
| 100 | + |
| 101 | + solidMeshRef.current.geometry.computeVertexNormals(); |
| 102 | + wireframeMeshRef.current!.geometry = solidMeshRef.current.geometry; |
| 103 | + } |
| 104 | + |
| 105 | + rotateMesh(solidMeshRef.current, delta); |
| 106 | + rotateMesh(wireframeMeshRef.current, delta); |
| 107 | + } |
| 108 | + }); |
| 109 | + |
| 110 | + return ( |
| 111 | + <> |
| 112 | + {/* Solid Mesh */} |
| 113 | + <mesh ref={solidMeshRef} geometry={geometry} onClick={handleClick}> |
| 114 | + <meshBasicMaterial vertexColors transparent opacity={0.3} side={DoubleSide} /> |
| 115 | + </mesh> |
| 116 | + |
| 117 | + {/* Wireframe Mesh */} |
| 118 | + <mesh ref={wireframeMeshRef} geometry={geometry}> |
| 119 | + <meshBasicMaterial vertexColors depthWrite={false} opacity={.2} transparent side={DoubleSide} wireframe /> |
| 120 | + </mesh> |
| 121 | + </> |
| 122 | + ); |
| 123 | +}; |
| 124 | + |
| 125 | +export default MorphingMesh; |
0 commit comments