[{"data":1,"prerenderedAt":1330},["ShallowReactive",2],{"navigation":3,"/essentials/concepts/constructor-arguments":239,"/essentials/concepts/constructor-arguments-surround":1325},[4,29,78,173,205,215,219,223,227,231,235],{"title":5,"path":6,"stem":7,"children":8,"icon":27,"titleTemplate":28},"Getting Started","/getting-started","1.getting-started/1.index",[9,12,17,22],{"title":10,"path":6,"stem":7,"icon":11},"Introduction","i-lucide-house",{"title":13,"path":14,"stem":15,"icon":16},"Installation","/getting-started/installation","1.getting-started/2.installation","i-lucide-download",{"title":18,"path":19,"stem":20,"icon":21},"Your First Scene","/getting-started/your-first-scene","1.getting-started/3.your-first-scene","i-lucide-donut",{"title":23,"path":24,"stem":25,"icon":26},"Upgrade Guide","/getting-started/upgrade-guide","1.getting-started/4.upgrade-guide","i-lucide-circle-arrow-up","i-lucide-rocket","%s · Get Started with TresJS",{"title":30,"path":31,"stem":32,"children":33},"Essentials","/essentials","2.essentials",[34,36,48],{"title":30,"path":31,"stem":35},"2.essentials/index",{"title":37,"icon":38,"open":39,"path":40,"stem":41,"children":42,"page":47},"Core Architecture","i-lucide-cpu",true,"/essentials/core-architecture","2.essentials/1.core-architecture",[43],{"title":44,"path":45,"stem":46},"Custom Vue Renderer","/essentials/core-architecture/custom-vue-renderer","2.essentials/1.core-architecture/2.custom-vue-renderer",false,{"title":49,"icon":50,"open":39,"path":51,"stem":52,"children":53,"page":47},"Key Concepts","i-lucide-medal","/essentials/concepts","2.essentials/2.concepts",[54,58,62,66,70,74],{"title":55,"path":56,"stem":57},"Declarative vs Imperative","/essentials/concepts/declarative-vs-imperative","2.essentials/2.concepts/1.declarative-vs-imperative",{"title":59,"path":60,"stem":61},"Reactivity","/essentials/concepts/reactivity","2.essentials/2.concepts/2.reactivity",{"title":63,"path":64,"stem":65},"Constructor Arguments","/essentials/concepts/constructor-arguments","2.essentials/2.concepts/3.constructor-arguments",{"title":67,"path":68,"stem":69},"Declarative Properties","/essentials/concepts/declarative-properties","2.essentials/2.concepts/4.declarative-properties",{"title":71,"path":72,"stem":73},"Extending the Catalogue","/essentials/concepts/extending-catalogue","2.essentials/2.concepts/5.extending-catalogue",{"title":75,"path":76,"stem":77},"Child Attachments","/essentials/concepts/child-attachments","2.essentials/2.concepts/6.child-attachments",{"title":79,"path":80,"stem":81,"children":82},"API","/api","3.api",[83,86,104,131,141,155],{"title":84,"path":80,"stem":85},"TresJS API Reference","3.api/1.index",{"title":87,"icon":88,"open":39,"path":89,"stem":90,"children":91,"page":47},"Components","i-lucide-box","/api/components","3.api/1.components",[92,96,100],{"title":93,"path":94,"stem":95},"\u003CTresCanvas />","/api/components/tres-canvas","3.api/1.components/tres-canvas",{"title":97,"path":98,"stem":99},"\u003CTresCanvasContext />","/api/components/tres-context","3.api/1.components/tres-context",{"title":101,"path":102,"stem":103},"Tres Components","/api/components/tres-objects","3.api/1.components/tres-objects",{"title":105,"titleTemplate":106,"icon":107,"path":108,"stem":109,"children":110,"page":47},"Composables","%s · TresJS Composables","i-lucide-arrow-right-left","/api/composables","3.api/2.composables",[111,115,119,123,127],{"title":112,"path":113,"stem":114},"useTres","/api/composables/use-tres","3.api/2.composables/1.use-tres",{"title":116,"path":117,"stem":118},"useTresContext","/api/composables/use-tres-context","3.api/2.composables/2.use-tres-context",{"title":120,"path":121,"stem":122},"useLoop","/api/composables/use-loop","3.api/2.composables/3.use-loop",{"title":124,"path":125,"stem":126},"useGraph","/api/composables/use-graph","3.api/2.composables/4.use-graph",{"title":128,"path":129,"stem":130},"useLoader","/api/composables/use-loader","3.api/2.composables/5.use-loader",{"title":132,"icon":133,"path":134,"stem":135,"children":136,"page":47},"Event handling","i-lucide-mouse-pointer-2","/api/events","3.api/3.events",[137],{"title":138,"path":139,"stem":140},"Pointer Events","/api/events/pointer-events","3.api/3.events/1.pointer-events",{"title":142,"icon":143,"path":144,"stem":145,"children":146,"page":47},"Utils","i-lucide-wrench","/api/utils","3.api/4.utils",[147,151],{"title":148,"path":149,"stem":150},"Type Guards","/api/utils/type-guards","3.api/4.utils/1.type-guards",{"title":152,"path":153,"stem":154},"Directives","/api/utils/directives","3.api/4.utils/2.directives",{"title":156,"icon":157,"path":158,"stem":159,"children":160,"page":47},"Advanced","i-lucide-brain-circuit","/api/advanced","3.api/5.advanced",[161,165,169],{"title":162,"path":163,"stem":164},"Scaling Performance 🚀","/api/advanced/performance","3.api/5.advanced/performance",{"title":166,"path":167,"stem":168},"Primitives","/api/advanced/primitives","3.api/5.advanced/primitives",{"title":170,"path":171,"stem":172},"WebGPU","/api/advanced/web-gpu","3.api/5.advanced/web-gpu",{"title":174,"path":175,"stem":176,"children":177},"Cookbook","/cookbook","4.cookbook",[178,181,185,189,193,197,201],{"title":179,"path":175,"stem":180},"Cookbook 🍳🧑‍🍳","4.cookbook/index",{"title":182,"path":183,"stem":184},"OrbitControls","/cookbook/orbit-controls","4.cookbook/1.orbit-controls",{"title":186,"path":187,"stem":188},"Basic Animations","/cookbook/basic-animations","4.cookbook/2.basic-animations",{"title":190,"path":191,"stem":192},"Model Animation","/cookbook/model-animation","4.cookbook/3.model-animation",{"title":194,"path":195,"stem":196},"Advanced GSAP Animations","/cookbook/advanced-gsap-animations","4.cookbook/4.advanced-gsap-animations",{"title":198,"path":199,"stem":200},"Tweakpane","/cookbook/tweakpane","4.cookbook/5.tweakpane",{"title":202,"path":203,"stem":204},"Dynamic components","/cookbook/transition-dynamic","4.cookbook/6.transition-dynamic",{"title":206,"path":207,"stem":208,"children":209},"Community","/community","5.community/1.index",[210,211],{"title":206,"path":207,"stem":208},{"title":212,"path":213,"stem":214},"Awesome Resources","/community/awesome-resources","5.community/awesome-resources",{"title":216,"path":217,"stem":218},"German Translation","/de","de",{"title":220,"path":221,"stem":222},"Spanish Translation","/es","es",{"title":224,"path":225,"stem":226},"French Translation","/fr","fr",{"title":228,"path":229,"stem":230},"Italian Translation","/it","it",{"title":232,"path":233,"stem":234},"Japanese Translation","/jp","jp",{"title":236,"path":237,"stem":238},"Chinese Translation","/zh","zh",{"id":240,"title":63,"body":241,"description":1319,"extension":1320,"links":1321,"meta":1322,"navigation":39,"path":64,"seo":1323,"stem":65,"__hash__":1324},"docs/2.essentials/2.concepts/3.constructor-arguments.md",{"type":242,"value":243,"toc":1304},"minimark",[244,249,258,358,365,372,382,460,474,478,483,486,626,630,704,708,812,816,819,894,903,910,913,968,1073,1077,1089,1248,1256,1260,1300],[245,246,248],"h2",{"id":247},"understanding-constructor-arguments","Understanding Constructor Arguments",[250,251,252,253,257],"p",{},"Many Three.js classes require arguments when instantiated. For example, creating a ",[254,255,256],"code",{},"PerspectiveCamera"," in vanilla Three.js:",[259,260,265],"pre",{"className":261,"code":262,"language":263,"meta":264,"style":264},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { PerspectiveCamera } from 'three'\n\n// Constructor: PerspectiveCamera(fov, aspect, near, far)\nconst camera = new PerspectiveCamera(45, 1, 0.1, 1000)\n","js","",[254,266,267,300,306,313],{"__ignoreMap":264},[268,269,272,276,280,284,287,290,293,297],"span",{"class":270,"line":271},"line",1,[268,273,275],{"class":274},"s7zQu","import",[268,277,279],{"class":278},"sMK4o"," {",[268,281,283],{"class":282},"sTEyZ"," PerspectiveCamera",[268,285,286],{"class":278}," }",[268,288,289],{"class":274}," from",[268,291,292],{"class":278}," '",[268,294,296],{"class":295},"sfazB","three",[268,298,299],{"class":278},"'\n",[268,301,303],{"class":270,"line":302},2,[268,304,305],{"emptyLinePlaceholder":39},"\n",[268,307,309],{"class":270,"line":308},3,[268,310,312],{"class":311},"sHwdD","// Constructor: PerspectiveCamera(fov, aspect, near, far)\n",[268,314,316,320,323,326,329,332,335,339,342,345,347,350,352,355],{"class":270,"line":315},4,[268,317,319],{"class":318},"spNyl","const",[268,321,322],{"class":282}," camera ",[268,324,325],{"class":278},"=",[268,327,328],{"class":278}," new",[268,330,283],{"class":331},"s2Zo4",[268,333,334],{"class":282},"(",[268,336,338],{"class":337},"sbssI","45",[268,340,341],{"class":278},",",[268,343,344],{"class":337}," 1",[268,346,341],{"class":278},[268,348,349],{"class":337}," 0.1",[268,351,341],{"class":278},[268,353,354],{"class":337}," 1000",[268,356,357],{"class":282},")\n",[250,359,360,361,364],{},"TresJS provides the ",[254,362,363],{},"args"," prop to pass these constructor arguments as an array.",[245,366,368,369,371],{"id":367},"the-args-prop","The ",[254,370,363],{}," Prop",[250,373,368,374,376,377,381],{},[254,375,363],{}," prop accepts an ",[378,379,380],"strong",{},"array of constructor arguments"," that are passed directly to the Three.js constructor in order:",[259,383,387],{"className":384,"code":385,"language":386,"meta":264,"style":264},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003C!-- Creates: new THREE.PerspectiveCamera(45, 1, 0.1, 1000) -->\n    \u003CTresPerspectiveCamera :args=\"[45, 1, 0.1, 1000]\" />\n  \u003C/TresCanvas>\n\u003C/template>\n","vue",[254,388,389,401,411,416,440,450],{"__ignoreMap":264},[268,390,391,394,398],{"class":270,"line":271},[268,392,393],{"class":278},"\u003C",[268,395,397],{"class":396},"swJcz","template",[268,399,400],{"class":278},">\n",[268,402,403,406,409],{"class":270,"line":302},[268,404,405],{"class":278},"  \u003C",[268,407,408],{"class":396},"TresCanvas",[268,410,400],{"class":278},[268,412,413],{"class":270,"line":308},[268,414,415],{"class":311},"    \u003C!-- Creates: new THREE.PerspectiveCamera(45, 1, 0.1, 1000) -->\n",[268,417,418,421,424,427,429,432,435,437],{"class":270,"line":315},[268,419,420],{"class":278},"    \u003C",[268,422,423],{"class":396},"TresPerspectiveCamera",[268,425,426],{"class":318}," :args",[268,428,325],{"class":278},[268,430,431],{"class":278},"\"",[268,433,434],{"class":295},"[45, 1, 0.1, 1000]",[268,436,431],{"class":278},[268,438,439],{"class":278}," />\n",[268,441,443,446,448],{"class":270,"line":442},5,[268,444,445],{"class":278},"  \u003C/",[268,447,408],{"class":396},[268,449,400],{"class":278},[268,451,453,456,458],{"class":270,"line":452},6,[268,454,455],{"class":278},"\u003C/",[268,457,397],{"class":396},[268,459,400],{"class":278},[461,462,463],"tip",{},[250,464,465,466,473],{},"The order of arguments in the array must match the Three.js constructor signature. Check the ",[467,468,472],"a",{"href":469,"rel":470},"https://threejs.org/docs/",[471],"nofollow","Three.js documentation"," for each class's constructor parameters.",[245,475,477],{"id":476},"common-examples","Common Examples",[479,480,482],"h3",{"id":481},"geometries","Geometries",[250,484,485],{},"Geometries often require dimensional arguments:",[259,487,489],{"className":384,"code":488,"language":386,"meta":264,"style":264},"\u003Ctemplate>\n  \u003C!-- BoxGeometry(width, height, depth) -->\n  \u003CTresBoxGeometry :args=\"[2, 2, 2]\" />\n\n  \u003C!-- SphereGeometry(radius, widthSegments, heightSegments) -->\n  \u003CTresSphereGeometry :args=\"[1, 32, 32]\" />\n\n  \u003C!-- PlaneGeometry(width, height, widthSegments, heightSegments) -->\n  \u003CTresPlaneGeometry :args=\"[10, 10, 1, 1]\" />\n\n  \u003C!-- CylinderGeometry(radiusTop, radiusBottom, height, radialSegments) -->\n  \u003CTresCylinderGeometry :args=\"[1, 1, 2, 32]\" />\n\u003C/template>\n",[254,490,491,499,504,524,528,533,553,558,564,585,590,596,617],{"__ignoreMap":264},[268,492,493,495,497],{"class":270,"line":271},[268,494,393],{"class":278},[268,496,397],{"class":396},[268,498,400],{"class":278},[268,500,501],{"class":270,"line":302},[268,502,503],{"class":311},"  \u003C!-- BoxGeometry(width, height, depth) -->\n",[268,505,506,508,511,513,515,517,520,522],{"class":270,"line":308},[268,507,405],{"class":278},[268,509,510],{"class":396},"TresBoxGeometry",[268,512,426],{"class":318},[268,514,325],{"class":278},[268,516,431],{"class":278},[268,518,519],{"class":295},"[2, 2, 2]",[268,521,431],{"class":278},[268,523,439],{"class":278},[268,525,526],{"class":270,"line":315},[268,527,305],{"emptyLinePlaceholder":39},[268,529,530],{"class":270,"line":442},[268,531,532],{"class":311},"  \u003C!-- SphereGeometry(radius, widthSegments, heightSegments) -->\n",[268,534,535,537,540,542,544,546,549,551],{"class":270,"line":452},[268,536,405],{"class":278},[268,538,539],{"class":396},"TresSphereGeometry",[268,541,426],{"class":318},[268,543,325],{"class":278},[268,545,431],{"class":278},[268,547,548],{"class":295},"[1, 32, 32]",[268,550,431],{"class":278},[268,552,439],{"class":278},[268,554,556],{"class":270,"line":555},7,[268,557,305],{"emptyLinePlaceholder":39},[268,559,561],{"class":270,"line":560},8,[268,562,563],{"class":311},"  \u003C!-- PlaneGeometry(width, height, widthSegments, heightSegments) -->\n",[268,565,567,569,572,574,576,578,581,583],{"class":270,"line":566},9,[268,568,405],{"class":278},[268,570,571],{"class":396},"TresPlaneGeometry",[268,573,426],{"class":318},[268,575,325],{"class":278},[268,577,431],{"class":278},[268,579,580],{"class":295},"[10, 10, 1, 1]",[268,582,431],{"class":278},[268,584,439],{"class":278},[268,586,588],{"class":270,"line":587},10,[268,589,305],{"emptyLinePlaceholder":39},[268,591,593],{"class":270,"line":592},11,[268,594,595],{"class":311},"  \u003C!-- CylinderGeometry(radiusTop, radiusBottom, height, radialSegments) -->\n",[268,597,599,601,604,606,608,610,613,615],{"class":270,"line":598},12,[268,600,405],{"class":278},[268,602,603],{"class":396},"TresCylinderGeometry",[268,605,426],{"class":318},[268,607,325],{"class":278},[268,609,431],{"class":278},[268,611,612],{"class":295},"[1, 1, 2, 32]",[268,614,431],{"class":278},[268,616,439],{"class":278},[268,618,620,622,624],{"class":270,"line":619},13,[268,621,455],{"class":278},[268,623,397],{"class":396},[268,625,400],{"class":278},[479,627,629],{"id":628},"cameras","Cameras",[259,631,633],{"className":384,"code":632,"language":386,"meta":264,"style":264},"\u003Ctemplate>\n  \u003C!-- PerspectiveCamera(fov, aspect, near, far) -->\n  \u003CTresPerspectiveCamera :args=\"[75, 1, 0.1, 1000]\" />\n\n  \u003C!-- OrthographicCamera(left, right, top, bottom, near, far) -->\n  \u003CTresOrthographicCamera :args=\"[-5, 5, 5, -5, 0.1, 1000]\" />\n\u003C/template>\n",[254,634,635,643,648,667,671,676,696],{"__ignoreMap":264},[268,636,637,639,641],{"class":270,"line":271},[268,638,393],{"class":278},[268,640,397],{"class":396},[268,642,400],{"class":278},[268,644,645],{"class":270,"line":302},[268,646,647],{"class":311},"  \u003C!-- PerspectiveCamera(fov, aspect, near, far) -->\n",[268,649,650,652,654,656,658,660,663,665],{"class":270,"line":308},[268,651,405],{"class":278},[268,653,423],{"class":396},[268,655,426],{"class":318},[268,657,325],{"class":278},[268,659,431],{"class":278},[268,661,662],{"class":295},"[75, 1, 0.1, 1000]",[268,664,431],{"class":278},[268,666,439],{"class":278},[268,668,669],{"class":270,"line":315},[268,670,305],{"emptyLinePlaceholder":39},[268,672,673],{"class":270,"line":442},[268,674,675],{"class":311},"  \u003C!-- OrthographicCamera(left, right, top, bottom, near, far) -->\n",[268,677,678,680,683,685,687,689,692,694],{"class":270,"line":452},[268,679,405],{"class":278},[268,681,682],{"class":396},"TresOrthographicCamera",[268,684,426],{"class":318},[268,686,325],{"class":278},[268,688,431],{"class":278},[268,690,691],{"class":295},"[-5, 5, 5, -5, 0.1, 1000]",[268,693,431],{"class":278},[268,695,439],{"class":278},[268,697,698,700,702],{"class":270,"line":555},[268,699,455],{"class":278},[268,701,397],{"class":396},[268,703,400],{"class":278},[479,705,707],{"id":706},"lights","Lights",[259,709,711],{"className":384,"code":710,"language":386,"meta":264,"style":264},"\u003Ctemplate>\n  \u003C!-- DirectionalLight(color, intensity) -->\n  \u003CTresDirectionalLight :args=\"['#ffffff', 1]\" />\n\n  \u003C!-- PointLight(color, intensity, distance, decay) -->\n  \u003CTresPointLight :args=\"['#ff0000', 2, 100, 2]\" />\n\n  \u003C!-- SpotLight(color, intensity, distance, angle, penumbra, decay) -->\n  \u003CTresSpotLight :args=\"['#ffffff', 1, 100, Math.PI / 6, 0.5, 2]\" />\n\u003C/template>\n",[254,712,713,721,726,746,750,755,775,779,784,804],{"__ignoreMap":264},[268,714,715,717,719],{"class":270,"line":271},[268,716,393],{"class":278},[268,718,397],{"class":396},[268,720,400],{"class":278},[268,722,723],{"class":270,"line":302},[268,724,725],{"class":311},"  \u003C!-- DirectionalLight(color, intensity) -->\n",[268,727,728,730,733,735,737,739,742,744],{"class":270,"line":308},[268,729,405],{"class":278},[268,731,732],{"class":396},"TresDirectionalLight",[268,734,426],{"class":318},[268,736,325],{"class":278},[268,738,431],{"class":278},[268,740,741],{"class":295},"['#ffffff', 1]",[268,743,431],{"class":278},[268,745,439],{"class":278},[268,747,748],{"class":270,"line":315},[268,749,305],{"emptyLinePlaceholder":39},[268,751,752],{"class":270,"line":442},[268,753,754],{"class":311},"  \u003C!-- PointLight(color, intensity, distance, decay) -->\n",[268,756,757,759,762,764,766,768,771,773],{"class":270,"line":452},[268,758,405],{"class":278},[268,760,761],{"class":396},"TresPointLight",[268,763,426],{"class":318},[268,765,325],{"class":278},[268,767,431],{"class":278},[268,769,770],{"class":295},"['#ff0000', 2, 100, 2]",[268,772,431],{"class":278},[268,774,439],{"class":278},[268,776,777],{"class":270,"line":555},[268,778,305],{"emptyLinePlaceholder":39},[268,780,781],{"class":270,"line":560},[268,782,783],{"class":311},"  \u003C!-- SpotLight(color, intensity, distance, angle, penumbra, decay) -->\n",[268,785,786,788,791,793,795,797,800,802],{"class":270,"line":566},[268,787,405],{"class":278},[268,789,790],{"class":396},"TresSpotLight",[268,792,426],{"class":318},[268,794,325],{"class":278},[268,796,431],{"class":278},[268,798,799],{"class":295},"['#ffffff', 1, 100, Math.PI / 6, 0.5, 2]",[268,801,431],{"class":278},[268,803,439],{"class":278},[268,805,806,808,810],{"class":270,"line":587},[268,807,455],{"class":278},[268,809,397],{"class":396},[268,811,400],{"class":278},[479,813,815],{"id":814},"materials-with-options-object","Materials with Options Object",[250,817,818],{},"Some constructors accept an options object as the first argument:",[259,820,822],{"className":384,"code":821,"language":386,"meta":264,"style":264},"\u003Ctemplate>\n  \u003C!-- MeshBasicMaterial({ color, wireframe, ... }) -->\n  \u003CTresMeshBasicMaterial :args=\"[{ color: 'red', wireframe: true }]\" />\n\n  \u003C!-- MeshStandardMaterial({ color, metalness, roughness, ... }) -->\n  \u003CTresMeshStandardMaterial :args=\"[{ color: '#ff6b35', metalness: 0.5, roughness: 0.2 }]\" />\n\u003C/template>\n",[254,823,824,832,837,857,861,866,886],{"__ignoreMap":264},[268,825,826,828,830],{"class":270,"line":271},[268,827,393],{"class":278},[268,829,397],{"class":396},[268,831,400],{"class":278},[268,833,834],{"class":270,"line":302},[268,835,836],{"class":311},"  \u003C!-- MeshBasicMaterial({ color, wireframe, ... }) -->\n",[268,838,839,841,844,846,848,850,853,855],{"class":270,"line":308},[268,840,405],{"class":278},[268,842,843],{"class":396},"TresMeshBasicMaterial",[268,845,426],{"class":318},[268,847,325],{"class":278},[268,849,431],{"class":278},[268,851,852],{"class":295},"[{ color: 'red', wireframe: true }]",[268,854,431],{"class":278},[268,856,439],{"class":278},[268,858,859],{"class":270,"line":315},[268,860,305],{"emptyLinePlaceholder":39},[268,862,863],{"class":270,"line":442},[268,864,865],{"class":311},"  \u003C!-- MeshStandardMaterial({ color, metalness, roughness, ... }) -->\n",[268,867,868,870,873,875,877,879,882,884],{"class":270,"line":452},[268,869,405],{"class":278},[268,871,872],{"class":396},"TresMeshStandardMaterial",[268,874,426],{"class":318},[268,876,325],{"class":278},[268,878,431],{"class":278},[268,880,881],{"class":295},"[{ color: '#ff6b35', metalness: 0.5, roughness: 0.2 }]",[268,883,431],{"class":278},[268,885,439],{"class":278},[268,887,888,890,892],{"class":270,"line":555},[268,889,455],{"class":278},[268,891,397],{"class":396},[268,893,400],{"class":278},[895,896,897],"warning",{},[250,898,899,900,902],{},"When passing an options object, remember it still needs to be wrapped in an array since ",[254,901,363],{}," always expects an array.",[245,904,906,907,909],{"id":905},"when-to-use-args-vs-props","When to Use ",[254,908,363],{}," vs Props",[250,911,912],{},"TresJS allows setting many properties declaratively via props. Use this rule of thumb:",[914,915,916,932],"table",{},[917,918,919],"thead",{},[920,921,922,929],"tr",{},[923,924,925,926,928],"th",{},"Use ",[254,927,363],{}," when...",[923,930,931],{},"Use props when...",[933,934,935,944,952,960],"tbody",{},[920,936,937,941],{},[938,939,940],"td",{},"Value is required at construction time",[938,942,943],{},"Value can be set after construction",[920,945,946,949],{},[938,947,948],{},"Property is immutable after creation",[938,950,951],{},"Property is mutable",[920,953,954,957],{},[938,955,956],{},"Creating geometries with dimensions",[938,958,959],{},"Setting position, rotation, scale",[920,961,962,965],{},[938,963,964],{},"Setting material options at creation",[938,966,967],{},"Changing colors or values dynamically",[259,969,971],{"className":384,"code":970,"language":386,"meta":264,"style":264},"\u003Ctemplate>\n  \u003C!-- args for constructor, props for mutable properties -->\n  \u003CTresMesh :position=\"[0, 1, 0]\" :rotation=\"[0, Math.PI, 0]\">\n    \u003CTresBoxGeometry :args=\"[2, 2, 2]\" />\n    \u003CTresMeshStandardMaterial color=\"blue\" />\n  \u003C/TresMesh>\n\u003C/template>\n",[254,972,973,981,986,1019,1037,1057,1065],{"__ignoreMap":264},[268,974,975,977,979],{"class":270,"line":271},[268,976,393],{"class":278},[268,978,397],{"class":396},[268,980,400],{"class":278},[268,982,983],{"class":270,"line":302},[268,984,985],{"class":311},"  \u003C!-- args for constructor, props for mutable properties -->\n",[268,987,988,990,993,996,998,1000,1003,1005,1008,1010,1012,1015,1017],{"class":270,"line":308},[268,989,405],{"class":278},[268,991,992],{"class":396},"TresMesh",[268,994,995],{"class":318}," :position",[268,997,325],{"class":278},[268,999,431],{"class":278},[268,1001,1002],{"class":295},"[0, 1, 0]",[268,1004,431],{"class":278},[268,1006,1007],{"class":318}," :rotation",[268,1009,325],{"class":278},[268,1011,431],{"class":278},[268,1013,1014],{"class":295},"[0, Math.PI, 0]",[268,1016,431],{"class":278},[268,1018,400],{"class":278},[268,1020,1021,1023,1025,1027,1029,1031,1033,1035],{"class":270,"line":315},[268,1022,420],{"class":278},[268,1024,510],{"class":396},[268,1026,426],{"class":318},[268,1028,325],{"class":278},[268,1030,431],{"class":278},[268,1032,519],{"class":295},[268,1034,431],{"class":278},[268,1036,439],{"class":278},[268,1038,1039,1041,1043,1046,1048,1050,1053,1055],{"class":270,"line":442},[268,1040,420],{"class":278},[268,1042,872],{"class":396},[268,1044,1045],{"class":318}," color",[268,1047,325],{"class":278},[268,1049,431],{"class":278},[268,1051,1052],{"class":295},"blue",[268,1054,431],{"class":278},[268,1056,439],{"class":278},[268,1058,1059,1061,1063],{"class":270,"line":452},[268,1060,445],{"class":278},[268,1062,992],{"class":396},[268,1064,400],{"class":278},[268,1066,1067,1069,1071],{"class":270,"line":555},[268,1068,455],{"class":278},[268,1070,397],{"class":396},[268,1072,400],{"class":278},[245,1074,1076],{"id":1075},"reactive-args","Reactive Args",[250,1078,368,1079,1081,1082,1084,1085,1088],{},[254,1080,363],{}," prop is reactive. When ",[254,1083,363],{}," changes, TresJS will ",[378,1086,1087],{},"recreate the Three.js instance"," with the new constructor arguments:",[259,1090,1092],{"className":384,"code":1091,"language":386,"meta":264,"style":264},"\u003Cscript setup lang=\"ts\">\nconst segments = ref(16)\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresMesh>\n    \u003C!-- Sphere is recreated when segments changes -->\n    \u003CTresSphereGeometry :args=\"[1, segments, segments]\" />\n    \u003CTresMeshStandardMaterial />\n  \u003C/TresMesh>\n\n  \u003Cbutton @click=\"segments += 8\">Increase Detail\u003C/button>\n\u003C/template>\n",[254,1093,1094,1118,1137,1145,1149,1157,1165,1170,1189,1197,1205,1209,1240],{"__ignoreMap":264},[268,1095,1096,1098,1101,1104,1107,1109,1111,1114,1116],{"class":270,"line":271},[268,1097,393],{"class":278},[268,1099,1100],{"class":396},"script",[268,1102,1103],{"class":318}," setup",[268,1105,1106],{"class":318}," lang",[268,1108,325],{"class":278},[268,1110,431],{"class":278},[268,1112,1113],{"class":295},"ts",[268,1115,431],{"class":278},[268,1117,400],{"class":278},[268,1119,1120,1122,1125,1127,1130,1132,1135],{"class":270,"line":302},[268,1121,319],{"class":318},[268,1123,1124],{"class":282}," segments ",[268,1126,325],{"class":278},[268,1128,1129],{"class":331}," ref",[268,1131,334],{"class":282},[268,1133,1134],{"class":337},"16",[268,1136,357],{"class":282},[268,1138,1139,1141,1143],{"class":270,"line":308},[268,1140,455],{"class":278},[268,1142,1100],{"class":396},[268,1144,400],{"class":278},[268,1146,1147],{"class":270,"line":315},[268,1148,305],{"emptyLinePlaceholder":39},[268,1150,1151,1153,1155],{"class":270,"line":442},[268,1152,393],{"class":278},[268,1154,397],{"class":396},[268,1156,400],{"class":278},[268,1158,1159,1161,1163],{"class":270,"line":452},[268,1160,405],{"class":278},[268,1162,992],{"class":396},[268,1164,400],{"class":278},[268,1166,1167],{"class":270,"line":555},[268,1168,1169],{"class":311},"    \u003C!-- Sphere is recreated when segments changes -->\n",[268,1171,1172,1174,1176,1178,1180,1182,1185,1187],{"class":270,"line":560},[268,1173,420],{"class":278},[268,1175,539],{"class":396},[268,1177,426],{"class":318},[268,1179,325],{"class":278},[268,1181,431],{"class":278},[268,1183,1184],{"class":295},"[1, segments, segments]",[268,1186,431],{"class":278},[268,1188,439],{"class":278},[268,1190,1191,1193,1195],{"class":270,"line":566},[268,1192,420],{"class":278},[268,1194,872],{"class":396},[268,1196,439],{"class":278},[268,1198,1199,1201,1203],{"class":270,"line":587},[268,1200,445],{"class":278},[268,1202,992],{"class":396},[268,1204,400],{"class":278},[268,1206,1207],{"class":270,"line":592},[268,1208,305],{"emptyLinePlaceholder":39},[268,1210,1211,1213,1216,1219,1221,1223,1226,1228,1231,1234,1236,1238],{"class":270,"line":598},[268,1212,405],{"class":278},[268,1214,1215],{"class":396},"button",[268,1217,1218],{"class":318}," @click",[268,1220,325],{"class":278},[268,1222,431],{"class":278},[268,1224,1225],{"class":295},"segments += 8",[268,1227,431],{"class":278},[268,1229,1230],{"class":278},">",[268,1232,1233],{"class":282},"Increase Detail",[268,1235,455],{"class":278},[268,1237,1215],{"class":396},[268,1239,400],{"class":278},[268,1241,1242,1244,1246],{"class":270,"line":619},[268,1243,455],{"class":278},[268,1245,397],{"class":396},[268,1247,400],{"class":278},[895,1249,1250],{},[250,1251,1252,1253,1255],{},"Recreating instances can be expensive. For frequently changing values, prefer using props or template refs instead of reactive ",[254,1254,363],{},".",[245,1257,1259],{"id":1258},"key-takeaways","Key Takeaways",[1261,1262,1263,1273,1280,1289],"card-group",{},[1264,1265,1268],"card",{"icon":1266,"title":1267},"i-lucide-list","Array Format",[250,1269,1270,1272],{},[254,1271,363],{}," always accepts an array, even for single arguments or options objects.",[1264,1274,1277],{"icon":1275,"title":1276},"i-lucide-arrow-right","Order Matters",[250,1278,1279],{},"Arguments must match the Three.js constructor signature exactly.",[1264,1281,1283],{"icon":1282,"title":59},"i-lucide-refresh-cw",[250,1284,1285,1286,1288],{},"Changing ",[254,1287,363],{}," recreates the instance - use sparingly for performance.",[1264,1290,1293],{"icon":1291,"title":1292},"i-lucide-book-open","Check the Docs",[250,1294,1295,1296,1299],{},"Reference ",[467,1297,472],{"href":469,"rel":1298},[471]," for constructor signatures.",[1301,1302,1303],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}",{"title":264,"searchDepth":271,"depth":302,"links":1305},[1306,1307,1309,1315,1317,1318],{"id":247,"depth":302,"text":248},{"id":367,"depth":302,"text":1308},"The args Prop",{"id":476,"depth":302,"text":477,"children":1310},[1311,1312,1313,1314],{"id":481,"depth":308,"text":482},{"id":628,"depth":308,"text":629},{"id":706,"depth":308,"text":707},{"id":814,"depth":308,"text":815},{"id":905,"depth":302,"text":1316},"When to Use args vs Props",{"id":1075,"depth":302,"text":1076},{"id":1258,"depth":302,"text":1259},"Learn how to pass constructor arguments to Three.js objects using the args prop in TresJS.","md",null,{},{"title":63,"description":1319},"tAF3xA9uY3ilhUO0haqgcUA_U2Rzxhl6mEFyf3ETth4",[1326,1328],{"title":59,"path":60,"stem":61,"description":1327,"children":-1},"Learn how to effectively use Vue's reactivity system with TresJS while maintaining optimal performance in high-frequency render loops.",{"title":67,"path":68,"stem":69,"description":1329,"children":-1},"Learn how TresJS maps Vue props to Three.js object properties for a declarative 3D development experience.",1782052335277]