@webloved: How I build with GPT-6 Astra 👇 Academy in bio 🔗 The statue look is not a render. It is one material. 1. Load the figure as a GLB with GLTFLoader. Compress it first with gltf-pipeline -d (Draco). A 40MB scan ships around 3MB. 2. Traverse every mesh and replace its material with a single MeshMatcapMaterial using a pale stone matcap texture. No lights, no HDR, no shadows. One image does all the shading. That is why it reads as marble instead of plastic. 3. Set the matcap color to #cdd6e8 so the stone picks up the blue of the background instead of looking pasted on. 4. The headline is normal HTML behind the canvas. Renderer with alpha true, setClearColor(0x000000, 0), canvas pointer-events: none on top. 5. Mouse follow: model.rotation.y lerps toward (mouseX / width - 0.5) * 0.4 at 0.05 per frame. Small angle, slow lerp, feels heavy like stone should. 6. The accent line is a 2px div with transform: scaleX(0) to scaleX(1) over 0.8s, cubic-bezier(0.65, 0, 0.35, 1), origin center. 7. renderer.setPixelRatio(Math.min(devicePixelRatio, 2)) or retina screens melt the GPU for no visible gain. Save this if you build 3D on the web 🔥 #astra6 #threejs #webgl #webdesign

weblove

Open In TikTok:

Region: PT

Monday 21 September 2026 19:54:04 GMT