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