[{"data":1,"prerenderedAt":402},["ShallowReactive",2],{"navigation":3,"/experiments/array-cameras":122,"authors":284},[4],{"title":5,"path":6,"stem":7,"children":8,"page":121},"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],{"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},"Repulsion Effect","/experiments/repulsion-effect","experiments/repulsion-effect",{"title":98,"path":99,"stem":100},"Shadertoy Museum","/experiments/shadertoy-museum","experiments/shadertoy-museum",{"title":102,"path":103,"stem":104},"Space Game","/experiments/space-game","experiments/space-game",{"title":106,"path":107,"stem":108},"Halloween Spooky-saur 🎃","/experiments/spooky-saur","experiments/spooky-saur",{"title":110,"path":111,"stem":112},"Synthwave Landscape","/experiments/synthwave-landscape","experiments/synthwave-landscape",{"title":114,"path":115,"stem":116},"Texture Particle Cursor","/experiments/texture-particle-cursor","experiments/texture-particle-cursor",{"title":118,"path":119,"stem":120},"WebGPU","/experiments/webgpu","experiments/webgpu",false,{"id":123,"title":10,"author":124,"body":125,"date":274,"description":275,"extension":276,"featured":121,"lastUpdated":274,"meta":277,"navigation":278,"path":11,"seo":279,"stem":12,"tags":280,"thumbnail":282,"__hash__":283},"experiments/experiments/array-cameras.md","jaime-bboyjt",{"type":126,"value":127,"toc":266},"minimark",[128,137,142,149,177,181,184,227,231,263],[129,130,131,132,136],"p",{},"This experiment demonstrates the advanced ",[133,134,135],"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.",[138,139,141],"h3",{"id":140},"what-youll-see","What You'll See",[129,143,144,145,148],{},"The scene features a ",[133,146,147],{},"rigged 3D knight model"," viewed from four different camera angles simultaneously:",[150,151,152,159,165,171],"ul",{},[153,154,155,158],"li",{},[133,156,157],{},"Left Bottom Viewport",": Side perspective showing the model's profile",[153,160,161,164],{},[133,162,163],{},"Center Bottom Viewport",": Front-facing view with detailed character features",[153,166,167,170],{},[133,168,169],{},"Right Bottom Viewport",": Opposite side angle for complete spatial understanding",[153,172,173,176],{},[133,174,175],{},"Center Top Viewport",": Strategic overview perspective",[138,178,180],{"id":179},"technical-implementation","Technical Implementation",[129,182,183],{},"This experiment showcases several advanced TresJS and Three.js concepts:",[150,185,186,192,202,211,221],{},[153,187,188,191],{},[133,189,190],{},"ArrayCamera Setup",": Creates multiple PerspectiveCamera instances with different viewports",[153,193,194,197,198],{},[133,195,196],{},"Responsive Design",": Cameras automatically adjust to window size changes using ",[199,200,201],"code",{},"useWindowSize",[153,203,204,207,208],{},[133,205,206],{},"GLTF Model Loading",": Loads a rigged knight model with animations using ",[199,209,210],{},"useGLTF",[153,212,213,216,217,220],{},[133,214,215],{},"Animation System",": Implements idle animation using ",[199,218,219],{},"useAnimations"," composable",[153,222,223,226],{},[133,224,225],{},"Viewport Management",": Each camera renders to a specific screen region defined by Vector4 coordinates",[138,228,230],{"id":229},"key-features","Key Features",[150,232,233,239,245,251,257],{},[153,234,235,238],{},[133,236,237],{},"Performance Optimized",": Single render pass for multiple viewpoints",[153,240,241,244],{},[133,242,243],{},"Responsive Layout",": Viewports automatically resize with window dimensions",[153,246,247,250],{},[133,248,249],{},"Animated Character",": Rigged model with idle animation loop",[153,252,253,256],{},[133,254,255],{},"Professional Lighting",": Multiple light sources for optimal model visibility",[153,258,259,262],{},[133,260,261],{},"Grid Reference",": Helper grid for spatial orientation",[129,264,265],{},"This technique is particularly valuable for applications requiring multiple simultaneous perspectives, such as security monitoring interfaces, architectural walkthroughs, or multiplayer game implementations.",{"title":267,"searchDepth":268,"depth":268,"links":269},"",2,[270,272,273],{"id":140,"depth":271,"text":141},3,{"id":179,"depth":271,"text":180},{"id":229,"depth":271,"text":230},"2023-04-21","An advance technique using ArrayCamera with a model animation","md",{},true,{"title":10,"description":275},[281],"models","/experiments/array-cameras.png","tignIzUIoa7l3yqh4pKO0qLrO88Q3uCyKuPKDLH1Om4",[285,302,317,334,350,367,384],{"id":286,"title":287,"avatar":288,"body":289,"description":267,"email":293,"extension":276,"github":294,"meta":295,"name":296,"navigation":278,"path":297,"seo":298,"slug":294,"stem":299,"twitter":294,"website":300,"__hash__":301},"authors/authors/alvarosabu.md","Alvarosabu","/avatars/alvarosabu.jpg",{"type":126,"value":290,"toc":291},[],{"title":267,"searchDepth":268,"depth":268,"links":292},[],"hola@alvarosaburido.dev","alvarosabu",{},"Alvaro Saburido","/authors/alvarosabu",{"description":267},"authors/alvarosabu","https://alvarosaburido.dev","FWpr6-OcVRzMvvsjRaD8icRidgpKVLCtrKy9-l_5GZM",{"id":303,"title":304,"avatar":305,"body":306,"description":267,"email":310,"extension":276,"github":311,"meta":312,"name":311,"navigation":278,"path":313,"seo":314,"slug":311,"stem":315,"twitter":310,"website":310,"__hash__":316},"authors/authors/andretchen0.md","Andretchen0","/avatars/andretchen0.jpg",{"type":126,"value":307,"toc":308},[],{"title":267,"searchDepth":268,"depth":268,"links":309},[],null,"andretchen0",{},"/authors/andretchen0",{"description":267},"authors/andretchen0","rztGS5YNlU7jYv1laE9f863gZy-WUFK5r3uuycyiMLY",{"id":318,"title":319,"avatar":320,"body":321,"description":267,"email":325,"extension":276,"github":326,"meta":327,"name":328,"navigation":278,"path":329,"seo":330,"slug":326,"stem":331,"twitter":332,"website":310,"__hash__":333},"authors/authors/damienmontastier.md","Damienmontastier","/avatars/damienmontastier.jpg",{"type":126,"value":322,"toc":323},[],{"title":267,"searchDepth":268,"depth":268,"links":324},[],"montastier.damien@gmail.com","damienmontastier",{},"Damien Montastier","/authors/damienmontastier",{"description":267},"authors/damienmontastier","dammontastier","FqtKh6r8pBEM29DE6GhT098-LIpM3BL7RXSxFjrcwwY",{"id":335,"title":336,"avatar":337,"body":338,"description":267,"email":310,"extension":276,"github":342,"meta":343,"name":344,"navigation":278,"path":345,"seo":346,"slug":342,"stem":347,"twitter":348,"website":310,"__hash__":349},"authors/authors/franciscohermida.md","Franciscohermida","/avatars/franciscohermida.jpg",{"type":126,"value":339,"toc":340},[],{"title":267,"searchDepth":268,"depth":268,"links":341},[],"franciscohermida",{},"Francisco Hermida","/authors/franciscohermida",{"description":267},"authors/franciscohermida","chicohermida","2dGmaA2uS0w2CaErMR8BexRzx0pCgoEowV5tZcITkus",{"id":351,"title":352,"avatar":353,"body":354,"description":267,"email":358,"extension":276,"github":359,"meta":360,"name":352,"navigation":278,"path":361,"seo":362,"slug":124,"stem":363,"twitter":364,"website":365,"__hash__":366},"authors/authors/jaime-torrealba.md","Jaime Torrealba","/avatars/jaime-torrealba.jpg",{"type":126,"value":355,"toc":356},[],{"title":267,"searchDepth":268,"depth":268,"links":357},[],"solucionesinformaticasjtc@gmail.com","JaimeTorrealba",{},"/authors/jaime-torrealba",{"description":267},"authors/jaime-torrealba","jaimebboyjt","https://jaimetorrealba.com/","WhkdXnej1NkT__thyZfYEil3qYn8wi7qVoQSMzyfrs4",{"id":368,"title":369,"avatar":370,"body":371,"description":267,"email":375,"extension":276,"github":376,"meta":377,"name":378,"navigation":278,"path":379,"seo":380,"slug":378,"stem":381,"twitter":375,"website":382,"__hash__":383},"authors/authors/luckystriike.md","Luckystriike","/avatars/luckystriike.jpg",{"type":126,"value":372,"toc":373},[],{"title":267,"searchDepth":268,"depth":268,"links":374},[],"none","luckystriike22",{},"luckystriike","/authors/luckystriike",{"description":267},"authors/luckystriike","https://github.com/luckystriike22","vmVaU8HAY_jbVnlvpUQiwh3uPcKxGGr6B5PF9xo17X8",{"id":385,"title":386,"avatar":387,"body":388,"description":267,"email":392,"extension":276,"github":393,"meta":394,"name":395,"navigation":278,"path":396,"seo":397,"slug":393,"stem":398,"twitter":399,"website":400,"__hash__":401},"authors/authors/neoprint3d.md","Neoprint3d","/avatars/neoprint3d.jpg",{"type":126,"value":389,"toc":390},[],{"title":267,"searchDepth":268,"depth":268,"links":391},[],"drew@neoprint3d.dev","neoprint3d",{},"Drew Ronsman","/authors/neoprint3d",{"description":267},"authors/neoprint3d","drew_ronsman","https://dronsman.com","w-8rauWEJDRmX_QOi4s2PI7n9EABybGURQ-R_ss9tzo",1768600262107]