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