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