[{"data":1,"prerenderedAt":2218},["ShallowReactive",2],{"navigation":3,"/essentials/concepts/declarative-properties":256,"/essentials/concepts/declarative-properties-surround":2213},[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":67,"body":258,"description":2207,"extension":2208,"links":2209,"meta":2210,"navigation":39,"path":68,"seo":2211,"stem":69,"__hash__":2212},"docs/2.essentials/2.concepts/4.declarative-properties.md",{"type":259,"value":260,"toc":2182},"minimark",[261,266,270,421,424,559,565,569,572,577,580,695,703,720,853,857,860,904,908,911,1010,1014,1017,1021,1134,1138,1205,1209,1296,1300,1306,1316,1374,1379,1382,1472,1481,1484,1487,1740,1750,1754,1758,1952,1956,2133,2137,2178],[262,263,265],"h2",{"id":264},"from-imperative-to-declarative","From Imperative to Declarative",[267,268,269],"p",{},"In vanilla Three.js, you set properties imperatively:",[271,272,277],"pre",{"className":273,"code":274,"language":275,"meta":276,"style":276},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const mesh = new THREE.Mesh(geometry, material)\nmesh.position.set(1, 2, 3)\nmesh.rotation.set(0, Math.PI, 0)\nmesh.visible = true\nmesh.castShadow = true\n","js","",[278,279,280,319,355,391,407],"code",{"__ignoreMap":276},[281,282,285,289,293,297,300,303,306,310,313,316],"span",{"class":283,"line":284},"line",1,[281,286,288],{"class":287},"spNyl","const",[281,290,292],{"class":291},"sTEyZ"," mesh ",[281,294,296],{"class":295},"sMK4o","=",[281,298,299],{"class":295}," new",[281,301,302],{"class":291}," THREE",[281,304,305],{"class":295},".",[281,307,309],{"class":308},"s2Zo4","Mesh",[281,311,312],{"class":291},"(geometry",[281,314,315],{"class":295},",",[281,317,318],{"class":291}," material)\n",[281,320,322,325,327,330,332,335,338,342,344,347,349,352],{"class":283,"line":321},2,[281,323,324],{"class":291},"mesh",[281,326,305],{"class":295},[281,328,329],{"class":291},"position",[281,331,305],{"class":295},[281,333,334],{"class":308},"set",[281,336,337],{"class":291},"(",[281,339,341],{"class":340},"sbssI","1",[281,343,315],{"class":295},[281,345,346],{"class":340}," 2",[281,348,315],{"class":295},[281,350,351],{"class":340}," 3",[281,353,354],{"class":291},")\n",[281,356,358,360,362,365,367,369,371,374,376,379,381,384,386,389],{"class":283,"line":357},3,[281,359,324],{"class":291},[281,361,305],{"class":295},[281,363,364],{"class":291},"rotation",[281,366,305],{"class":295},[281,368,334],{"class":308},[281,370,337],{"class":291},[281,372,373],{"class":340},"0",[281,375,315],{"class":295},[281,377,378],{"class":291}," Math",[281,380,305],{"class":295},[281,382,383],{"class":291},"PI",[281,385,315],{"class":295},[281,387,388],{"class":340}," 0",[281,390,354],{"class":291},[281,392,394,396,398,401,403],{"class":283,"line":393},4,[281,395,324],{"class":291},[281,397,305],{"class":295},[281,399,400],{"class":291},"visible ",[281,402,296],{"class":295},[281,404,406],{"class":405},"sfNiH"," true\n",[281,408,410,412,414,417,419],{"class":283,"line":409},5,[281,411,324],{"class":291},[281,413,305],{"class":295},[281,415,416],{"class":291},"castShadow ",[281,418,296],{"class":295},[281,420,406],{"class":405},[267,422,423],{},"TresJS lets you declare these properties directly on components:",[271,425,429],{"className":426,"code":427,"language":428,"meta":276,"style":276},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003CTresMesh\n    :position=\"[1, 2, 3]\"\n    :rotation=\"[0, Math.PI, 0]\"\n    :visible=\"true\"\n    :cast-shadow=\"true\"\n  >\n    \u003CTresBoxGeometry />\n    \u003CTresMeshStandardMaterial />\n  \u003C/TresMesh>\n\u003C/template>\n","vue",[278,430,431,443,451,468,482,496,510,516,528,538,549],{"__ignoreMap":276},[281,432,433,436,440],{"class":283,"line":284},[281,434,435],{"class":295},"\u003C",[281,437,439],{"class":438},"swJcz","template",[281,441,442],{"class":295},">\n",[281,444,445,448],{"class":283,"line":321},[281,446,447],{"class":295},"  \u003C",[281,449,450],{"class":438},"TresMesh\n",[281,452,453,456,458,461,465],{"class":283,"line":357},[281,454,455],{"class":287},"    :position",[281,457,296],{"class":295},[281,459,460],{"class":295},"\"",[281,462,464],{"class":463},"sfazB","[1, 2, 3]",[281,466,467],{"class":295},"\"\n",[281,469,470,473,475,477,480],{"class":283,"line":393},[281,471,472],{"class":287},"    :rotation",[281,474,296],{"class":295},[281,476,460],{"class":295},[281,478,479],{"class":463},"[0, Math.PI, 0]",[281,481,467],{"class":295},[281,483,484,487,489,491,494],{"class":283,"line":409},[281,485,486],{"class":287},"    :visible",[281,488,296],{"class":295},[281,490,460],{"class":295},[281,492,493],{"class":463},"true",[281,495,467],{"class":295},[281,497,499,502,504,506,508],{"class":283,"line":498},6,[281,500,501],{"class":287},"    :cast-shadow",[281,503,296],{"class":295},[281,505,460],{"class":295},[281,507,493],{"class":463},[281,509,467],{"class":295},[281,511,513],{"class":283,"line":512},7,[281,514,515],{"class":295},"  >\n",[281,517,519,522,525],{"class":283,"line":518},8,[281,520,521],{"class":295},"    \u003C",[281,523,524],{"class":438},"TresBoxGeometry",[281,526,527],{"class":295}," />\n",[281,529,531,533,536],{"class":283,"line":530},9,[281,532,521],{"class":295},[281,534,535],{"class":438},"TresMeshStandardMaterial",[281,537,527],{"class":295},[281,539,541,544,547],{"class":283,"line":540},10,[281,542,543],{"class":295},"  \u003C/",[281,545,546],{"class":438},"TresMesh",[281,548,442],{"class":295},[281,550,552,555,557],{"class":283,"line":551},11,[281,553,554],{"class":295},"\u003C/",[281,556,439],{"class":438},[281,558,442],{"class":295},[560,561],"video-accordion",{"start-time":562,"title":563,"video-id":564},"445","Watch this video from Alvarosabu about the TresJS core principles","XsXfF9-qe60",[262,566,568],{"id":567},"property-mapping-rules","Property Mapping Rules",[267,570,571],{},"TresJS automatically maps props to Three.js properties using these conventions:",[573,574,576],"h3",{"id":575},"_1-direct-properties","1. Direct Properties",[267,578,579],{},"Props map directly to properties of the same name:",[271,581,583],{"className":426,"code":582,"language":428,"meta":276,"style":276},"\u003Ctemplate>\n  \u003C!-- mesh.visible = true -->\n  \u003CTresMesh :visible=\"true\" />\n\n  \u003C!-- mesh.castShadow = true -->\n  \u003CTresMesh :cast-shadow=\"true\" />\n\n  \u003C!-- material.transparent = true -->\n  \u003CTresMeshStandardMaterial :transparent=\"true\" :opacity=\"0.5\" />\n\u003C/template>\n",[278,584,585,593,599,618,623,628,647,651,656,687],{"__ignoreMap":276},[281,586,587,589,591],{"class":283,"line":284},[281,588,435],{"class":295},[281,590,439],{"class":438},[281,592,442],{"class":295},[281,594,595],{"class":283,"line":321},[281,596,598],{"class":597},"sHwdD","  \u003C!-- mesh.visible = true -->\n",[281,600,601,603,605,608,610,612,614,616],{"class":283,"line":357},[281,602,447],{"class":295},[281,604,546],{"class":438},[281,606,607],{"class":287}," :visible",[281,609,296],{"class":295},[281,611,460],{"class":295},[281,613,493],{"class":463},[281,615,460],{"class":295},[281,617,527],{"class":295},[281,619,620],{"class":283,"line":393},[281,621,622],{"emptyLinePlaceholder":39},"\n",[281,624,625],{"class":283,"line":409},[281,626,627],{"class":597},"  \u003C!-- mesh.castShadow = true -->\n",[281,629,630,632,634,637,639,641,643,645],{"class":283,"line":498},[281,631,447],{"class":295},[281,633,546],{"class":438},[281,635,636],{"class":287}," :cast-shadow",[281,638,296],{"class":295},[281,640,460],{"class":295},[281,642,493],{"class":463},[281,644,460],{"class":295},[281,646,527],{"class":295},[281,648,649],{"class":283,"line":512},[281,650,622],{"emptyLinePlaceholder":39},[281,652,653],{"class":283,"line":518},[281,654,655],{"class":597},"  \u003C!-- material.transparent = true -->\n",[281,657,658,660,662,665,667,669,671,673,676,678,680,683,685],{"class":283,"line":530},[281,659,447],{"class":295},[281,661,535],{"class":438},[281,663,664],{"class":287}," :transparent",[281,666,296],{"class":295},[281,668,460],{"class":295},[281,670,493],{"class":463},[281,672,460],{"class":295},[281,674,675],{"class":287}," :opacity",[281,677,296],{"class":295},[281,679,460],{"class":295},[281,681,682],{"class":463},"0.5",[281,684,460],{"class":295},[281,686,527],{"class":295},[281,688,689,691,693],{"class":283,"line":540},[281,690,554],{"class":295},[281,692,439],{"class":438},[281,694,442],{"class":295},[573,696,698,699,702],{"id":697},"_2-properties-with-set-methods","2. Properties with ",[278,700,701],{},".set()"," Methods",[267,704,705,706,708,709,712,713,712,716,719],{},"When a property has a ",[278,707,701],{}," method (like ",[278,710,711],{},"Vector3",", ",[278,714,715],{},"Euler",[278,717,718],{},"Color","), TresJS automatically calls it with array values:",[271,721,723],{"className":426,"code":722,"language":428,"meta":276,"style":276},"\u003Ctemplate>\n  \u003C!-- Calls: mesh.position.set(1, 2, 3) -->\n  \u003CTresMesh :position=\"[1, 2, 3]\" />\n\n  \u003C!-- Calls: mesh.rotation.set(0, Math.PI, 0) -->\n  \u003CTresMesh :rotation=\"[0, Math.PI, 0]\" />\n\n  \u003C!-- Calls: mesh.scale.set(2, 2, 2) -->\n  \u003CTresMesh :scale=\"[2, 2, 2]\" />\n\n  \u003C!-- Calls: material.color.set('#ff6b35') -->\n  \u003CTresMeshStandardMaterial color=\"#ff6b35\" />\n\u003C/template>\n",[278,724,725,733,738,757,761,766,785,789,794,814,818,823,844],{"__ignoreMap":276},[281,726,727,729,731],{"class":283,"line":284},[281,728,435],{"class":295},[281,730,439],{"class":438},[281,732,442],{"class":295},[281,734,735],{"class":283,"line":321},[281,736,737],{"class":597},"  \u003C!-- Calls: mesh.position.set(1, 2, 3) -->\n",[281,739,740,742,744,747,749,751,753,755],{"class":283,"line":357},[281,741,447],{"class":295},[281,743,546],{"class":438},[281,745,746],{"class":287}," :position",[281,748,296],{"class":295},[281,750,460],{"class":295},[281,752,464],{"class":463},[281,754,460],{"class":295},[281,756,527],{"class":295},[281,758,759],{"class":283,"line":393},[281,760,622],{"emptyLinePlaceholder":39},[281,762,763],{"class":283,"line":409},[281,764,765],{"class":597},"  \u003C!-- Calls: mesh.rotation.set(0, Math.PI, 0) -->\n",[281,767,768,770,772,775,777,779,781,783],{"class":283,"line":498},[281,769,447],{"class":295},[281,771,546],{"class":438},[281,773,774],{"class":287}," :rotation",[281,776,296],{"class":295},[281,778,460],{"class":295},[281,780,479],{"class":463},[281,782,460],{"class":295},[281,784,527],{"class":295},[281,786,787],{"class":283,"line":512},[281,788,622],{"emptyLinePlaceholder":39},[281,790,791],{"class":283,"line":518},[281,792,793],{"class":597},"  \u003C!-- Calls: mesh.scale.set(2, 2, 2) -->\n",[281,795,796,798,800,803,805,807,810,812],{"class":283,"line":530},[281,797,447],{"class":295},[281,799,546],{"class":438},[281,801,802],{"class":287}," :scale",[281,804,296],{"class":295},[281,806,460],{"class":295},[281,808,809],{"class":463},"[2, 2, 2]",[281,811,460],{"class":295},[281,813,527],{"class":295},[281,815,816],{"class":283,"line":540},[281,817,622],{"emptyLinePlaceholder":39},[281,819,820],{"class":283,"line":551},[281,821,822],{"class":597},"  \u003C!-- Calls: material.color.set('#ff6b35') -->\n",[281,824,826,828,830,833,835,837,840,842],{"class":283,"line":825},12,[281,827,447],{"class":295},[281,829,535],{"class":438},[281,831,832],{"class":287}," color",[281,834,296],{"class":295},[281,836,460],{"class":295},[281,838,839],{"class":463},"#ff6b35",[281,841,460],{"class":295},[281,843,527],{"class":295},[281,845,847,849,851],{"class":283,"line":846},13,[281,848,554],{"class":295},[281,850,439],{"class":438},[281,852,442],{"class":295},[573,854,856],{"id":855},"_3-scalar-shorthand","3. Scalar Shorthand",[267,858,859],{},"For uniform scaling, pass a single number:",[271,861,863],{"className":426,"code":862,"language":428,"meta":276,"style":276},"\u003Ctemplate>\n  \u003C!-- Calls: mesh.scale.set(2, 2, 2) -->\n  \u003CTresMesh :scale=\"2\" />\n\u003C/template>\n",[278,864,865,873,877,896],{"__ignoreMap":276},[281,866,867,869,871],{"class":283,"line":284},[281,868,435],{"class":295},[281,870,439],{"class":438},[281,872,442],{"class":295},[281,874,875],{"class":283,"line":321},[281,876,793],{"class":597},[281,878,879,881,883,885,887,889,892,894],{"class":283,"line":357},[281,880,447],{"class":295},[281,882,546],{"class":438},[281,884,802],{"class":287},[281,886,296],{"class":295},[281,888,460],{"class":295},[281,890,891],{"class":463},"2",[281,893,460],{"class":295},[281,895,527],{"class":295},[281,897,898,900,902],{"class":283,"line":393},[281,899,554],{"class":295},[281,901,439],{"class":438},[281,903,442],{"class":295},[573,905,907],{"id":906},"_4-kebab-case-conversion","4. kebab-case Conversion",[267,909,910],{},"Vue's kebab-case props are converted to camelCase properties:",[271,912,914],{"className":426,"code":913,"language":428,"meta":276,"style":276},"\u003Ctemplate>\n  \u003C!-- mesh.castShadow = true -->\n  \u003CTresMesh :cast-shadow=\"true\" />\n\n  \u003C!-- mesh.receiveShadow = true -->\n  \u003CTresMesh :receive-shadow=\"true\" />\n\n  \u003C!-- material.flatShading = true -->\n  \u003CTresMeshStandardMaterial :flat-shading=\"true\" />\n\u003C/template>\n",[278,915,916,924,928,946,950,955,974,978,983,1002],{"__ignoreMap":276},[281,917,918,920,922],{"class":283,"line":284},[281,919,435],{"class":295},[281,921,439],{"class":438},[281,923,442],{"class":295},[281,925,926],{"class":283,"line":321},[281,927,627],{"class":597},[281,929,930,932,934,936,938,940,942,944],{"class":283,"line":357},[281,931,447],{"class":295},[281,933,546],{"class":438},[281,935,636],{"class":287},[281,937,296],{"class":295},[281,939,460],{"class":295},[281,941,493],{"class":463},[281,943,460],{"class":295},[281,945,527],{"class":295},[281,947,948],{"class":283,"line":393},[281,949,622],{"emptyLinePlaceholder":39},[281,951,952],{"class":283,"line":409},[281,953,954],{"class":597},"  \u003C!-- mesh.receiveShadow = true -->\n",[281,956,957,959,961,964,966,968,970,972],{"class":283,"line":498},[281,958,447],{"class":295},[281,960,546],{"class":438},[281,962,963],{"class":287}," :receive-shadow",[281,965,296],{"class":295},[281,967,460],{"class":295},[281,969,493],{"class":463},[281,971,460],{"class":295},[281,973,527],{"class":295},[281,975,976],{"class":283,"line":512},[281,977,622],{"emptyLinePlaceholder":39},[281,979,980],{"class":283,"line":518},[281,981,982],{"class":597},"  \u003C!-- material.flatShading = true -->\n",[281,984,985,987,989,992,994,996,998,1000],{"class":283,"line":530},[281,986,447],{"class":295},[281,988,535],{"class":438},[281,990,991],{"class":287}," :flat-shading",[281,993,296],{"class":295},[281,995,460],{"class":295},[281,997,493],{"class":463},[281,999,460],{"class":295},[281,1001,527],{"class":295},[281,1003,1004,1006,1008],{"class":283,"line":540},[281,1005,554],{"class":295},[281,1007,439],{"class":438},[281,1009,442],{"class":295},[262,1011,1013],{"id":1012},"pierced-props-nested-properties","Pierced Props (Nested Properties)",[267,1015,1016],{},"TresJS supports setting nested properties using dash notation:",[573,1018,1020],{"id":1019},"transform-axes","Transform Axes",[271,1022,1024],{"className":426,"code":1023,"language":428,"meta":276,"style":276},"\u003Ctemplate>\n  \u003C!-- mesh.position.x = 1, mesh.position.y = 2 -->\n  \u003CTresMesh :position-x=\"1\" :position-y=\"2\" />\n\n  \u003C!-- mesh.rotation.y = Math.PI -->\n  \u003CTresMesh :rotation-y=\"Math.PI\" />\n\n  \u003C!-- mesh.scale.x = 2 -->\n  \u003CTresMesh :scale-x=\"2\" />\n\u003C/template>\n",[278,1025,1026,1034,1039,1069,1073,1078,1098,1102,1107,1126],{"__ignoreMap":276},[281,1027,1028,1030,1032],{"class":283,"line":284},[281,1029,435],{"class":295},[281,1031,439],{"class":438},[281,1033,442],{"class":295},[281,1035,1036],{"class":283,"line":321},[281,1037,1038],{"class":597},"  \u003C!-- mesh.position.x = 1, mesh.position.y = 2 -->\n",[281,1040,1041,1043,1045,1048,1050,1052,1054,1056,1059,1061,1063,1065,1067],{"class":283,"line":357},[281,1042,447],{"class":295},[281,1044,546],{"class":438},[281,1046,1047],{"class":287}," :position-x",[281,1049,296],{"class":295},[281,1051,460],{"class":295},[281,1053,341],{"class":463},[281,1055,460],{"class":295},[281,1057,1058],{"class":287}," :position-y",[281,1060,296],{"class":295},[281,1062,460],{"class":295},[281,1064,891],{"class":463},[281,1066,460],{"class":295},[281,1068,527],{"class":295},[281,1070,1071],{"class":283,"line":393},[281,1072,622],{"emptyLinePlaceholder":39},[281,1074,1075],{"class":283,"line":409},[281,1076,1077],{"class":597},"  \u003C!-- mesh.rotation.y = Math.PI -->\n",[281,1079,1080,1082,1084,1087,1089,1091,1094,1096],{"class":283,"line":498},[281,1081,447],{"class":295},[281,1083,546],{"class":438},[281,1085,1086],{"class":287}," :rotation-y",[281,1088,296],{"class":295},[281,1090,460],{"class":295},[281,1092,1093],{"class":463},"Math.PI",[281,1095,460],{"class":295},[281,1097,527],{"class":295},[281,1099,1100],{"class":283,"line":512},[281,1101,622],{"emptyLinePlaceholder":39},[281,1103,1104],{"class":283,"line":518},[281,1105,1106],{"class":597},"  \u003C!-- mesh.scale.x = 2 -->\n",[281,1108,1109,1111,1113,1116,1118,1120,1122,1124],{"class":283,"line":530},[281,1110,447],{"class":295},[281,1112,546],{"class":438},[281,1114,1115],{"class":287}," :scale-x",[281,1117,296],{"class":295},[281,1119,460],{"class":295},[281,1121,891],{"class":463},[281,1123,460],{"class":295},[281,1125,527],{"class":295},[281,1127,1128,1130,1132],{"class":283,"line":540},[281,1129,554],{"class":295},[281,1131,439],{"class":438},[281,1133,442],{"class":295},[573,1135,1137],{"id":1136},"color-channels","Color Channels",[271,1139,1141],{"className":426,"code":1140,"language":428,"meta":276,"style":276},"\u003Ctemplate>\n  \u003C!-- material.color.r = 1, material.color.g = 0.5 -->\n  \u003CTresMeshStandardMaterial :color-r=\"1\" :color-g=\"0.5\" :color-b=\"0\" />\n\u003C/template>\n",[278,1142,1143,1151,1156,1197],{"__ignoreMap":276},[281,1144,1145,1147,1149],{"class":283,"line":284},[281,1146,435],{"class":295},[281,1148,439],{"class":438},[281,1150,442],{"class":295},[281,1152,1153],{"class":283,"line":321},[281,1154,1155],{"class":597},"  \u003C!-- material.color.r = 1, material.color.g = 0.5 -->\n",[281,1157,1158,1160,1162,1165,1167,1169,1171,1173,1176,1178,1180,1182,1184,1187,1189,1191,1193,1195],{"class":283,"line":357},[281,1159,447],{"class":295},[281,1161,535],{"class":438},[281,1163,1164],{"class":287}," :color-r",[281,1166,296],{"class":295},[281,1168,460],{"class":295},[281,1170,341],{"class":463},[281,1172,460],{"class":295},[281,1174,1175],{"class":287}," :color-g",[281,1177,296],{"class":295},[281,1179,460],{"class":295},[281,1181,682],{"class":463},[281,1183,460],{"class":295},[281,1185,1186],{"class":287}," :color-b",[281,1188,296],{"class":295},[281,1190,460],{"class":295},[281,1192,373],{"class":463},[281,1194,460],{"class":295},[281,1196,527],{"class":295},[281,1198,1199,1201,1203],{"class":283,"line":393},[281,1200,554],{"class":295},[281,1202,439],{"class":438},[281,1204,442],{"class":295},[573,1206,1208],{"id":1207},"deep-nesting","Deep Nesting",[271,1210,1212],{"className":426,"code":1211,"language":428,"meta":276,"style":276},"\u003Ctemplate>\n  \u003C!-- light.shadow.camera.near = 0.5 -->\n  \u003CTresDirectionalLight :shadow-camera-near=\"0.5\" :shadow-camera-far=\"500\" />\n\n  \u003C!-- light.shadow.mapSize.width = 2048 -->\n  \u003CTresDirectionalLight :shadow-map-size-width=\"2048\" />\n\u003C/template>\n",[278,1213,1214,1222,1227,1259,1263,1268,1288],{"__ignoreMap":276},[281,1215,1216,1218,1220],{"class":283,"line":284},[281,1217,435],{"class":295},[281,1219,439],{"class":438},[281,1221,442],{"class":295},[281,1223,1224],{"class":283,"line":321},[281,1225,1226],{"class":597},"  \u003C!-- light.shadow.camera.near = 0.5 -->\n",[281,1228,1229,1231,1234,1237,1239,1241,1243,1245,1248,1250,1252,1255,1257],{"class":283,"line":357},[281,1230,447],{"class":295},[281,1232,1233],{"class":438},"TresDirectionalLight",[281,1235,1236],{"class":287}," :shadow-camera-near",[281,1238,296],{"class":295},[281,1240,460],{"class":295},[281,1242,682],{"class":463},[281,1244,460],{"class":295},[281,1246,1247],{"class":287}," :shadow-camera-far",[281,1249,296],{"class":295},[281,1251,460],{"class":295},[281,1253,1254],{"class":463},"500",[281,1256,460],{"class":295},[281,1258,527],{"class":295},[281,1260,1261],{"class":283,"line":393},[281,1262,622],{"emptyLinePlaceholder":39},[281,1264,1265],{"class":283,"line":409},[281,1266,1267],{"class":597},"  \u003C!-- light.shadow.mapSize.width = 2048 -->\n",[281,1269,1270,1272,1274,1277,1279,1281,1284,1286],{"class":283,"line":498},[281,1271,447],{"class":295},[281,1273,1233],{"class":438},[281,1275,1276],{"class":287}," :shadow-map-size-width",[281,1278,296],{"class":295},[281,1280,460],{"class":295},[281,1282,1283],{"class":463},"2048",[281,1285,460],{"class":295},[281,1287,527],{"class":295},[281,1289,1290,1292,1294],{"class":283,"line":512},[281,1291,554],{"class":295},[281,1293,439],{"class":438},[281,1295,442],{"class":295},[262,1297,1299],{"id":1298},"special-props","Special Props",[573,1301,1303],{"id":1302},"lookat",[278,1304,1305],{},"lookAt",[267,1307,1308,1309,1311,1312,1315],{},"The ",[278,1310,1305],{}," prop calls the object's ",[278,1313,1314],{},".lookAt()"," method:",[271,1317,1319],{"className":426,"code":1318,"language":428,"meta":276,"style":276},"\u003Ctemplate>\n  \u003C!-- camera.lookAt(0, 0, 0) -->\n  \u003CTresPerspectiveCamera :position=\"[5, 5, 5]\" :look-at=\"[0, 0, 0]\" />\n\u003C/template>\n",[278,1320,1321,1329,1334,1366],{"__ignoreMap":276},[281,1322,1323,1325,1327],{"class":283,"line":284},[281,1324,435],{"class":295},[281,1326,439],{"class":438},[281,1328,442],{"class":295},[281,1330,1331],{"class":283,"line":321},[281,1332,1333],{"class":597},"  \u003C!-- camera.lookAt(0, 0, 0) -->\n",[281,1335,1336,1338,1341,1343,1345,1347,1350,1352,1355,1357,1359,1362,1364],{"class":283,"line":357},[281,1337,447],{"class":295},[281,1339,1340],{"class":438},"TresPerspectiveCamera",[281,1342,746],{"class":287},[281,1344,296],{"class":295},[281,1346,460],{"class":295},[281,1348,1349],{"class":463},"[5, 5, 5]",[281,1351,460],{"class":295},[281,1353,1354],{"class":287}," :look-at",[281,1356,296],{"class":295},[281,1358,460],{"class":295},[281,1360,1361],{"class":463},"[0, 0, 0]",[281,1363,460],{"class":295},[281,1365,527],{"class":295},[281,1367,1368,1370,1372],{"class":283,"line":393},[281,1369,554],{"class":295},[281,1371,439],{"class":438},[281,1373,442],{"class":295},[573,1375,1377],{"id":1376},"attach",[278,1378,1376],{},[267,1380,1381],{},"Controls how children attach to parents (used for geometries and materials):",[271,1383,1385],{"className":426,"code":1384,"language":428,"meta":276,"style":276},"\u003Ctemplate>\n  \u003CTresMesh>\n    \u003C!-- Attaches as mesh.geometry -->\n    \u003CTresBoxGeometry attach=\"geometry\" />\n\n    \u003C!-- Attaches as mesh.material -->\n    \u003CTresMeshStandardMaterial attach=\"material\" />\n  \u003C/TresMesh>\n\u003C/template>\n",[278,1386,1387,1395,1403,1408,1428,1432,1437,1456,1464],{"__ignoreMap":276},[281,1388,1389,1391,1393],{"class":283,"line":284},[281,1390,435],{"class":295},[281,1392,439],{"class":438},[281,1394,442],{"class":295},[281,1396,1397,1399,1401],{"class":283,"line":321},[281,1398,447],{"class":295},[281,1400,546],{"class":438},[281,1402,442],{"class":295},[281,1404,1405],{"class":283,"line":357},[281,1406,1407],{"class":597},"    \u003C!-- Attaches as mesh.geometry -->\n",[281,1409,1410,1412,1414,1417,1419,1421,1424,1426],{"class":283,"line":393},[281,1411,521],{"class":295},[281,1413,524],{"class":438},[281,1415,1416],{"class":287}," attach",[281,1418,296],{"class":295},[281,1420,460],{"class":295},[281,1422,1423],{"class":463},"geometry",[281,1425,460],{"class":295},[281,1427,527],{"class":295},[281,1429,1430],{"class":283,"line":409},[281,1431,622],{"emptyLinePlaceholder":39},[281,1433,1434],{"class":283,"line":498},[281,1435,1436],{"class":597},"    \u003C!-- Attaches as mesh.material -->\n",[281,1438,1439,1441,1443,1445,1447,1449,1452,1454],{"class":283,"line":512},[281,1440,521],{"class":295},[281,1442,535],{"class":438},[281,1444,1416],{"class":287},[281,1446,296],{"class":295},[281,1448,460],{"class":295},[281,1450,1451],{"class":463},"material",[281,1453,460],{"class":295},[281,1455,527],{"class":295},[281,1457,1458,1460,1462],{"class":283,"line":518},[281,1459,543],{"class":295},[281,1461,546],{"class":438},[281,1463,442],{"class":295},[281,1465,1466,1468,1470],{"class":283,"line":530},[281,1467,554],{"class":295},[281,1469,439],{"class":438},[281,1471,442],{"class":295},[1473,1474,1475],"tip",{},[267,1476,1477,1478,1480],{},"Geometries and materials auto-attach - you rarely need to specify ",[278,1479,1376],{}," manually.",[262,1482,59],{"id":1483},"reactivity",[267,1485,1486],{},"All props are reactive by default. When a prop value changes, TresJS updates the Three.js property:",[271,1488,1490],{"className":426,"code":1489,"language":428,"meta":276,"style":276},"\u003Cscript setup lang=\"ts\">\nconst positionY = ref(0)\nconst color = ref('#ff6b35')\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresMesh :position-y=\"positionY\">\n    \u003CTresBoxGeometry />\n    \u003CTresMeshStandardMaterial :color=\"color\" />\n  \u003C/TresMesh>\n\n  \u003Cinput type=\"range\" v-model=\"positionY\" min=\"-5\" max=\"5\" step=\"0.1\" />\n  \u003Cinput type=\"color\" v-model=\"color\" />\n\u003C/template>\n",[278,1491,1492,1516,1534,1556,1564,1568,1576,1595,1603,1623,1631,1635,1703,1731],{"__ignoreMap":276},[281,1493,1494,1496,1499,1502,1505,1507,1509,1512,1514],{"class":283,"line":284},[281,1495,435],{"class":295},[281,1497,1498],{"class":438},"script",[281,1500,1501],{"class":287}," setup",[281,1503,1504],{"class":287}," lang",[281,1506,296],{"class":295},[281,1508,460],{"class":295},[281,1510,1511],{"class":463},"ts",[281,1513,460],{"class":295},[281,1515,442],{"class":295},[281,1517,1518,1520,1523,1525,1528,1530,1532],{"class":283,"line":321},[281,1519,288],{"class":287},[281,1521,1522],{"class":291}," positionY ",[281,1524,296],{"class":295},[281,1526,1527],{"class":308}," ref",[281,1529,337],{"class":291},[281,1531,373],{"class":340},[281,1533,354],{"class":291},[281,1535,1536,1538,1541,1543,1545,1547,1550,1552,1554],{"class":283,"line":357},[281,1537,288],{"class":287},[281,1539,1540],{"class":291}," color ",[281,1542,296],{"class":295},[281,1544,1527],{"class":308},[281,1546,337],{"class":291},[281,1548,1549],{"class":295},"'",[281,1551,839],{"class":463},[281,1553,1549],{"class":295},[281,1555,354],{"class":291},[281,1557,1558,1560,1562],{"class":283,"line":393},[281,1559,554],{"class":295},[281,1561,1498],{"class":438},[281,1563,442],{"class":295},[281,1565,1566],{"class":283,"line":409},[281,1567,622],{"emptyLinePlaceholder":39},[281,1569,1570,1572,1574],{"class":283,"line":498},[281,1571,435],{"class":295},[281,1573,439],{"class":438},[281,1575,442],{"class":295},[281,1577,1578,1580,1582,1584,1586,1588,1591,1593],{"class":283,"line":512},[281,1579,447],{"class":295},[281,1581,546],{"class":438},[281,1583,1058],{"class":287},[281,1585,296],{"class":295},[281,1587,460],{"class":295},[281,1589,1590],{"class":463},"positionY",[281,1592,460],{"class":295},[281,1594,442],{"class":295},[281,1596,1597,1599,1601],{"class":283,"line":518},[281,1598,521],{"class":295},[281,1600,524],{"class":438},[281,1602,527],{"class":295},[281,1604,1605,1607,1609,1612,1614,1616,1619,1621],{"class":283,"line":530},[281,1606,521],{"class":295},[281,1608,535],{"class":438},[281,1610,1611],{"class":287}," :color",[281,1613,296],{"class":295},[281,1615,460],{"class":295},[281,1617,1618],{"class":463},"color",[281,1620,460],{"class":295},[281,1622,527],{"class":295},[281,1624,1625,1627,1629],{"class":283,"line":540},[281,1626,543],{"class":295},[281,1628,546],{"class":438},[281,1630,442],{"class":295},[281,1632,1633],{"class":283,"line":551},[281,1634,622],{"emptyLinePlaceholder":39},[281,1636,1637,1639,1642,1645,1647,1649,1652,1654,1657,1659,1661,1663,1665,1668,1670,1672,1675,1677,1680,1682,1684,1687,1689,1692,1694,1696,1699,1701],{"class":283,"line":825},[281,1638,447],{"class":295},[281,1640,1641],{"class":438},"input",[281,1643,1644],{"class":287}," type",[281,1646,296],{"class":295},[281,1648,460],{"class":295},[281,1650,1651],{"class":463},"range",[281,1653,460],{"class":295},[281,1655,1656],{"class":287}," v-model",[281,1658,296],{"class":295},[281,1660,460],{"class":295},[281,1662,1590],{"class":463},[281,1664,460],{"class":295},[281,1666,1667],{"class":287}," min",[281,1669,296],{"class":295},[281,1671,460],{"class":295},[281,1673,1674],{"class":463},"-5",[281,1676,460],{"class":295},[281,1678,1679],{"class":287}," max",[281,1681,296],{"class":295},[281,1683,460],{"class":295},[281,1685,1686],{"class":463},"5",[281,1688,460],{"class":295},[281,1690,1691],{"class":287}," step",[281,1693,296],{"class":295},[281,1695,460],{"class":295},[281,1697,1698],{"class":463},"0.1",[281,1700,460],{"class":295},[281,1702,527],{"class":295},[281,1704,1705,1707,1709,1711,1713,1715,1717,1719,1721,1723,1725,1727,1729],{"class":283,"line":846},[281,1706,447],{"class":295},[281,1708,1641],{"class":438},[281,1710,1644],{"class":287},[281,1712,296],{"class":295},[281,1714,460],{"class":295},[281,1716,1618],{"class":463},[281,1718,460],{"class":295},[281,1720,1656],{"class":287},[281,1722,296],{"class":295},[281,1724,460],{"class":295},[281,1726,1618],{"class":463},[281,1728,460],{"class":295},[281,1730,527],{"class":295},[281,1732,1734,1736,1738],{"class":283,"line":1733},14,[281,1735,554],{"class":295},[281,1737,439],{"class":438},[281,1739,442],{"class":295},[1741,1742,1743],"warning",{},[267,1744,1745,1746,1749],{},"For high-frequency updates (animations at 60fps), use template refs instead of reactive props. See ",[1747,1748,59],"a",{"href":60}," for performance patterns.",[262,1751,1753],{"id":1752},"common-patterns","Common Patterns",[573,1755,1757],{"id":1756},"complete-mesh-example","Complete Mesh Example",[271,1759,1761],{"className":426,"code":1760,"language":428,"meta":276,"style":276},"\u003Ctemplate>\n  \u003CTresMesh\n    :position=\"[0, 1, 0]\"\n    :rotation=\"[0, Math.PI / 4, 0]\"\n    :scale=\"1.5\"\n    :cast-shadow=\"true\"\n    :receive-shadow=\"true\"\n    name=\"my-mesh\"\n  >\n    \u003CTresBoxGeometry :args=\"[1, 1, 1]\" />\n    \u003CTresMeshStandardMaterial\n      color=\"#ff6b35\"\n      :metalness=\"0.3\"\n      :roughness=\"0.7\"\n    />\n  \u003C/TresMesh>\n\u003C/template>\n",[278,1762,1763,1771,1777,1790,1803,1817,1829,1842,1856,1860,1880,1887,1900,1914,1928,1934,1943],{"__ignoreMap":276},[281,1764,1765,1767,1769],{"class":283,"line":284},[281,1766,435],{"class":295},[281,1768,439],{"class":438},[281,1770,442],{"class":295},[281,1772,1773,1775],{"class":283,"line":321},[281,1774,447],{"class":295},[281,1776,450],{"class":438},[281,1778,1779,1781,1783,1785,1788],{"class":283,"line":357},[281,1780,455],{"class":287},[281,1782,296],{"class":295},[281,1784,460],{"class":295},[281,1786,1787],{"class":463},"[0, 1, 0]",[281,1789,467],{"class":295},[281,1791,1792,1794,1796,1798,1801],{"class":283,"line":393},[281,1793,472],{"class":287},[281,1795,296],{"class":295},[281,1797,460],{"class":295},[281,1799,1800],{"class":463},"[0, Math.PI / 4, 0]",[281,1802,467],{"class":295},[281,1804,1805,1808,1810,1812,1815],{"class":283,"line":409},[281,1806,1807],{"class":287},"    :scale",[281,1809,296],{"class":295},[281,1811,460],{"class":295},[281,1813,1814],{"class":463},"1.5",[281,1816,467],{"class":295},[281,1818,1819,1821,1823,1825,1827],{"class":283,"line":498},[281,1820,501],{"class":287},[281,1822,296],{"class":295},[281,1824,460],{"class":295},[281,1826,493],{"class":463},[281,1828,467],{"class":295},[281,1830,1831,1834,1836,1838,1840],{"class":283,"line":512},[281,1832,1833],{"class":287},"    :receive-shadow",[281,1835,296],{"class":295},[281,1837,460],{"class":295},[281,1839,493],{"class":463},[281,1841,467],{"class":295},[281,1843,1844,1847,1849,1851,1854],{"class":283,"line":518},[281,1845,1846],{"class":287},"    name",[281,1848,296],{"class":295},[281,1850,460],{"class":295},[281,1852,1853],{"class":463},"my-mesh",[281,1855,467],{"class":295},[281,1857,1858],{"class":283,"line":530},[281,1859,515],{"class":295},[281,1861,1862,1864,1866,1869,1871,1873,1876,1878],{"class":283,"line":540},[281,1863,521],{"class":295},[281,1865,524],{"class":438},[281,1867,1868],{"class":287}," :args",[281,1870,296],{"class":295},[281,1872,460],{"class":295},[281,1874,1875],{"class":463},"[1, 1, 1]",[281,1877,460],{"class":295},[281,1879,527],{"class":295},[281,1881,1882,1884],{"class":283,"line":551},[281,1883,521],{"class":295},[281,1885,1886],{"class":438},"TresMeshStandardMaterial\n",[281,1888,1889,1892,1894,1896,1898],{"class":283,"line":825},[281,1890,1891],{"class":287},"      color",[281,1893,296],{"class":295},[281,1895,460],{"class":295},[281,1897,839],{"class":463},[281,1899,467],{"class":295},[281,1901,1902,1905,1907,1909,1912],{"class":283,"line":846},[281,1903,1904],{"class":287},"      :metalness",[281,1906,296],{"class":295},[281,1908,460],{"class":295},[281,1910,1911],{"class":463},"0.3",[281,1913,467],{"class":295},[281,1915,1916,1919,1921,1923,1926],{"class":283,"line":1733},[281,1917,1918],{"class":287},"      :roughness",[281,1920,296],{"class":295},[281,1922,460],{"class":295},[281,1924,1925],{"class":463},"0.7",[281,1927,467],{"class":295},[281,1929,1931],{"class":283,"line":1930},15,[281,1932,1933],{"class":295},"    />\n",[281,1935,1937,1939,1941],{"class":283,"line":1936},16,[281,1938,543],{"class":295},[281,1940,546],{"class":438},[281,1942,442],{"class":295},[281,1944,1946,1948,1950],{"class":283,"line":1945},17,[281,1947,554],{"class":295},[281,1949,439],{"class":438},[281,1951,442],{"class":295},[573,1953,1955],{"id":1954},"light-with-shadows","Light with Shadows",[271,1957,1959],{"className":426,"code":1958,"language":428,"meta":276,"style":276},"\u003Ctemplate>\n  \u003CTresDirectionalLight\n    :position=\"[10, 10, 10]\"\n    :intensity=\"1.5\"\n    :cast-shadow=\"true\"\n    :shadow-map-size-width=\"2048\"\n    :shadow-map-size-height=\"2048\"\n    :shadow-camera-near=\"0.5\"\n    :shadow-camera-far=\"500\"\n    :shadow-camera-left=\"-10\"\n    :shadow-camera-right=\"10\"\n    :shadow-camera-top=\"10\"\n    :shadow-camera-bottom=\"-10\"\n  />\n\u003C/template>\n",[278,1960,1961,1969,1976,1989,2002,2014,2027,2040,2053,2066,2080,2094,2107,2120,2125],{"__ignoreMap":276},[281,1962,1963,1965,1967],{"class":283,"line":284},[281,1964,435],{"class":295},[281,1966,439],{"class":438},[281,1968,442],{"class":295},[281,1970,1971,1973],{"class":283,"line":321},[281,1972,447],{"class":295},[281,1974,1975],{"class":438},"TresDirectionalLight\n",[281,1977,1978,1980,1982,1984,1987],{"class":283,"line":357},[281,1979,455],{"class":287},[281,1981,296],{"class":295},[281,1983,460],{"class":295},[281,1985,1986],{"class":463},"[10, 10, 10]",[281,1988,467],{"class":295},[281,1990,1991,1994,1996,1998,2000],{"class":283,"line":393},[281,1992,1993],{"class":287},"    :intensity",[281,1995,296],{"class":295},[281,1997,460],{"class":295},[281,1999,1814],{"class":463},[281,2001,467],{"class":295},[281,2003,2004,2006,2008,2010,2012],{"class":283,"line":409},[281,2005,501],{"class":287},[281,2007,296],{"class":295},[281,2009,460],{"class":295},[281,2011,493],{"class":463},[281,2013,467],{"class":295},[281,2015,2016,2019,2021,2023,2025],{"class":283,"line":498},[281,2017,2018],{"class":287},"    :shadow-map-size-width",[281,2020,296],{"class":295},[281,2022,460],{"class":295},[281,2024,1283],{"class":463},[281,2026,467],{"class":295},[281,2028,2029,2032,2034,2036,2038],{"class":283,"line":512},[281,2030,2031],{"class":287},"    :shadow-map-size-height",[281,2033,296],{"class":295},[281,2035,460],{"class":295},[281,2037,1283],{"class":463},[281,2039,467],{"class":295},[281,2041,2042,2045,2047,2049,2051],{"class":283,"line":518},[281,2043,2044],{"class":287},"    :shadow-camera-near",[281,2046,296],{"class":295},[281,2048,460],{"class":295},[281,2050,682],{"class":463},[281,2052,467],{"class":295},[281,2054,2055,2058,2060,2062,2064],{"class":283,"line":530},[281,2056,2057],{"class":287},"    :shadow-camera-far",[281,2059,296],{"class":295},[281,2061,460],{"class":295},[281,2063,1254],{"class":463},[281,2065,467],{"class":295},[281,2067,2068,2071,2073,2075,2078],{"class":283,"line":540},[281,2069,2070],{"class":287},"    :shadow-camera-left",[281,2072,296],{"class":295},[281,2074,460],{"class":295},[281,2076,2077],{"class":463},"-10",[281,2079,467],{"class":295},[281,2081,2082,2085,2087,2089,2092],{"class":283,"line":551},[281,2083,2084],{"class":287},"    :shadow-camera-right",[281,2086,296],{"class":295},[281,2088,460],{"class":295},[281,2090,2091],{"class":463},"10",[281,2093,467],{"class":295},[281,2095,2096,2099,2101,2103,2105],{"class":283,"line":825},[281,2097,2098],{"class":287},"    :shadow-camera-top",[281,2100,296],{"class":295},[281,2102,460],{"class":295},[281,2104,2091],{"class":463},[281,2106,467],{"class":295},[281,2108,2109,2112,2114,2116,2118],{"class":283,"line":846},[281,2110,2111],{"class":287},"    :shadow-camera-bottom",[281,2113,296],{"class":295},[281,2115,460],{"class":295},[281,2117,2077],{"class":463},[281,2119,467],{"class":295},[281,2121,2122],{"class":283,"line":1733},[281,2123,2124],{"class":295},"  />\n",[281,2126,2127,2129,2131],{"class":283,"line":1930},[281,2128,554],{"class":295},[281,2130,439],{"class":438},[281,2132,442],{"class":295},[262,2134,2136],{"id":2135},"key-takeaways","Key Takeaways",[2138,2139,2140,2151,2164,2171],"card-group",{},[2141,2142,2145],"card",{"icon":2143,"title":2144},"i-lucide-move-3d","Array for Vectors",[267,2146,2147,2148,2150],{},"Use arrays for position, rotation, scale - TresJS calls ",[278,2149,701],{}," automatically.",[2141,2152,2155],{"icon":2153,"title":2154},"i-lucide-git-branch","Pierced Props",[267,2156,2157,2158,712,2161,305],{},"Access nested properties with dash notation: ",[278,2159,2160],{},":position-x",[278,2162,2163],{},":shadow-camera-near",[2141,2165,2168],{"icon":2166,"title":2167},"i-lucide-repeat","Auto Conversion",[267,2169,2170],{},"kebab-case props convert to camelCase Three.js properties automatically.",[2141,2172,2175],{"icon":2173,"title":2174},"i-lucide-refresh-cw","Reactive by Default",[267,2176,2177],{},"Props update Three.js properties reactively - be mindful of performance.",[2179,2180,2181],"style",{},"html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}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 pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}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 .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}",{"title":276,"searchDepth":284,"depth":321,"links":2183},[2184,2185,2192,2197,2201,2202,2206],{"id":264,"depth":321,"text":265},{"id":567,"depth":321,"text":568,"children":2186},[2187,2188,2190,2191],{"id":575,"depth":357,"text":576},{"id":697,"depth":357,"text":2189},"2. Properties with .set() Methods",{"id":855,"depth":357,"text":856},{"id":906,"depth":357,"text":907},{"id":1012,"depth":321,"text":1013,"children":2193},[2194,2195,2196],{"id":1019,"depth":357,"text":1020},{"id":1136,"depth":357,"text":1137},{"id":1207,"depth":357,"text":1208},{"id":1298,"depth":321,"text":1299,"children":2198},[2199,2200],{"id":1302,"depth":357,"text":1305},{"id":1376,"depth":357,"text":1376},{"id":1483,"depth":321,"text":59},{"id":1752,"depth":321,"text":1753,"children":2203},[2204,2205],{"id":1756,"depth":357,"text":1757},{"id":1954,"depth":357,"text":1955},{"id":2135,"depth":321,"text":2136},"Learn how TresJS maps Vue props to Three.js object properties for a declarative 3D development experience.","md",null,{},{"title":67,"description":2207},"sz9-dxqRoFsZ2grd5l9BFynB-W5AcL1FHlbAwztMH1k",[2214,2216],{"title":63,"path":64,"stem":65,"description":2215,"children":-1},"Learn how to pass constructor arguments to Three.js objects using the args prop in TresJS.",{"title":71,"path":72,"stem":73,"description":2217,"children":-1},"Learn how to add custom Three.js classes and third-party libraries to TresJS using the extend function.",1785417174025]