[{"data":1,"prerenderedAt":1671},["ShallowReactive",2],{"navigation":3,"/essentials/concepts/constructor-arguments":239,"/essentials/concepts/constructor-arguments-surround":1666},[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":1660,"extension":1661,"links":1662,"meta":1663,"navigation":39,"path":64,"seo":1664,"stem":65,"__hash__":1665},"docs/2.essentials/2.concepts/3.constructor-arguments.md",{"type":242,"value":243,"toc":1645},"minimark",[244,249,258,358,365,372,382,483,497,501,506,509,712,716,836,840,1025,1029,1032,1169,1178,1185,1188,1243,1393,1397,1409,1590,1597,1601,1641],[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,463,473],{"__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,431,434,437,439,442,445,447,450,452,455,458,460],{"class":270,"line":315},[268,419,420],{"class":278},"    \u003C",[268,422,423],{"class":396},"TresPerspectiveCamera",[268,425,426],{"class":278}," :",[268,428,363],{"class":318},[268,430,325],{"class":278},[268,432,433],{"class":278},"\"",[268,435,436],{"class":278},"[",[268,438,338],{"class":337},[268,440,441],{"class":278},", ",[268,443,444],{"class":337},"1",[268,446,441],{"class":278},[268,448,449],{"class":337},"0.1",[268,451,441],{"class":278},[268,453,454],{"class":337},"1000",[268,456,457],{"class":278},"]",[268,459,433],{"class":278},[268,461,462],{"class":278}," />\n",[268,464,466,469,471],{"class":270,"line":465},5,[268,467,468],{"class":278},"  \u003C/",[268,470,408],{"class":396},[268,472,400],{"class":278},[268,474,476,479,481],{"class":270,"line":475},6,[268,477,478],{"class":278},"\u003C/",[268,480,397],{"class":396},[268,482,400],{"class":278},[484,485,486],"tip",{},[250,487,488,489,496],{},"The order of arguments in the array must match the Three.js constructor signature. Check the ",[490,491,495],"a",{"href":492,"rel":493},"https://threejs.org/docs/",[494],"nofollow","Three.js documentation"," for each class's constructor parameters.",[245,498,500],{"id":499},"common-examples","Common Examples",[502,503,505],"h3",{"id":504},"geometries","Geometries",[250,507,508],{},"Geometries often require dimensional arguments:",[259,510,512],{"className":384,"code":511,"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,513,514,522,527,561,565,570,604,609,615,654,659,665,703],{"__ignoreMap":264},[268,515,516,518,520],{"class":270,"line":271},[268,517,393],{"class":278},[268,519,397],{"class":396},[268,521,400],{"class":278},[268,523,524],{"class":270,"line":302},[268,525,526],{"class":311},"  \u003C!-- BoxGeometry(width, height, depth) -->\n",[268,528,529,531,534,536,538,540,542,544,547,549,551,553,555,557,559],{"class":270,"line":308},[268,530,405],{"class":278},[268,532,533],{"class":396},"TresBoxGeometry",[268,535,426],{"class":278},[268,537,363],{"class":318},[268,539,325],{"class":278},[268,541,433],{"class":278},[268,543,436],{"class":278},[268,545,546],{"class":337},"2",[268,548,441],{"class":278},[268,550,546],{"class":337},[268,552,441],{"class":278},[268,554,546],{"class":337},[268,556,457],{"class":278},[268,558,433],{"class":278},[268,560,462],{"class":278},[268,562,563],{"class":270,"line":315},[268,564,305],{"emptyLinePlaceholder":39},[268,566,567],{"class":270,"line":465},[268,568,569],{"class":311},"  \u003C!-- SphereGeometry(radius, widthSegments, heightSegments) -->\n",[268,571,572,574,577,579,581,583,585,587,589,591,594,596,598,600,602],{"class":270,"line":475},[268,573,405],{"class":278},[268,575,576],{"class":396},"TresSphereGeometry",[268,578,426],{"class":278},[268,580,363],{"class":318},[268,582,325],{"class":278},[268,584,433],{"class":278},[268,586,436],{"class":278},[268,588,444],{"class":337},[268,590,441],{"class":278},[268,592,593],{"class":337},"32",[268,595,441],{"class":278},[268,597,593],{"class":337},[268,599,457],{"class":278},[268,601,433],{"class":278},[268,603,462],{"class":278},[268,605,607],{"class":270,"line":606},7,[268,608,305],{"emptyLinePlaceholder":39},[268,610,612],{"class":270,"line":611},8,[268,613,614],{"class":311},"  \u003C!-- PlaneGeometry(width, height, widthSegments, heightSegments) -->\n",[268,616,618,620,623,625,627,629,631,633,636,638,640,642,644,646,648,650,652],{"class":270,"line":617},9,[268,619,405],{"class":278},[268,621,622],{"class":396},"TresPlaneGeometry",[268,624,426],{"class":278},[268,626,363],{"class":318},[268,628,325],{"class":278},[268,630,433],{"class":278},[268,632,436],{"class":278},[268,634,635],{"class":337},"10",[268,637,441],{"class":278},[268,639,635],{"class":337},[268,641,441],{"class":278},[268,643,444],{"class":337},[268,645,441],{"class":278},[268,647,444],{"class":337},[268,649,457],{"class":278},[268,651,433],{"class":278},[268,653,462],{"class":278},[268,655,657],{"class":270,"line":656},10,[268,658,305],{"emptyLinePlaceholder":39},[268,660,662],{"class":270,"line":661},11,[268,663,664],{"class":311},"  \u003C!-- CylinderGeometry(radiusTop, radiusBottom, height, radialSegments) -->\n",[268,666,668,670,673,675,677,679,681,683,685,687,689,691,693,695,697,699,701],{"class":270,"line":667},12,[268,669,405],{"class":278},[268,671,672],{"class":396},"TresCylinderGeometry",[268,674,426],{"class":278},[268,676,363],{"class":318},[268,678,325],{"class":278},[268,680,433],{"class":278},[268,682,436],{"class":278},[268,684,444],{"class":337},[268,686,441],{"class":278},[268,688,444],{"class":337},[268,690,441],{"class":278},[268,692,546],{"class":337},[268,694,441],{"class":278},[268,696,593],{"class":337},[268,698,457],{"class":278},[268,700,433],{"class":278},[268,702,462],{"class":278},[268,704,706,708,710],{"class":270,"line":705},13,[268,707,478],{"class":278},[268,709,397],{"class":396},[268,711,400],{"class":278},[502,713,715],{"id":714},"cameras","Cameras",[259,717,719],{"className":384,"code":718,"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,720,721,729,734,771,775,780,828],{"__ignoreMap":264},[268,722,723,725,727],{"class":270,"line":271},[268,724,393],{"class":278},[268,726,397],{"class":396},[268,728,400],{"class":278},[268,730,731],{"class":270,"line":302},[268,732,733],{"class":311},"  \u003C!-- PerspectiveCamera(fov, aspect, near, far) -->\n",[268,735,736,738,740,742,744,746,748,750,753,755,757,759,761,763,765,767,769],{"class":270,"line":308},[268,737,405],{"class":278},[268,739,423],{"class":396},[268,741,426],{"class":278},[268,743,363],{"class":318},[268,745,325],{"class":278},[268,747,433],{"class":278},[268,749,436],{"class":278},[268,751,752],{"class":337},"75",[268,754,441],{"class":278},[268,756,444],{"class":337},[268,758,441],{"class":278},[268,760,449],{"class":337},[268,762,441],{"class":278},[268,764,454],{"class":337},[268,766,457],{"class":278},[268,768,433],{"class":278},[268,770,462],{"class":278},[268,772,773],{"class":270,"line":315},[268,774,305],{"emptyLinePlaceholder":39},[268,776,777],{"class":270,"line":465},[268,778,779],{"class":311},"  \u003C!-- OrthographicCamera(left, right, top, bottom, near, far) -->\n",[268,781,782,784,787,789,791,793,795,798,801,803,805,807,809,812,814,816,818,820,822,824,826],{"class":270,"line":475},[268,783,405],{"class":278},[268,785,786],{"class":396},"TresOrthographicCamera",[268,788,426],{"class":278},[268,790,363],{"class":318},[268,792,325],{"class":278},[268,794,433],{"class":278},[268,796,797],{"class":278},"[-",[268,799,800],{"class":337},"5",[268,802,441],{"class":278},[268,804,800],{"class":337},[268,806,441],{"class":278},[268,808,800],{"class":337},[268,810,811],{"class":278},", -",[268,813,800],{"class":337},[268,815,441],{"class":278},[268,817,449],{"class":337},[268,819,441],{"class":278},[268,821,454],{"class":337},[268,823,457],{"class":278},[268,825,433],{"class":278},[268,827,462],{"class":278},[268,829,830,832,834],{"class":270,"line":606},[268,831,478],{"class":278},[268,833,397],{"class":396},[268,835,400],{"class":278},[502,837,839],{"id":838},"lights","Lights",[259,841,843],{"className":384,"code":842,"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,844,845,853,858,893,897,902,945,949,954,1017],{"__ignoreMap":264},[268,846,847,849,851],{"class":270,"line":271},[268,848,393],{"class":278},[268,850,397],{"class":396},[268,852,400],{"class":278},[268,854,855],{"class":270,"line":302},[268,856,857],{"class":311},"  \u003C!-- DirectionalLight(color, intensity) -->\n",[268,859,860,862,865,867,869,871,873,875,878,881,883,885,887,889,891],{"class":270,"line":308},[268,861,405],{"class":278},[268,863,864],{"class":396},"TresDirectionalLight",[268,866,426],{"class":278},[268,868,363],{"class":318},[268,870,325],{"class":278},[268,872,433],{"class":278},[268,874,436],{"class":278},[268,876,877],{"class":278},"'",[268,879,880],{"class":295},"#ffffff",[268,882,877],{"class":278},[268,884,441],{"class":278},[268,886,444],{"class":337},[268,888,457],{"class":278},[268,890,433],{"class":278},[268,892,462],{"class":278},[268,894,895],{"class":270,"line":315},[268,896,305],{"emptyLinePlaceholder":39},[268,898,899],{"class":270,"line":465},[268,900,901],{"class":311},"  \u003C!-- PointLight(color, intensity, distance, decay) -->\n",[268,903,904,906,909,911,913,915,917,919,921,924,926,928,930,932,935,937,939,941,943],{"class":270,"line":475},[268,905,405],{"class":278},[268,907,908],{"class":396},"TresPointLight",[268,910,426],{"class":278},[268,912,363],{"class":318},[268,914,325],{"class":278},[268,916,433],{"class":278},[268,918,436],{"class":278},[268,920,877],{"class":278},[268,922,923],{"class":295},"#ff0000",[268,925,877],{"class":278},[268,927,441],{"class":278},[268,929,546],{"class":337},[268,931,441],{"class":278},[268,933,934],{"class":337},"100",[268,936,441],{"class":278},[268,938,546],{"class":337},[268,940,457],{"class":278},[268,942,433],{"class":278},[268,944,462],{"class":278},[268,946,947],{"class":270,"line":606},[268,948,305],{"emptyLinePlaceholder":39},[268,950,951],{"class":270,"line":611},[268,952,953],{"class":311},"  \u003C!-- SpotLight(color, intensity, distance, angle, penumbra, decay) -->\n",[268,955,956,958,961,963,965,967,969,971,973,975,977,979,981,983,985,987,990,993,996,999,1002,1004,1007,1009,1011,1013,1015],{"class":270,"line":617},[268,957,405],{"class":278},[268,959,960],{"class":396},"TresSpotLight",[268,962,426],{"class":278},[268,964,363],{"class":318},[268,966,325],{"class":278},[268,968,433],{"class":278},[268,970,436],{"class":278},[268,972,877],{"class":278},[268,974,880],{"class":295},[268,976,877],{"class":278},[268,978,441],{"class":278},[268,980,444],{"class":337},[268,982,441],{"class":278},[268,984,934],{"class":337},[268,986,441],{"class":278},[268,988,989],{"class":282},"Math",[268,991,992],{"class":278},".",[268,994,995],{"class":282},"PI",[268,997,998],{"class":278}," / ",[268,1000,1001],{"class":337},"6",[268,1003,441],{"class":278},[268,1005,1006],{"class":337},"0.5",[268,1008,441],{"class":278},[268,1010,546],{"class":337},[268,1012,457],{"class":278},[268,1014,433],{"class":278},[268,1016,462],{"class":278},[268,1018,1019,1021,1023],{"class":270,"line":656},[268,1020,478],{"class":278},[268,1022,397],{"class":396},[268,1024,400],{"class":278},[502,1026,1028],{"id":1027},"materials-with-options-object","Materials with Options Object",[250,1030,1031],{},"Some constructors accept an options object as the first argument:",[259,1033,1035],{"className":384,"code":1034,"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,1036,1037,1045,1050,1099,1103,1108,1161],{"__ignoreMap":264},[268,1038,1039,1041,1043],{"class":270,"line":271},[268,1040,393],{"class":278},[268,1042,397],{"class":396},[268,1044,400],{"class":278},[268,1046,1047],{"class":270,"line":302},[268,1048,1049],{"class":311},"  \u003C!-- MeshBasicMaterial({ color, wireframe, ... }) -->\n",[268,1051,1052,1054,1057,1059,1061,1063,1065,1068,1071,1074,1076,1079,1081,1083,1086,1088,1092,1095,1097],{"class":270,"line":308},[268,1053,405],{"class":278},[268,1055,1056],{"class":396},"TresMeshBasicMaterial",[268,1058,426],{"class":278},[268,1060,363],{"class":318},[268,1062,325],{"class":278},[268,1064,433],{"class":278},[268,1066,1067],{"class":278},"[{ ",[268,1069,1070],{"class":396},"color",[268,1072,1073],{"class":278},": ",[268,1075,877],{"class":278},[268,1077,1078],{"class":295},"red",[268,1080,877],{"class":278},[268,1082,441],{"class":278},[268,1084,1085],{"class":396},"wireframe",[268,1087,1073],{"class":278},[268,1089,1091],{"class":1090},"sfNiH","true",[268,1093,1094],{"class":278}," }]",[268,1096,433],{"class":278},[268,1098,462],{"class":278},[268,1100,1101],{"class":270,"line":315},[268,1102,305],{"emptyLinePlaceholder":39},[268,1104,1105],{"class":270,"line":465},[268,1106,1107],{"class":311},"  \u003C!-- MeshStandardMaterial({ color, metalness, roughness, ... }) -->\n",[268,1109,1110,1112,1115,1117,1119,1121,1123,1125,1127,1129,1131,1134,1136,1138,1141,1143,1145,1147,1150,1152,1155,1157,1159],{"class":270,"line":475},[268,1111,405],{"class":278},[268,1113,1114],{"class":396},"TresMeshStandardMaterial",[268,1116,426],{"class":278},[268,1118,363],{"class":318},[268,1120,325],{"class":278},[268,1122,433],{"class":278},[268,1124,1067],{"class":278},[268,1126,1070],{"class":396},[268,1128,1073],{"class":278},[268,1130,877],{"class":278},[268,1132,1133],{"class":295},"#ff6b35",[268,1135,877],{"class":278},[268,1137,441],{"class":278},[268,1139,1140],{"class":396},"metalness",[268,1142,1073],{"class":278},[268,1144,1006],{"class":337},[268,1146,441],{"class":278},[268,1148,1149],{"class":396},"roughness",[268,1151,1073],{"class":278},[268,1153,1154],{"class":337},"0.2",[268,1156,1094],{"class":278},[268,1158,433],{"class":278},[268,1160,462],{"class":278},[268,1162,1163,1165,1167],{"class":270,"line":606},[268,1164,478],{"class":278},[268,1166,397],{"class":396},[268,1168,400],{"class":278},[1170,1171,1172],"warning",{},[250,1173,1174,1175,1177],{},"When passing an options object, remember it still needs to be wrapped in an array since ",[254,1176,363],{}," always expects an array.",[245,1179,1181,1182,1184],{"id":1180},"when-to-use-args-vs-props","When to Use ",[254,1183,363],{}," vs Props",[250,1186,1187],{},"TresJS allows setting many properties declaratively via props. Use this rule of thumb:",[1189,1190,1191,1207],"table",{},[1192,1193,1194],"thead",{},[1195,1196,1197,1204],"tr",{},[1198,1199,1200,1201,1203],"th",{},"Use ",[254,1202,363],{}," when...",[1198,1205,1206],{},"Use props when...",[1208,1209,1210,1219,1227,1235],"tbody",{},[1195,1211,1212,1216],{},[1213,1214,1215],"td",{},"Value is required at construction time",[1213,1217,1218],{},"Value can be set after construction",[1195,1220,1221,1224],{},[1213,1222,1223],{},"Property is immutable after creation",[1213,1225,1226],{},"Property is mutable",[1195,1228,1229,1232],{},[1213,1230,1231],{},"Creating geometries with dimensions",[1213,1233,1234],{},"Setting position, rotation, scale",[1195,1236,1237,1240],{},[1213,1238,1239],{},"Setting material options at creation",[1213,1241,1242],{},"Changing colors or values dynamically",[259,1244,1246],{"className":384,"code":1245,"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,1247,1248,1256,1261,1325,1357,1377,1385],{"__ignoreMap":264},[268,1249,1250,1252,1254],{"class":270,"line":271},[268,1251,393],{"class":278},[268,1253,397],{"class":396},[268,1255,400],{"class":278},[268,1257,1258],{"class":270,"line":302},[268,1259,1260],{"class":311},"  \u003C!-- args for constructor, props for mutable properties -->\n",[268,1262,1263,1265,1268,1270,1273,1275,1277,1279,1282,1284,1286,1288,1290,1292,1294,1296,1299,1301,1303,1305,1307,1309,1311,1313,1315,1317,1319,1321,1323],{"class":270,"line":308},[268,1264,405],{"class":278},[268,1266,1267],{"class":396},"TresMesh",[268,1269,426],{"class":278},[268,1271,1272],{"class":318},"position",[268,1274,325],{"class":278},[268,1276,433],{"class":278},[268,1278,436],{"class":278},[268,1280,1281],{"class":337},"0",[268,1283,441],{"class":278},[268,1285,444],{"class":337},[268,1287,441],{"class":278},[268,1289,1281],{"class":337},[268,1291,457],{"class":278},[268,1293,433],{"class":278},[268,1295,426],{"class":278},[268,1297,1298],{"class":318},"rotation",[268,1300,325],{"class":278},[268,1302,433],{"class":278},[268,1304,436],{"class":278},[268,1306,1281],{"class":337},[268,1308,441],{"class":278},[268,1310,989],{"class":282},[268,1312,992],{"class":278},[268,1314,995],{"class":282},[268,1316,441],{"class":278},[268,1318,1281],{"class":337},[268,1320,457],{"class":278},[268,1322,433],{"class":278},[268,1324,400],{"class":278},[268,1326,1327,1329,1331,1333,1335,1337,1339,1341,1343,1345,1347,1349,1351,1353,1355],{"class":270,"line":315},[268,1328,420],{"class":278},[268,1330,533],{"class":396},[268,1332,426],{"class":278},[268,1334,363],{"class":318},[268,1336,325],{"class":278},[268,1338,433],{"class":278},[268,1340,436],{"class":278},[268,1342,546],{"class":337},[268,1344,441],{"class":278},[268,1346,546],{"class":337},[268,1348,441],{"class":278},[268,1350,546],{"class":337},[268,1352,457],{"class":278},[268,1354,433],{"class":278},[268,1356,462],{"class":278},[268,1358,1359,1361,1363,1366,1368,1370,1373,1375],{"class":270,"line":465},[268,1360,420],{"class":278},[268,1362,1114],{"class":396},[268,1364,1365],{"class":318}," color",[268,1367,325],{"class":278},[268,1369,433],{"class":278},[268,1371,1372],{"class":295},"blue",[268,1374,433],{"class":278},[268,1376,462],{"class":278},[268,1378,1379,1381,1383],{"class":270,"line":475},[268,1380,468],{"class":278},[268,1382,1267],{"class":396},[268,1384,400],{"class":278},[268,1386,1387,1389,1391],{"class":270,"line":606},[268,1388,478],{"class":278},[268,1390,397],{"class":396},[268,1392,400],{"class":278},[245,1394,1396],{"id":1395},"reactive-args","Reactive Args",[250,1398,368,1399,1401,1402,1404,1405,1408],{},[254,1400,363],{}," prop is reactive. When ",[254,1403,363],{}," changes, TresJS will ",[378,1406,1407],{},"recreate the Three.js instance"," with the new constructor arguments:",[259,1410,1412],{"className":384,"code":1411,"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,1413,1414,1438,1457,1465,1469,1477,1485,1490,1523,1531,1539,1543,1582],{"__ignoreMap":264},[268,1415,1416,1418,1421,1424,1427,1429,1431,1434,1436],{"class":270,"line":271},[268,1417,393],{"class":278},[268,1419,1420],{"class":396},"script",[268,1422,1423],{"class":318}," setup",[268,1425,1426],{"class":318}," lang",[268,1428,325],{"class":278},[268,1430,433],{"class":278},[268,1432,1433],{"class":295},"ts",[268,1435,433],{"class":278},[268,1437,400],{"class":278},[268,1439,1440,1442,1445,1447,1450,1452,1455],{"class":270,"line":302},[268,1441,319],{"class":318},[268,1443,1444],{"class":282}," segments ",[268,1446,325],{"class":278},[268,1448,1449],{"class":331}," ref",[268,1451,334],{"class":282},[268,1453,1454],{"class":337},"16",[268,1456,357],{"class":282},[268,1458,1459,1461,1463],{"class":270,"line":308},[268,1460,478],{"class":278},[268,1462,1420],{"class":396},[268,1464,400],{"class":278},[268,1466,1467],{"class":270,"line":315},[268,1468,305],{"emptyLinePlaceholder":39},[268,1470,1471,1473,1475],{"class":270,"line":465},[268,1472,393],{"class":278},[268,1474,397],{"class":396},[268,1476,400],{"class":278},[268,1478,1479,1481,1483],{"class":270,"line":475},[268,1480,405],{"class":278},[268,1482,1267],{"class":396},[268,1484,400],{"class":278},[268,1486,1487],{"class":270,"line":606},[268,1488,1489],{"class":311},"    \u003C!-- Sphere is recreated when segments changes -->\n",[268,1491,1492,1494,1496,1498,1500,1502,1504,1506,1508,1510,1513,1515,1517,1519,1521],{"class":270,"line":611},[268,1493,420],{"class":278},[268,1495,576],{"class":396},[268,1497,426],{"class":278},[268,1499,363],{"class":318},[268,1501,325],{"class":278},[268,1503,433],{"class":278},[268,1505,436],{"class":278},[268,1507,444],{"class":337},[268,1509,441],{"class":278},[268,1511,1512],{"class":282},"segments",[268,1514,441],{"class":278},[268,1516,1512],{"class":282},[268,1518,457],{"class":278},[268,1520,433],{"class":278},[268,1522,462],{"class":278},[268,1524,1525,1527,1529],{"class":270,"line":617},[268,1526,420],{"class":278},[268,1528,1114],{"class":396},[268,1530,462],{"class":278},[268,1532,1533,1535,1537],{"class":270,"line":656},[268,1534,468],{"class":278},[268,1536,1267],{"class":396},[268,1538,400],{"class":278},[268,1540,1541],{"class":270,"line":661},[268,1542,305],{"emptyLinePlaceholder":39},[268,1544,1545,1547,1550,1553,1556,1558,1560,1562,1565,1568,1570,1573,1576,1578,1580],{"class":270,"line":667},[268,1546,405],{"class":278},[268,1548,1549],{"class":396},"button",[268,1551,1552],{"class":278}," @",[268,1554,1555],{"class":318},"click",[268,1557,325],{"class":278},[268,1559,433],{"class":278},[268,1561,1512],{"class":282},[268,1563,1564],{"class":278}," += ",[268,1566,1567],{"class":337},"8",[268,1569,433],{"class":278},[268,1571,1572],{"class":278},">",[268,1574,1575],{"class":282},"Increase Detail",[268,1577,478],{"class":278},[268,1579,1549],{"class":396},[268,1581,400],{"class":278},[268,1583,1584,1586,1588],{"class":270,"line":705},[268,1585,478],{"class":278},[268,1587,397],{"class":396},[268,1589,400],{"class":278},[1170,1591,1592],{},[250,1593,1594,1595,992],{},"Recreating instances can be expensive. For frequently changing values, prefer using props or template refs instead of reactive ",[254,1596,363],{},[245,1598,1600],{"id":1599},"key-takeaways","Key Takeaways",[1602,1603,1604,1614,1621,1630],"card-group",{},[1605,1606,1609],"card",{"icon":1607,"title":1608},"i-lucide-list","Array Format",[250,1610,1611,1613],{},[254,1612,363],{}," always accepts an array, even for single arguments or options objects.",[1605,1615,1618],{"icon":1616,"title":1617},"i-lucide-arrow-right","Order Matters",[250,1619,1620],{},"Arguments must match the Three.js constructor signature exactly.",[1605,1622,1624],{"icon":1623,"title":59},"i-lucide-refresh-cw",[250,1625,1626,1627,1629],{},"Changing ",[254,1628,363],{}," recreates the instance - use sparingly for performance.",[1605,1631,1634],{"icon":1632,"title":1633},"i-lucide-book-open","Check the Docs",[250,1635,1636,1637,1640],{},"Reference ",[490,1638,495],{"href":492,"rel":1639},[494]," for constructor signatures.",[1642,1643,1644],"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}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":264,"searchDepth":271,"depth":302,"links":1646},[1647,1648,1650,1656,1658,1659],{"id":247,"depth":302,"text":248},{"id":367,"depth":302,"text":1649},"The args Prop",{"id":499,"depth":302,"text":500,"children":1651},[1652,1653,1654,1655],{"id":504,"depth":308,"text":505},{"id":714,"depth":308,"text":715},{"id":838,"depth":308,"text":839},{"id":1027,"depth":308,"text":1028},{"id":1180,"depth":302,"text":1657},"When to Use args vs Props",{"id":1395,"depth":302,"text":1396},{"id":1599,"depth":302,"text":1600},"Learn how to pass constructor arguments to Three.js objects using the args prop in TresJS.","md",null,{},{"title":63,"description":1660},"G6pT_SdiNZUyl-WhCx7zi7FAvEo-1ifANhgTrAXHsWg",[1667,1669],{"title":59,"path":60,"stem":61,"description":1668,"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":1670,"children":-1},"Learn how TresJS maps Vue props to Three.js object properties for a declarative 3D development experience.",1774953662342]