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