[{"data":1,"prerenderedAt":500},["ShallowReactive",2],{"navigation":3,"/experiments/brickelangelo-david":154,"authors":366},[4],{"title":5,"path":6,"stem":7,"children":8,"page":153},"Experiments","/experiments","experiments",[9,13,17,21,25,29,33,37,41,45,49,53,57,61,65,69,73,77,81,85,89,93,97,101,105,109,113,117,121,125,129,133,137,141,145,149],{"title":10,"path":11,"stem":12},"Array of cameras","/experiments/array-cameras","experiments/array-cameras",{"title":14,"path":15,"stem":16},"Brickelangelo David","/experiments/brickelangelo-david","experiments/brickelangelo-david",{"title":18,"path":19,"stem":20},"Basic Brownian distribution","/experiments/brownian-distribution","experiments/brownian-distribution",{"title":22,"path":23,"stem":24},"Porsche 911 Car Showcase","/experiments/car-showcase","experiments/car-showcase",{"title":26,"path":27,"stem":28},"Coffee Smoke","/experiments/coffee-smoke","experiments/coffee-smoke",{"title":30,"path":31,"stem":32},"Cube Boy Dancefloor","/experiments/cube-boy-dancefloor","experiments/cube-boy-dancefloor",{"title":34,"path":35,"stem":36},"Cult of the lamb 🐑","/experiments/cult-of-the-lamb","experiments/cult-of-the-lamb",{"title":38,"path":39,"stem":40},"Dancing blob","/experiments/dancing-blob","experiments/dancing-blob",{"title":42,"path":43,"stem":44},"Fireworks Shader","/experiments/fireworks-shader","experiments/fireworks-shader",{"title":46,"path":47,"stem":48},"Galaxy Generator 🪐","/experiments/galaxy-generator","experiments/galaxy-generator",{"title":50,"path":51,"stem":52},"Gelatinous Cube","/experiments/gelatinous-cube","experiments/gelatinous-cube",{"title":54,"path":55,"stem":56},"Glass/Plastic Material","/experiments/glass-material","experiments/glass-material",{"title":58,"path":59,"stem":60},"Grainy Liquid Blobs","/experiments/grainy-liquid","experiments/grainy-liquid",{"title":62,"path":63,"stem":64},"Haunted House","/experiments/haunted-house","experiments/haunted-house",{"title":66,"path":67,"stem":68},"Phone with HTML inside","/experiments/html-phone","experiments/html-phone",{"title":70,"path":71,"stem":72},"Low Poly Planet","/experiments/lowpoly-planet","experiments/lowpoly-planet",{"title":74,"path":75,"stem":76},"Magical Marbles","/experiments/magical-marbles","experiments/magical-marbles",{"title":78,"path":79,"stem":80},"Nuxt Stones","/experiments/nuxt-stones","experiments/nuxt-stones",{"title":82,"path":83,"stem":84},"Particle Pumpkin Shader","/experiments/particle-pumpkin","experiments/particle-pumpkin",{"title":86,"path":87,"stem":88},"Particles Morphing","/experiments/particles-morphing","experiments/particles-morphing",{"title":90,"path":91,"stem":92},"Plexus Particles","/experiments/plexus-particles","experiments/plexus-particles",{"title":94,"path":95,"stem":96},"Portal Journey","/experiments/portal-journey","experiments/portal-journey",{"title":98,"path":99,"stem":100},"Wizard's Potion Classroom","/experiments/potions-classroom","experiments/potions-classroom",{"title":102,"path":103,"stem":104},"Rapier Basketball","/experiments/rapier-basketball","experiments/rapier-basketball",{"title":106,"path":107,"stem":108},"Rapier Vehicle","/experiments/rapier-car","experiments/rapier-car",{"title":110,"path":111,"stem":112},"Rapier Object Clump","/experiments/rapier-object-clump","experiments/rapier-object-clump",{"title":114,"path":115,"stem":116},"Rapier Wrecking Ball","/experiments/rapier-wrecking-ball","experiments/rapier-wrecking-ball",{"title":118,"path":119,"stem":120},"Repulsion Effect","/experiments/repulsion-effect","experiments/repulsion-effect",{"title":122,"path":123,"stem":124},"Shadertoy Museum","/experiments/shadertoy-museum","experiments/shadertoy-museum",{"title":126,"path":127,"stem":128},"Space Game","/experiments/space-game","experiments/space-game",{"title":130,"path":131,"stem":132},"Halloween Spooky-saur 🎃","/experiments/spooky-saur","experiments/spooky-saur",{"title":134,"path":135,"stem":136},"Synthwave Landscape","/experiments/synthwave-landscape","experiments/synthwave-landscape",{"title":138,"path":139,"stem":140},"Texture Particle Cursor","/experiments/texture-particle-cursor","experiments/texture-particle-cursor",{"title":142,"path":143,"stem":144},"Vue Fes Japan 2025","/experiments/vuefes-japan-2025","experiments/vuefes-japan-2025",{"title":146,"path":147,"stem":148},"WebGPU","/experiments/webgpu","experiments/webgpu",{"title":150,"path":151,"stem":152},"World Walker","/experiments/world-walker","experiments/world-walker",false,{"id":155,"title":14,"author":156,"body":157,"date":356,"description":357,"extension":358,"featured":153,"lastUpdated":356,"meta":359,"navigation":360,"path":15,"seo":361,"stem":16,"tags":362,"thumbnail":364,"__hash__":365},"experiments/experiments/brickelangelo-david.md","alvarosabu",{"type":158,"value":159,"toc":347},"minimark",[160,181,186,193,227,231,234,284,288,314,318,344],[161,162,163,164,168,169,172,173,180],"p",{},"This experiment recreates the iconic ",[165,166,167],"strong",{},"David sculpture by Michelangelo"," using ",[165,170,171],{},"75,000 LEGO brick instances",", demonstrating advanced surface sampling techniques and instanced rendering capabilities. Based on challenges from ",[174,175,179],"a",{"href":176,"rel":177},"https://threejs-journey.com/",[178],"nofollow","Bruno Simon's Three.js Journey course",", this artistic tribute combines classical art with modern procedural generation.",[182,183,185],"h3",{"id":184},"what-youll-see","What You'll See",[161,187,188,189,192],{},"The scene features a ",[165,190,191],{},"magnificent LEGO brick reconstruction"," of David's sculpture:",[194,195,196,203,209,215,221],"ul",{},[197,198,199,202],"li",{},[165,200,201],{},"75,000 Individual Bricks",": Each positioned using surface sampling algorithms",[197,204,205,208],{},[165,206,207],{},"Mouse-Controlled Rotation",": Interactive rotation following cursor movement",[197,210,211,214],{},[165,212,213],{},"Dramatic Lighting",": Spotlight that follows mouse cursor for dynamic illumination",[197,216,217,220],{},[165,218,219],{},"Cinematic Camera Movement",": Smooth GSAP-powered camera animation revealing the sculpture",[197,222,223,226],{},[165,224,225],{},"Loading Experience",": Custom progress indicator with elegant typography",[182,228,230],{"id":229},"technical-implementation","Technical Implementation",[161,232,233],{},"This experiment showcases several advanced 3D techniques:",[194,235,236,242,253,259,269,275],{},[197,237,238,241],{},[165,239,240],{},"MeshSurfaceSampler",": Distributes brick instances across the David model's surface using UV weighting",[197,243,244,247,248,252],{},[165,245,246],{},"Instanced Rendering",": Efficiently renders 75,000 bricks using ",[249,250,251],"code",{},"InstancedMesh"," for optimal performance",[197,254,255,258],{},[165,256,257],{},"Grid Alignment",": Bricks snap to a 3D grid system for authentic LEGO brick placement",[197,260,261,264,265,268],{},[165,262,263],{},"Interactive Lighting",": Spotlight dynamically follows mouse position using ",[249,266,267],{},"useMouse"," composable",[197,270,271,274],{},[165,272,273],{},"GSAP Animation",": Smooth camera movements with easing for cinematic reveal",[197,276,277,280,281],{},[165,278,279],{},"Progress Loading",": Real-time loading feedback using ",[249,282,283],{},"useProgress",[182,285,287],{"id":286},"artistic-features","Artistic Features",[194,289,290,296,302,308],{},[197,291,292,295],{},[165,293,294],{},"Custom Typography",": Elegant serif font styling reminiscent of classical art presentations",[197,297,298,301],{},[165,299,300],{},"Hidden Cursor",": Custom cursor design for immersive experience",[197,303,304,307],{},[165,305,306],{},"Black Background",": Dramatic contrast highlighting the sculpture",[197,309,310,313],{},[165,311,312],{},"Surface Alignment",": Bricks follow the natural curves and details of the original sculpture",[182,315,317],{"id":316},"key-technologies","Key Technologies",[194,319,320,326,332,338],{},[197,321,322,325],{},[165,323,324],{},"Surface Sampling",": Mathematically accurate distribution respecting model geometry",[197,327,328,331],{},[165,329,330],{},"Performance Optimization",": Single draw call for thousands of objects",[197,333,334,337],{},[165,335,336],{},"Interactive Experience",": Real-time lighting and rotation based on user input",[197,339,340,343],{},[165,341,342],{},"Classical Aesthetics",": Typography and presentation honoring the original masterpiece",[161,345,346],{},"This experiment serves as both a technical demonstration of advanced TresJS capabilities and an artistic homage to one of history's greatest sculptures, bridging classical art with modern digital techniques.",{"title":348,"searchDepth":349,"depth":349,"links":350},"",2,[351,353,354,355],{"id":184,"depth":352,"text":185},3,{"id":229,"depth":352,"text":230},{"id":286,"depth":352,"text":287},{"id":316,"depth":352,"text":317},"2023-08-21","Bricks ThreeJS Journey challenge","md",{},true,{"title":14,"description":357},[363,240],"cientos","/experiments/brickelangelo-david.webp","k6YirkdmF8AIV-ekfHzfVFX8a9w0vTcfweVeym4O3ow",[367,382,397,414,430,448,465,483],{"id":368,"title":369,"avatar":370,"body":371,"description":348,"email":375,"extension":358,"github":156,"meta":376,"name":156,"navigation":360,"path":377,"seo":378,"slug":156,"stem":379,"twitter":156,"website":380,"__hash__":381},"authors/authors/alvarosabu.md","Alvarosabu","/avatars/alvarosabu.jpeg",{"type":158,"value":372,"toc":373},[],{"title":348,"searchDepth":349,"depth":349,"links":374},[],"hola@alvarosaburido.dev",{},"/authors/alvarosabu",{"description":348},"authors/alvarosabu","https://alvarosabu.dev","kfjqjiPxKR64avAeoJeNF40fMr5laisoEnPnfgFGN_U",{"id":383,"title":384,"avatar":385,"body":386,"description":348,"email":390,"extension":358,"github":391,"meta":392,"name":391,"navigation":360,"path":393,"seo":394,"slug":391,"stem":395,"twitter":390,"website":390,"__hash__":396},"authors/authors/andretchen0.md","Andretchen0","/avatars/andretchen0.jpg",{"type":158,"value":387,"toc":388},[],{"title":348,"searchDepth":349,"depth":349,"links":389},[],null,"andretchen0",{},"/authors/andretchen0",{"description":348},"authors/andretchen0","rztGS5YNlU7jYv1laE9f863gZy-WUFK5r3uuycyiMLY",{"id":398,"title":399,"avatar":400,"body":401,"description":348,"email":405,"extension":358,"github":406,"meta":407,"name":408,"navigation":360,"path":409,"seo":410,"slug":406,"stem":411,"twitter":412,"website":390,"__hash__":413},"authors/authors/damienmontastier.md","Damienmontastier","/avatars/damienmontastier.jpg",{"type":158,"value":402,"toc":403},[],{"title":348,"searchDepth":349,"depth":349,"links":404},[],"montastier.damien@gmail.com","damienmontastier",{},"Damien Montastier","/authors/damienmontastier",{"description":348},"authors/damienmontastier","dammontastier","FqtKh6r8pBEM29DE6GhT098-LIpM3BL7RXSxFjrcwwY",{"id":415,"title":416,"avatar":417,"body":418,"description":348,"email":390,"extension":358,"github":422,"meta":423,"name":424,"navigation":360,"path":425,"seo":426,"slug":422,"stem":427,"twitter":428,"website":390,"__hash__":429},"authors/authors/franciscohermida.md","Franciscohermida","/avatars/franciscohermida.jpg",{"type":158,"value":419,"toc":420},[],{"title":348,"searchDepth":349,"depth":349,"links":421},[],"franciscohermida",{},"Francisco Hermida","/authors/franciscohermida",{"description":348},"authors/franciscohermida","chicohermida","2dGmaA2uS0w2CaErMR8BexRzx0pCgoEowV5tZcITkus",{"id":431,"title":432,"avatar":433,"body":434,"description":348,"email":438,"extension":358,"github":439,"meta":440,"name":432,"navigation":360,"path":441,"seo":442,"slug":443,"stem":444,"twitter":445,"website":446,"__hash__":447},"authors/authors/jaime-torrealba.md","Jaime Torrealba","/avatars/jaime-torrealba.jpg",{"type":158,"value":435,"toc":436},[],{"title":348,"searchDepth":349,"depth":349,"links":437},[],"solucionesinformaticasjtc@gmail.com","JaimeTorrealba",{},"/authors/jaime-torrealba",{"description":348},"jaime-bboyjt","authors/jaime-torrealba","jaimebboyjt","https://jaimetorrealba.com/","WhkdXnej1NkT__thyZfYEil3qYn8wi7qVoQSMzyfrs4",{"id":449,"title":450,"avatar":451,"body":452,"description":348,"email":456,"extension":358,"github":457,"meta":458,"name":459,"navigation":360,"path":460,"seo":461,"slug":459,"stem":462,"twitter":456,"website":463,"__hash__":464},"authors/authors/luckystriike.md","Luckystriike","/avatars/luckystriike.jpg",{"type":158,"value":453,"toc":454},[],{"title":348,"searchDepth":349,"depth":349,"links":455},[],"none","luckystriike22",{},"luckystriike","/authors/luckystriike",{"description":348},"authors/luckystriike","https://github.com/luckystriike22","vmVaU8HAY_jbVnlvpUQiwh3uPcKxGGr6B5PF9xo17X8",{"id":466,"title":467,"avatar":468,"body":469,"description":348,"email":473,"extension":358,"github":474,"meta":475,"name":476,"navigation":360,"path":477,"seo":478,"slug":474,"stem":479,"twitter":480,"website":481,"__hash__":482},"authors/authors/neoprint3d.md","Neoprint3d","/avatars/neoprint3d.jpg",{"type":158,"value":470,"toc":471},[],{"title":348,"searchDepth":349,"depth":349,"links":472},[],"drew@neoprint3d.dev","neoprint3d",{},"Drew Ronsman","/authors/neoprint3d",{"description":348},"authors/neoprint3d","drew_ronsman","https://dronsman.com","w-8rauWEJDRmX_QOi4s2PI7n9EABybGURQ-R_ss9tzo",{"id":484,"title":485,"avatar":486,"body":487,"description":348,"email":491,"extension":358,"github":492,"meta":493,"name":485,"navigation":360,"path":494,"seo":495,"slug":492,"stem":496,"twitter":497,"website":498,"__hash__":499},"authors/authors/neosoulink.md","Neosoulink","/avatars/neosoulink.jpg",{"type":158,"value":488,"toc":489},[],{"title":348,"searchDepth":349,"depth":349,"links":490},[],"neodarksoulink@gmail.com","neosoulink",{},"/authors/neosoulink",{"description":348},"authors/neosoulink","nsl_nathan","https://github.com/Neosoulink","69eGfzorl4NNNe56pFRh6qK3AhnfjnKUvCHO-_9Pa1Y",1787004691251]