[{"data":1,"prerenderedAt":446},["ShallowReactive",2],{"navigation":3,"/experiments/array-cameras":150,"authors":312},[4],{"title":5,"path":6,"stem":7,"children":8,"page":149},"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],{"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",false,{"id":151,"title":10,"author":152,"body":153,"date":302,"description":303,"extension":304,"featured":149,"lastUpdated":302,"meta":305,"navigation":306,"path":11,"seo":307,"stem":12,"tags":308,"thumbnail":310,"__hash__":311},"experiments/experiments/array-cameras.md","jaime-bboyjt",{"type":154,"value":155,"toc":294},"minimark",[156,165,170,177,205,209,212,255,259,291],[157,158,159,160,164],"p",{},"This experiment demonstrates the advanced ",[161,162,163],"strong",{},"ArrayCamera"," technique in Three.js, providing multiple simultaneous views of a 3D scene through different camera perspectives. This approach is commonly used in security systems, architectural visualization, and game development for split-screen effects.",[166,167,169],"h3",{"id":168},"what-youll-see","What You'll See",[157,171,172,173,176],{},"The scene features a ",[161,174,175],{},"rigged 3D knight model"," viewed from four different camera angles simultaneously:",[178,179,180,187,193,199],"ul",{},[181,182,183,186],"li",{},[161,184,185],{},"Left Bottom Viewport",": Side perspective showing the model's profile",[181,188,189,192],{},[161,190,191],{},"Center Bottom Viewport",": Front-facing view with detailed character features",[181,194,195,198],{},[161,196,197],{},"Right Bottom Viewport",": Opposite side angle for complete spatial understanding",[181,200,201,204],{},[161,202,203],{},"Center Top Viewport",": Strategic overview perspective",[166,206,208],{"id":207},"technical-implementation","Technical Implementation",[157,210,211],{},"This experiment showcases several advanced TresJS and Three.js concepts:",[178,213,214,220,230,239,249],{},[181,215,216,219],{},[161,217,218],{},"ArrayCamera Setup",": Creates multiple PerspectiveCamera instances with different viewports",[181,221,222,225,226],{},[161,223,224],{},"Responsive Design",": Cameras automatically adjust to window size changes using ",[227,228,229],"code",{},"useWindowSize",[181,231,232,235,236],{},[161,233,234],{},"GLTF Model Loading",": Loads a rigged knight model with animations using ",[227,237,238],{},"useGLTF",[181,240,241,244,245,248],{},[161,242,243],{},"Animation System",": Implements idle animation using ",[227,246,247],{},"useAnimations"," composable",[181,250,251,254],{},[161,252,253],{},"Viewport Management",": Each camera renders to a specific screen region defined by Vector4 coordinates",[166,256,258],{"id":257},"key-features","Key Features",[178,260,261,267,273,279,285],{},[181,262,263,266],{},[161,264,265],{},"Performance Optimized",": Single render pass for multiple viewpoints",[181,268,269,272],{},[161,270,271],{},"Responsive Layout",": Viewports automatically resize with window dimensions",[181,274,275,278],{},[161,276,277],{},"Animated Character",": Rigged model with idle animation loop",[181,280,281,284],{},[161,282,283],{},"Professional Lighting",": Multiple light sources for optimal model visibility",[181,286,287,290],{},[161,288,289],{},"Grid Reference",": Helper grid for spatial orientation",[157,292,293],{},"This technique is particularly valuable for applications requiring multiple simultaneous perspectives, such as security monitoring interfaces, architectural walkthroughs, or multiplayer game implementations.",{"title":295,"searchDepth":296,"depth":296,"links":297},"",2,[298,300,301],{"id":168,"depth":299,"text":169},3,{"id":207,"depth":299,"text":208},{"id":257,"depth":299,"text":258},"2023-04-21","An advance technique using ArrayCamera with a model animation","md",{},true,{"title":10,"description":303},[309],"models","/experiments/array-cameras.webp","xq6MsPbgBttuau-Q7TqGJsN1m2RED13Fb4toa076ks8",[313,329,344,361,377,394,411,429],{"id":314,"title":315,"avatar":316,"body":317,"description":295,"email":321,"extension":304,"github":322,"meta":323,"name":322,"navigation":306,"path":324,"seo":325,"slug":322,"stem":326,"twitter":322,"website":327,"__hash__":328},"authors/authors/alvarosabu.md","Alvarosabu","/avatars/alvarosabu.jpeg",{"type":154,"value":318,"toc":319},[],{"title":295,"searchDepth":296,"depth":296,"links":320},[],"hola@alvarosaburido.dev","alvarosabu",{},"/authors/alvarosabu",{"description":295},"authors/alvarosabu","https://alvarosabu.dev","kfjqjiPxKR64avAeoJeNF40fMr5laisoEnPnfgFGN_U",{"id":330,"title":331,"avatar":332,"body":333,"description":295,"email":337,"extension":304,"github":338,"meta":339,"name":338,"navigation":306,"path":340,"seo":341,"slug":338,"stem":342,"twitter":337,"website":337,"__hash__":343},"authors/authors/andretchen0.md","Andretchen0","/avatars/andretchen0.jpg",{"type":154,"value":334,"toc":335},[],{"title":295,"searchDepth":296,"depth":296,"links":336},[],null,"andretchen0",{},"/authors/andretchen0",{"description":295},"authors/andretchen0","rztGS5YNlU7jYv1laE9f863gZy-WUFK5r3uuycyiMLY",{"id":345,"title":346,"avatar":347,"body":348,"description":295,"email":352,"extension":304,"github":353,"meta":354,"name":355,"navigation":306,"path":356,"seo":357,"slug":353,"stem":358,"twitter":359,"website":337,"__hash__":360},"authors/authors/damienmontastier.md","Damienmontastier","/avatars/damienmontastier.jpg",{"type":154,"value":349,"toc":350},[],{"title":295,"searchDepth":296,"depth":296,"links":351},[],"montastier.damien@gmail.com","damienmontastier",{},"Damien Montastier","/authors/damienmontastier",{"description":295},"authors/damienmontastier","dammontastier","FqtKh6r8pBEM29DE6GhT098-LIpM3BL7RXSxFjrcwwY",{"id":362,"title":363,"avatar":364,"body":365,"description":295,"email":337,"extension":304,"github":369,"meta":370,"name":371,"navigation":306,"path":372,"seo":373,"slug":369,"stem":374,"twitter":375,"website":337,"__hash__":376},"authors/authors/franciscohermida.md","Franciscohermida","/avatars/franciscohermida.jpg",{"type":154,"value":366,"toc":367},[],{"title":295,"searchDepth":296,"depth":296,"links":368},[],"franciscohermida",{},"Francisco Hermida","/authors/franciscohermida",{"description":295},"authors/franciscohermida","chicohermida","2dGmaA2uS0w2CaErMR8BexRzx0pCgoEowV5tZcITkus",{"id":378,"title":379,"avatar":380,"body":381,"description":295,"email":385,"extension":304,"github":386,"meta":387,"name":379,"navigation":306,"path":388,"seo":389,"slug":152,"stem":390,"twitter":391,"website":392,"__hash__":393},"authors/authors/jaime-torrealba.md","Jaime Torrealba","/avatars/jaime-torrealba.jpg",{"type":154,"value":382,"toc":383},[],{"title":295,"searchDepth":296,"depth":296,"links":384},[],"solucionesinformaticasjtc@gmail.com","JaimeTorrealba",{},"/authors/jaime-torrealba",{"description":295},"authors/jaime-torrealba","jaimebboyjt","https://jaimetorrealba.com/","WhkdXnej1NkT__thyZfYEil3qYn8wi7qVoQSMzyfrs4",{"id":395,"title":396,"avatar":397,"body":398,"description":295,"email":402,"extension":304,"github":403,"meta":404,"name":405,"navigation":306,"path":406,"seo":407,"slug":405,"stem":408,"twitter":402,"website":409,"__hash__":410},"authors/authors/luckystriike.md","Luckystriike","/avatars/luckystriike.jpg",{"type":154,"value":399,"toc":400},[],{"title":295,"searchDepth":296,"depth":296,"links":401},[],"none","luckystriike22",{},"luckystriike","/authors/luckystriike",{"description":295},"authors/luckystriike","https://github.com/luckystriike22","vmVaU8HAY_jbVnlvpUQiwh3uPcKxGGr6B5PF9xo17X8",{"id":412,"title":413,"avatar":414,"body":415,"description":295,"email":419,"extension":304,"github":420,"meta":421,"name":422,"navigation":306,"path":423,"seo":424,"slug":420,"stem":425,"twitter":426,"website":427,"__hash__":428},"authors/authors/neoprint3d.md","Neoprint3d","/avatars/neoprint3d.jpg",{"type":154,"value":416,"toc":417},[],{"title":295,"searchDepth":296,"depth":296,"links":418},[],"drew@neoprint3d.dev","neoprint3d",{},"Drew Ronsman","/authors/neoprint3d",{"description":295},"authors/neoprint3d","drew_ronsman","https://dronsman.com","w-8rauWEJDRmX_QOi4s2PI7n9EABybGURQ-R_ss9tzo",{"id":430,"title":431,"avatar":432,"body":433,"description":295,"email":437,"extension":304,"github":438,"meta":439,"name":431,"navigation":306,"path":440,"seo":441,"slug":438,"stem":442,"twitter":443,"website":444,"__hash__":445},"authors/authors/neosoulink.md","Neosoulink","/avatars/neosoulink.jpg",{"type":154,"value":434,"toc":435},[],{"title":295,"searchDepth":296,"depth":296,"links":436},[],"neodarksoulink@gmail.com","neosoulink",{},"/authors/neosoulink",{"description":295},"authors/neosoulink","nsl_nathan","https://github.com/Neosoulink","69eGfzorl4NNNe56pFRh6qK3AhnfjnKUvCHO-_9Pa1Y",1785417195212]