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