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