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