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