[{"data":1,"prerenderedAt":169},["ShallowReactive",2],{"embed-array-cameras":3},{"id":4,"title":5,"author":6,"body":7,"date":156,"description":157,"extension":158,"featured":159,"lastUpdated":156,"meta":160,"navigation":161,"path":162,"responsive":159,"seo":163,"stem":164,"tags":165,"thumbnail":167,"__hash__":168},"experiments\u002Fexperiments\u002Farray-cameras.md","Array of cameras","jaime-bboyjt",{"type":8,"value":9,"toc":148},"minimark",[10,19,24,31,59,63,66,109,113,145],[11,12,13,14,18],"p",{},"This experiment demonstrates the advanced ",[15,16,17],"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.",[20,21,23],"h3",{"id":22},"what-youll-see","What You'll See",[11,25,26,27,30],{},"The scene features a ",[15,28,29],{},"rigged 3D knight model"," viewed from four different camera angles simultaneously:",[32,33,34,41,47,53],"ul",{},[35,36,37,40],"li",{},[15,38,39],{},"Left Bottom Viewport",": Side perspective showing the model's profile",[35,42,43,46],{},[15,44,45],{},"Center Bottom Viewport",": Front-facing view with detailed character features",[35,48,49,52],{},[15,50,51],{},"Right Bottom Viewport",": Opposite side angle for complete spatial understanding",[35,54,55,58],{},[15,56,57],{},"Center Top Viewport",": Strategic overview perspective",[20,60,62],{"id":61},"technical-implementation","Technical Implementation",[11,64,65],{},"This experiment showcases several advanced TresJS and Three.js concepts:",[32,67,68,74,84,93,103],{},[35,69,70,73],{},[15,71,72],{},"ArrayCamera Setup",": Creates multiple PerspectiveCamera instances with different viewports",[35,75,76,79,80],{},[15,77,78],{},"Responsive Design",": Cameras automatically adjust to window size changes using ",[81,82,83],"code",{},"useWindowSize",[35,85,86,89,90],{},[15,87,88],{},"GLTF Model Loading",": Loads a rigged knight model with animations using ",[81,91,92],{},"useGLTF",[35,94,95,98,99,102],{},[15,96,97],{},"Animation System",": Implements idle animation using ",[81,100,101],{},"useAnimations"," composable",[35,104,105,108],{},[15,106,107],{},"Viewport Management",": Each camera renders to a specific screen region defined by Vector4 coordinates",[20,110,112],{"id":111},"key-features","Key Features",[32,114,115,121,127,133,139],{},[35,116,117,120],{},[15,118,119],{},"Performance Optimized",": Single render pass for multiple viewpoints",[35,122,123,126],{},[15,124,125],{},"Responsive Layout",": Viewports automatically resize with window dimensions",[35,128,129,132],{},[15,130,131],{},"Animated Character",": Rigged model with idle animation loop",[35,134,135,138],{},[15,136,137],{},"Professional Lighting",": Multiple light sources for optimal model visibility",[35,140,141,144],{},[15,142,143],{},"Grid Reference",": Helper grid for spatial orientation",[11,146,147],{},"This technique is particularly valuable for applications requiring multiple simultaneous perspectives, such as security monitoring interfaces, architectural walkthroughs, or multiplayer game implementations.",{"title":149,"searchDepth":150,"depth":150,"links":151},"",2,[152,154,155],{"id":22,"depth":153,"text":23},3,{"id":61,"depth":153,"text":62},{"id":111,"depth":153,"text":112},"2023-04-21","An advance technique using ArrayCamera with a model animation","md",false,{},true,"\u002Fexperiments\u002Farray-cameras",{"title":5,"description":157},"experiments\u002Farray-cameras",[166],"models","\u002Fexperiments\u002Farray-cameras.webp","5j8lhm65ns7_61cSJO4RJrTKOJCaUSLePsyEBBj8oRo",1793714844034]