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