@webloved: How I build with Claude 👇 Academy in bio 🔗 3D made of dots instead of solid mesh, step by step: 1. Load the model with GLTFLoader and grab the mesh, but do NOT add it to the scene. 2. Import MeshSurfaceSampler from three/examples/jsm/math/MeshSurfaceSampler. sampler.build() once. 3. Loop 60000 times, sampler.sample(vector), push x y z into a Float32Array. This spreads points evenly. Using the model's own vertices instead gives you clumps on the detailed parts and holes everywhere else. 4. new THREE.BufferGeometry(), setAttribute('position', new THREE.BufferAttribute(arr, 3)), then new THREE.Points(geo, mat). 5. THREE.PointsMaterial with size 0.02, sizeAttenuation true, color 0xffffff. Square dots read technical. Round dots need a sprite map with alphaTest 0.5. 6. Make it breathe: custom vertex shader, push each point along its normal by sin(uTime + position.x * 4.0) * 0.02. 7. Depth fade so the back is dimmer: varying float vDepth = -mvPosition.z, alpha = smoothstep(12.0, 2.0, vDepth). 8. Wings flap: split them into two Points objects, rotation.z = Math.sin(t * 6) * 0.3 with mirrored sign. Wordmark the insect flies through: 9. h1 with background: linear-gradient(90deg, #FA4C14, #FF8A4C), background-clip: text, color transparent. 10. h1 at z-index 1, canvas position absolute at z-index 2. Duplicate the h1 on top at z-index 3 and hide all letters except the front ones. Now the wings pass through the word. Two colors only: 11. Set --accent once in :root. Gradient, glow and dot tint all read from it. Two colors on black looks intentional. Five looks like a template. Save this if you want 3D that feels engineered 🔸 #claudefable5 #buildinpublic #webdesign

weblove

Open In TikTok:

Region: PT

Wednesday 29 July 2026 18:43:12 GMT