[{"data":1,"prerenderedAt":2394},["ShallowReactive",2],{"navigation":3,"/api/components/tres-objects":211,"/api/components/tres-objects-surround":2389},[4,29,62,149,177,187,191,195,199,203,207],{"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],{"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,"children":66},"API","/api","3.api",[67,70,84,111,121,131],{"title":68,"path":64,"stem":69},"TresJS API Reference","3.api/1.index",{"title":71,"icon":72,"open":39,"path":73,"stem":74,"children":75,"page":47},"Components","i-lucide-box","/api/components","3.api/1.components",[76,80],{"title":77,"path":78,"stem":79},"\u003CTresCanvas />","/api/components/tres-canvas","3.api/1.components/tres-canvas",{"title":81,"path":82,"stem":83},"Tres Components","/api/components/tres-objects","3.api/1.components/tres-objects",{"title":85,"titleTemplate":86,"icon":87,"path":88,"stem":89,"children":90,"page":47},"Composables","%s · TresJS Composables","i-lucide-arrow-right-left","/api/composables","3.api/2.composables",[91,95,99,103,107],{"title":92,"path":93,"stem":94},"useTres","/api/composables/use-tres","3.api/2.composables/1.use-tres",{"title":96,"path":97,"stem":98},"useTresContext","/api/composables/use-tres-context","3.api/2.composables/2.use-tres-context",{"title":100,"path":101,"stem":102},"useLoop","/api/composables/use-loop","3.api/2.composables/3.use-loop",{"title":104,"path":105,"stem":106},"useGraph","/api/composables/use-graph","3.api/2.composables/4.use-graph",{"title":108,"path":109,"stem":110},"useLoader","/api/composables/use-loader","3.api/2.composables/5.use-loader",{"title":112,"icon":113,"path":114,"stem":115,"children":116,"page":47},"Event handling","i-lucide-mouse-pointer-2","/api/events","3.api/3.events",[117],{"title":118,"path":119,"stem":120},"Pointer Events","/api/events/pointer-events","3.api/3.events/1.pointer-events",{"title":122,"icon":123,"path":124,"stem":125,"children":126,"page":47},"Utils","i-lucide-wrench","/api/utils","3.api/4.utils",[127],{"title":128,"path":129,"stem":130},"Type Guards","/api/utils/type-guards","3.api/4.utils/1.type-guards",{"title":132,"icon":133,"path":134,"stem":135,"children":136,"page":47},"Advanced","i-lucide-brain-circuit","/api/advanced","3.api/5.advanced",[137,141,145],{"title":138,"path":139,"stem":140},"Scaling Performance 🚀","/api/advanced/performance","3.api/5.advanced/performance",{"title":142,"path":143,"stem":144},"Primitives","/api/advanced/primitives","3.api/5.advanced/primitives",{"title":146,"path":147,"stem":148},"WebGPU","/api/advanced/web-gpu","3.api/5.advanced/web-gpu",{"title":150,"path":151,"stem":152,"children":153},"Cookbook","/cookbook","4.cookbook",[154,157,161,165,169,173],{"title":155,"path":151,"stem":156},"Cookbook 🍳🧑‍🍳","4.cookbook/index",{"title":158,"path":159,"stem":160},"OrbitControls","/cookbook/orbit-controls","4.cookbook/1.orbit-controls",{"title":162,"path":163,"stem":164},"Basic Animations","/cookbook/basic-animations","4.cookbook/2.basic-animations",{"title":166,"path":167,"stem":168},"Model Animation","/cookbook/model-animation","4.cookbook/3.model-animation",{"title":170,"path":171,"stem":172},"Advanced GSAP Animations","/cookbook/advanced-gsap-animations","4.cookbook/4.advanced-gsap-animations",{"title":174,"path":175,"stem":176},"Tweakpane","/cookbook/tweakpane","4.cookbook/5.tweakpane",{"title":178,"path":179,"stem":180,"children":181},"Community","/community","5.community/1.index",[182,183],{"title":178,"path":179,"stem":180},{"title":184,"path":185,"stem":186},"Awesome Resources","/community/awesome-resources","5.community/awesome-resources",{"title":188,"path":189,"stem":190},"German Translation","/de","de",{"title":192,"path":193,"stem":194},"Spanish Translation","/es","es",{"title":196,"path":197,"stem":198},"French Translation","/fr","fr",{"title":200,"path":201,"stem":202},"Italian Translation","/it","it",{"title":204,"path":205,"stem":206},"Japanese Translation","/jp","jp",{"title":208,"path":209,"stem":210},"Chinese Translation","/zh","zh",{"id":212,"title":81,"body":213,"description":2383,"extension":2384,"links":2385,"meta":2386,"navigation":39,"path":82,"seo":2387,"stem":83,"__hash__":2388},"docs/3.api/1.components/tres-objects.md",{"type":214,"value":215,"toc":2369},"minimark",[216,230,242,340,358,368,435,446,451,454,549,552,629,635,702,709,719,725,753,762,847,852,1024,1028,1430,1434,1437,1441,1624,1628,1631,1820,1824,1831,1961,1965,1972,1978,2003,2009,2365],[217,218,219,220,224,225,229],"p",{},"The core idea of ",[221,222,223],"strong",{},"TresJS"," is to provide an ",[226,227,228],"em",{},"autogenerated catalogue"," of all the Three.js elements. This catalogue is generated based on the Three.js source code, so it's always up to date.",[217,231,232,233,237,238,241],{},"When using plain Three.js, you need to import the elements you want to use. For example, if you want to use a ",[234,235,236],"code",{},"PerspectiveCamera",", you need to import it from the ",[234,239,240],{},"three"," package:",[243,244,249],"pre",{"className":245,"code":246,"language":247,"meta":248,"style":248},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { PerspectiveCamera } from 'three'\n\nconst camera = new PerspectiveCamera(45, width / height, 1, 1000)\n","js","",[234,250,251,283,289],{"__ignoreMap":248},[252,253,256,260,264,268,271,274,277,280],"span",{"class":254,"line":255},"line",1,[252,257,259],{"class":258},"s7zQu","import",[252,261,263],{"class":262},"sMK4o"," {",[252,265,267],{"class":266},"sTEyZ"," PerspectiveCamera",[252,269,270],{"class":262}," }",[252,272,273],{"class":258}," from",[252,275,276],{"class":262}," '",[252,278,240],{"class":279},"sfazB",[252,281,282],{"class":262},"'\n",[252,284,286],{"class":254,"line":285},2,[252,287,288],{"emptyLinePlaceholder":39},"\n",[252,290,292,296,299,302,305,308,311,315,318,321,324,327,329,332,334,337],{"class":254,"line":291},3,[252,293,295],{"class":294},"spNyl","const",[252,297,298],{"class":266}," camera ",[252,300,301],{"class":262},"=",[252,303,304],{"class":262}," new",[252,306,267],{"class":307},"s2Zo4",[252,309,310],{"class":266},"(",[252,312,314],{"class":313},"sbssI","45",[252,316,317],{"class":262},",",[252,319,320],{"class":266}," width ",[252,322,323],{"class":262},"/",[252,325,326],{"class":266}," height",[252,328,317],{"class":262},[252,330,331],{"class":313}," 1",[252,333,317],{"class":262},[252,335,336],{"class":313}," 1000",[252,338,339],{"class":266},")\n",[341,342,344],"tip",{"icon":343},"i-ph-lightbulb-duotone",[217,345,346,347,350,351,353,354,357],{},"With ",[221,348,349],{},"Tres"," you don't need to import anything, that's because ",[221,352,349],{}," automatically generates a ",[221,355,356],{},"Vue Component based of the Three Object you want to use in PascalCase with a Tres prefix",".",[217,359,360,361,363,364,367],{},"For example, if you want to use a ",[234,362,236],{}," you would use the ",[234,365,366],{},"\u003CTresPerspectiveCamera />"," component.",[243,369,373],{"className":370,"code":371,"language":372,"meta":248,"style":248},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera />\n    \u003C!-- Your scene goes here -->\n  \u003C/TresCanvas>\n\u003C/template>\n","vue",[234,374,375,387,397,408,415,425],{"__ignoreMap":248},[252,376,377,380,384],{"class":254,"line":255},[252,378,379],{"class":262},"\u003C",[252,381,383],{"class":382},"swJcz","template",[252,385,386],{"class":262},">\n",[252,388,389,392,395],{"class":254,"line":285},[252,390,391],{"class":262},"  \u003C",[252,393,394],{"class":382},"TresCanvas",[252,396,386],{"class":262},[252,398,399,402,405],{"class":254,"line":291},[252,400,401],{"class":262},"    \u003C",[252,403,404],{"class":382},"TresPerspectiveCamera",[252,406,407],{"class":262}," />\n",[252,409,411],{"class":254,"line":410},4,[252,412,414],{"class":413},"sHwdD","    \u003C!-- Your scene goes here -->\n",[252,416,418,421,423],{"class":254,"line":417},5,[252,419,420],{"class":262},"  \u003C/",[252,422,394],{"class":382},[252,424,386],{"class":262},[252,426,428,431,433],{"class":254,"line":427},6,[252,429,430],{"class":262},"\u003C/",[252,432,383],{"class":382},[252,434,386],{"class":262},[217,436,437,438,445],{},"This means that you can rely on the same ",[439,440,444],"a",{"href":441,"rel":442},"https://threejs.org/docs/?q=Perspe#api/en/cameras/PerspectiveCamera",[443],"nofollow","documentation"," as you would when using plain Three.js, but with the power of Vue.",[447,448,450],"h2",{"id":449},"declaring-objects","Declaring objects",[217,452,453],{},"If we follow this argument, you should be able to lay out an instance like this: ❌",[243,455,457],{"className":370,"code":456,"language":372,"meta":248,"style":248},"\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera visible :position=\"new THREE.Vector3(1, 2, 3)\" />\n    \u003C!-- Your scene goes here -->\n  \u003C/TresCanvas>\n\u003C/template>\n",[234,458,459,467,475,529,533,541],{"__ignoreMap":248},[252,460,461,463,465],{"class":254,"line":255},[252,462,379],{"class":262},[252,464,383],{"class":382},[252,466,386],{"class":262},[252,468,469,471,473],{"class":254,"line":285},[252,470,391],{"class":262},[252,472,394],{"class":382},[252,474,386],{"class":262},[252,476,477,479,481,484,487,490,492,495,498,501,503,506,508,511,514,517,519,522,525,527],{"class":254,"line":291},[252,478,401],{"class":262},[252,480,404],{"class":382},[252,482,483],{"class":294}," visible",[252,485,486],{"class":262}," :",[252,488,489],{"class":294},"position",[252,491,301],{"class":262},[252,493,494],{"class":262},"\"",[252,496,497],{"class":262},"new ",[252,499,500],{"class":266},"THREE",[252,502,357],{"class":262},[252,504,505],{"class":307},"Vector3",[252,507,310],{"class":262},[252,509,510],{"class":313},"1",[252,512,513],{"class":262},", ",[252,515,516],{"class":313},"2",[252,518,513],{"class":262},[252,520,521],{"class":313},"3",[252,523,524],{"class":262},")",[252,526,494],{"class":262},[252,528,407],{"class":262},[252,530,531],{"class":254,"line":410},[252,532,414],{"class":413},[252,534,535,537,539],{"class":254,"line":417},[252,536,420],{"class":262},[252,538,394],{"class":382},[252,540,386],{"class":262},[252,542,543,545,547],{"class":254,"line":427},[252,544,430],{"class":262},[252,546,383],{"class":382},[252,548,386],{"class":262},[217,550,551],{},"But with Tres this is not needed, you can define properties declaratively like this: ✅",[243,553,555],{"className":370,"code":554,"language":372,"meta":248,"style":248},"\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003CTresPerspectiveCamera visible :position=\"[1, 2, 3]\" />\n    \u003C!-- Your scene goes here -->\n  \u003C/TresCanvas>\n\u003C/template>\n",[234,556,557,565,573,609,613,621],{"__ignoreMap":248},[252,558,559,561,563],{"class":254,"line":255},[252,560,379],{"class":262},[252,562,383],{"class":382},[252,564,386],{"class":262},[252,566,567,569,571],{"class":254,"line":285},[252,568,391],{"class":262},[252,570,394],{"class":382},[252,572,386],{"class":262},[252,574,575,577,579,581,583,585,587,589,592,594,596,598,600,602,605,607],{"class":254,"line":291},[252,576,401],{"class":262},[252,578,404],{"class":382},[252,580,483],{"class":294},[252,582,486],{"class":262},[252,584,489],{"class":294},[252,586,301],{"class":262},[252,588,494],{"class":262},[252,590,591],{"class":262},"[",[252,593,510],{"class":313},[252,595,513],{"class":262},[252,597,516],{"class":313},[252,599,513],{"class":262},[252,601,521],{"class":313},[252,603,604],{"class":262},"]",[252,606,494],{"class":262},[252,608,407],{"class":262},[252,610,611],{"class":254,"line":410},[252,612,414],{"class":413},[252,614,615,617,619],{"class":254,"line":417},[252,616,420],{"class":262},[252,618,394],{"class":382},[252,620,386],{"class":262},[252,622,623,625,627],{"class":254,"line":427},[252,624,430],{"class":262},[252,626,383],{"class":382},[252,628,386],{"class":262},[217,630,631,632,634],{},"TresJS follows a simple naming convention: any component prefixed with ",[234,633,349],{}," is automatically mapped to its Three.js counterpart. Some examples:",[636,637,638,651],"table",{},[639,640,641],"thead",{},[642,643,644,648],"tr",{},[645,646,647],"th",{},"Vue Component",[645,649,650],{},"Instance",[652,653,654,666,678,690],"tbody",{},[642,655,656,661],{},[657,658,659],"td",{},[234,660,366],{},[657,662,663],{},[234,664,665],{},"new THREE.PerspectiveCamera()",[642,667,668,673],{},[657,669,670],{},[234,671,672],{},"\u003CTresMesh />",[657,674,675],{},[234,676,677],{},"new THREE.Mesh()",[642,679,680,685],{},[657,681,682],{},[234,683,684],{},"\u003CTresBoxGeometry />",[657,686,687],{},[234,688,689],{},"new THREE.BoxGeometry()",[642,691,692,697],{},[657,693,694],{},[234,695,696],{},"\u003CTresMeshBasicMaterial />",[657,698,699],{},[234,700,701],{},"new THREE.MeshBasicMaterial()",[447,703,705,706],{"id":704},"constructor-arguments-with-args","Constructor Arguments with ",[234,707,708],{},"args",[217,710,711,712,714,715,718],{},"Many Three.js objects require constructor arguments. TresJS provides the ",[234,713,708],{}," prop as an ",[221,716,717],{},"array of constructor arguments"," that are passed directly to the Three.js constructor:",[217,720,721,722,724],{},"For example, the ",[234,723,236],{}," constructor has the following arguments:",[726,727,728,735,741,747],"ul",{},[729,730,731,734],"li",{},[234,732,733],{},"fov"," - Camera frustum vertical field of view",[729,736,737,740],{},[234,738,739],{},"aspect"," - Camera frustum aspect ratio",[729,742,743,746],{},[234,744,745],{},"near"," - Camera frustum near plane",[729,748,749,752],{},[234,750,751],{},"far"," - Camera frustum far plane",[217,754,755,756,758,759,761],{},"To pass these arguments to the ",[234,757,366],{}," component, you can use the ",[234,760,708],{}," prop:",[243,763,765],{"className":370,"code":764,"language":372,"meta":248,"style":248},"\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003C!-- Creates: new THREE.PerspectiveCamera(45, 1, 0.1, 1000) -->\n    \u003CTresPerspectiveCamera :args=\"[45, 1, 0.1, 1000]\" />\n    \u003C!-- Your scene goes here -->\n  \u003C/TresCanvas>\n\u003C/template>\n",[234,766,767,775,783,788,826,830,838],{"__ignoreMap":248},[252,768,769,771,773],{"class":254,"line":255},[252,770,379],{"class":262},[252,772,383],{"class":382},[252,774,386],{"class":262},[252,776,777,779,781],{"class":254,"line":285},[252,778,391],{"class":262},[252,780,394],{"class":382},[252,782,386],{"class":262},[252,784,785],{"class":254,"line":291},[252,786,787],{"class":413},"    \u003C!-- Creates: new THREE.PerspectiveCamera(45, 1, 0.1, 1000) -->\n",[252,789,790,792,794,796,798,800,802,804,806,808,810,812,815,817,820,822,824],{"class":254,"line":410},[252,791,401],{"class":262},[252,793,404],{"class":382},[252,795,486],{"class":262},[252,797,708],{"class":294},[252,799,301],{"class":262},[252,801,494],{"class":262},[252,803,591],{"class":262},[252,805,314],{"class":313},[252,807,513],{"class":262},[252,809,510],{"class":313},[252,811,513],{"class":262},[252,813,814],{"class":313},"0.1",[252,816,513],{"class":262},[252,818,819],{"class":313},"1000",[252,821,604],{"class":262},[252,823,494],{"class":262},[252,825,407],{"class":262},[252,827,828],{"class":254,"line":417},[252,829,414],{"class":413},[252,831,832,834,836],{"class":254,"line":427},[252,833,420],{"class":262},[252,835,394],{"class":382},[252,837,386],{"class":262},[252,839,841,843,845],{"class":254,"line":840},7,[252,842,430],{"class":262},[252,844,383],{"class":382},[252,846,386],{"class":262},[848,849,851],"h3",{"id":850},"basic-usage","Basic Usage",[243,853,855],{"className":370,"code":854,"language":372,"meta":248,"style":248},"\u003Ctemplate>\n  \u003CTresCanvas>\n    \u003C!-- Creates: new THREE.PerspectiveCamera(45, 1, 0.1, 1000) -->\n    \u003CTresPerspectiveCamera :args=\"[45, 1, 0.1, 1000]\" />\n\n    \u003C!-- Creates: new THREE.BoxGeometry(1, 2, 3) -->\n    \u003CTresBoxGeometry :args=\"[1, 2, 3]\" />\n\n    \u003C!-- Creates: new THREE.MeshBasicMaterial({ color: 'red' }) -->\n    \u003CTresMeshBasicMaterial :args=\"[{ color: 'red' }]\" />\n  \u003C/TresCanvas>\n\u003C/template>\n",[234,856,857,865,873,877,913,917,922,955,960,966,1006,1015],{"__ignoreMap":248},[252,858,859,861,863],{"class":254,"line":255},[252,860,379],{"class":262},[252,862,383],{"class":382},[252,864,386],{"class":262},[252,866,867,869,871],{"class":254,"line":285},[252,868,391],{"class":262},[252,870,394],{"class":382},[252,872,386],{"class":262},[252,874,875],{"class":254,"line":291},[252,876,787],{"class":413},[252,878,879,881,883,885,887,889,891,893,895,897,899,901,903,905,907,909,911],{"class":254,"line":410},[252,880,401],{"class":262},[252,882,404],{"class":382},[252,884,486],{"class":262},[252,886,708],{"class":294},[252,888,301],{"class":262},[252,890,494],{"class":262},[252,892,591],{"class":262},[252,894,314],{"class":313},[252,896,513],{"class":262},[252,898,510],{"class":313},[252,900,513],{"class":262},[252,902,814],{"class":313},[252,904,513],{"class":262},[252,906,819],{"class":313},[252,908,604],{"class":262},[252,910,494],{"class":262},[252,912,407],{"class":262},[252,914,915],{"class":254,"line":417},[252,916,288],{"emptyLinePlaceholder":39},[252,918,919],{"class":254,"line":427},[252,920,921],{"class":413},"    \u003C!-- Creates: new THREE.BoxGeometry(1, 2, 3) -->\n",[252,923,924,926,929,931,933,935,937,939,941,943,945,947,949,951,953],{"class":254,"line":840},[252,925,401],{"class":262},[252,927,928],{"class":382},"TresBoxGeometry",[252,930,486],{"class":262},[252,932,708],{"class":294},[252,934,301],{"class":262},[252,936,494],{"class":262},[252,938,591],{"class":262},[252,940,510],{"class":313},[252,942,513],{"class":262},[252,944,516],{"class":313},[252,946,513],{"class":262},[252,948,521],{"class":313},[252,950,604],{"class":262},[252,952,494],{"class":262},[252,954,407],{"class":262},[252,956,958],{"class":254,"line":957},8,[252,959,288],{"emptyLinePlaceholder":39},[252,961,963],{"class":254,"line":962},9,[252,964,965],{"class":413},"    \u003C!-- Creates: new THREE.MeshBasicMaterial({ color: 'red' }) -->\n",[252,967,969,971,974,976,978,980,982,985,988,991,994,997,999,1002,1004],{"class":254,"line":968},10,[252,970,401],{"class":262},[252,972,973],{"class":382},"TresMeshBasicMaterial",[252,975,486],{"class":262},[252,977,708],{"class":294},[252,979,301],{"class":262},[252,981,494],{"class":262},[252,983,984],{"class":262},"[{ ",[252,986,987],{"class":382},"color",[252,989,990],{"class":262},": ",[252,992,993],{"class":262},"'",[252,995,996],{"class":279},"red",[252,998,993],{"class":262},[252,1000,1001],{"class":262}," }]",[252,1003,494],{"class":262},[252,1005,407],{"class":262},[252,1007,1009,1011,1013],{"class":254,"line":1008},11,[252,1010,420],{"class":262},[252,1012,394],{"class":382},[252,1014,386],{"class":262},[252,1016,1018,1020,1022],{"class":254,"line":1017},12,[252,1019,430],{"class":262},[252,1021,383],{"class":382},[252,1023,386],{"class":262},[848,1025,1027],{"id":1026},"common-patterns","Common Patterns",[1029,1030,1031,1180,1317],"code-group",{},[243,1032,1035],{"className":370,"code":1033,"filename":1034,"language":372,"meta":248,"style":248},"\u003Ctemplate>\n  \u003C!-- Box: width, height, depth -->\n  \u003CTresBoxGeometry :args=\"[2, 2, 2]\" />\n\n  \u003C!-- Sphere: radius, widthSegments, heightSegments -->\n  \u003CTresSphereGeometry :args=\"[1, 32, 32]\" />\n\n  \u003C!-- Plane: width, height, widthSegments, heightSegments -->\n  \u003CTresPlaneGeometry :args=\"[10, 10, 1, 1]\" />\n\u003C/template>\n","Geometries",[234,1036,1037,1045,1050,1082,1086,1091,1125,1129,1134,1172],{"__ignoreMap":248},[252,1038,1039,1041,1043],{"class":254,"line":255},[252,1040,379],{"class":262},[252,1042,383],{"class":382},[252,1044,386],{"class":262},[252,1046,1047],{"class":254,"line":285},[252,1048,1049],{"class":413},"  \u003C!-- Box: width, height, depth -->\n",[252,1051,1052,1054,1056,1058,1060,1062,1064,1066,1068,1070,1072,1074,1076,1078,1080],{"class":254,"line":291},[252,1053,391],{"class":262},[252,1055,928],{"class":382},[252,1057,486],{"class":262},[252,1059,708],{"class":294},[252,1061,301],{"class":262},[252,1063,494],{"class":262},[252,1065,591],{"class":262},[252,1067,516],{"class":313},[252,1069,513],{"class":262},[252,1071,516],{"class":313},[252,1073,513],{"class":262},[252,1075,516],{"class":313},[252,1077,604],{"class":262},[252,1079,494],{"class":262},[252,1081,407],{"class":262},[252,1083,1084],{"class":254,"line":410},[252,1085,288],{"emptyLinePlaceholder":39},[252,1087,1088],{"class":254,"line":417},[252,1089,1090],{"class":413},"  \u003C!-- Sphere: radius, widthSegments, heightSegments -->\n",[252,1092,1093,1095,1098,1100,1102,1104,1106,1108,1110,1112,1115,1117,1119,1121,1123],{"class":254,"line":427},[252,1094,391],{"class":262},[252,1096,1097],{"class":382},"TresSphereGeometry",[252,1099,486],{"class":262},[252,1101,708],{"class":294},[252,1103,301],{"class":262},[252,1105,494],{"class":262},[252,1107,591],{"class":262},[252,1109,510],{"class":313},[252,1111,513],{"class":262},[252,1113,1114],{"class":313},"32",[252,1116,513],{"class":262},[252,1118,1114],{"class":313},[252,1120,604],{"class":262},[252,1122,494],{"class":262},[252,1124,407],{"class":262},[252,1126,1127],{"class":254,"line":840},[252,1128,288],{"emptyLinePlaceholder":39},[252,1130,1131],{"class":254,"line":957},[252,1132,1133],{"class":413},"  \u003C!-- Plane: width, height, widthSegments, heightSegments -->\n",[252,1135,1136,1138,1141,1143,1145,1147,1149,1151,1154,1156,1158,1160,1162,1164,1166,1168,1170],{"class":254,"line":962},[252,1137,391],{"class":262},[252,1139,1140],{"class":382},"TresPlaneGeometry",[252,1142,486],{"class":262},[252,1144,708],{"class":294},[252,1146,301],{"class":262},[252,1148,494],{"class":262},[252,1150,591],{"class":262},[252,1152,1153],{"class":313},"10",[252,1155,513],{"class":262},[252,1157,1153],{"class":313},[252,1159,513],{"class":262},[252,1161,510],{"class":313},[252,1163,513],{"class":262},[252,1165,510],{"class":313},[252,1167,604],{"class":262},[252,1169,494],{"class":262},[252,1171,407],{"class":262},[252,1173,1174,1176,1178],{"class":254,"line":968},[252,1175,430],{"class":262},[252,1177,383],{"class":382},[252,1179,386],{"class":262},[243,1181,1184],{"className":370,"code":1182,"filename":1183,"language":372,"meta":248,"style":248},"\u003Ctemplate>\n  \u003C!-- PerspectiveCamera: fov, aspect, near, far -->\n  \u003CTresPerspectiveCamera :args=\"[75, window.innerWidth / window.innerHeight, 0.1, 1000]\" />\n\n  \u003C!-- OrthographicCamera: left, right, top, bottom, near, far -->\n  \u003CTresOrthographicCamera :args=\"[-5, 5, 5, -5, 0.1, 1000]\" />\n\u003C/template>\n","Cameras",[234,1185,1186,1194,1199,1252,1256,1261,1309],{"__ignoreMap":248},[252,1187,1188,1190,1192],{"class":254,"line":255},[252,1189,379],{"class":262},[252,1191,383],{"class":382},[252,1193,386],{"class":262},[252,1195,1196],{"class":254,"line":285},[252,1197,1198],{"class":413},"  \u003C!-- PerspectiveCamera: fov, aspect, near, far -->\n",[252,1200,1201,1203,1205,1207,1209,1211,1213,1215,1218,1220,1223,1225,1228,1231,1233,1235,1238,1240,1242,1244,1246,1248,1250],{"class":254,"line":291},[252,1202,391],{"class":262},[252,1204,404],{"class":382},[252,1206,486],{"class":262},[252,1208,708],{"class":294},[252,1210,301],{"class":262},[252,1212,494],{"class":262},[252,1214,591],{"class":262},[252,1216,1217],{"class":313},"75",[252,1219,513],{"class":262},[252,1221,1222],{"class":266},"window",[252,1224,357],{"class":262},[252,1226,1227],{"class":266},"innerWidth",[252,1229,1230],{"class":262}," / ",[252,1232,1222],{"class":266},[252,1234,357],{"class":262},[252,1236,1237],{"class":266},"innerHeight",[252,1239,513],{"class":262},[252,1241,814],{"class":313},[252,1243,513],{"class":262},[252,1245,819],{"class":313},[252,1247,604],{"class":262},[252,1249,494],{"class":262},[252,1251,407],{"class":262},[252,1253,1254],{"class":254,"line":410},[252,1255,288],{"emptyLinePlaceholder":39},[252,1257,1258],{"class":254,"line":417},[252,1259,1260],{"class":413},"  \u003C!-- OrthographicCamera: left, right, top, bottom, near, far -->\n",[252,1262,1263,1265,1268,1270,1272,1274,1276,1279,1282,1284,1286,1288,1290,1293,1295,1297,1299,1301,1303,1305,1307],{"class":254,"line":427},[252,1264,391],{"class":262},[252,1266,1267],{"class":382},"TresOrthographicCamera",[252,1269,486],{"class":262},[252,1271,708],{"class":294},[252,1273,301],{"class":262},[252,1275,494],{"class":262},[252,1277,1278],{"class":262},"[-",[252,1280,1281],{"class":313},"5",[252,1283,513],{"class":262},[252,1285,1281],{"class":313},[252,1287,513],{"class":262},[252,1289,1281],{"class":313},[252,1291,1292],{"class":262},", -",[252,1294,1281],{"class":313},[252,1296,513],{"class":262},[252,1298,814],{"class":313},[252,1300,513],{"class":262},[252,1302,819],{"class":313},[252,1304,604],{"class":262},[252,1306,494],{"class":262},[252,1308,407],{"class":262},[252,1310,1311,1313,1315],{"class":254,"line":840},[252,1312,430],{"class":262},[252,1314,383],{"class":382},[252,1316,386],{"class":262},[243,1318,1321],{"className":370,"code":1319,"filename":1320,"language":372,"meta":248,"style":248},"\u003Ctemplate>\n  \u003C!-- DirectionalLight: color, intensity -->\n  \u003CTresDirectionalLight :args=\"['#ffffff', 1]\" />\n\n  \u003C!-- PointLight: color, intensity, distance, decay -->\n  \u003CTresPointLight :args=\"['#ff0000', 2, 100, 2]\" />\n\u003C/template>\n","Lights",[234,1322,1323,1331,1336,1370,1374,1379,1422],{"__ignoreMap":248},[252,1324,1325,1327,1329],{"class":254,"line":255},[252,1326,379],{"class":262},[252,1328,383],{"class":382},[252,1330,386],{"class":262},[252,1332,1333],{"class":254,"line":285},[252,1334,1335],{"class":413},"  \u003C!-- DirectionalLight: color, intensity -->\n",[252,1337,1338,1340,1343,1345,1347,1349,1351,1353,1355,1358,1360,1362,1364,1366,1368],{"class":254,"line":291},[252,1339,391],{"class":262},[252,1341,1342],{"class":382},"TresDirectionalLight",[252,1344,486],{"class":262},[252,1346,708],{"class":294},[252,1348,301],{"class":262},[252,1350,494],{"class":262},[252,1352,591],{"class":262},[252,1354,993],{"class":262},[252,1356,1357],{"class":279},"#ffffff",[252,1359,993],{"class":262},[252,1361,513],{"class":262},[252,1363,510],{"class":313},[252,1365,604],{"class":262},[252,1367,494],{"class":262},[252,1369,407],{"class":262},[252,1371,1372],{"class":254,"line":410},[252,1373,288],{"emptyLinePlaceholder":39},[252,1375,1376],{"class":254,"line":417},[252,1377,1378],{"class":413},"  \u003C!-- PointLight: color, intensity, distance, decay -->\n",[252,1380,1381,1383,1386,1388,1390,1392,1394,1396,1398,1401,1403,1405,1407,1409,1412,1414,1416,1418,1420],{"class":254,"line":427},[252,1382,391],{"class":262},[252,1384,1385],{"class":382},"TresPointLight",[252,1387,486],{"class":262},[252,1389,708],{"class":294},[252,1391,301],{"class":262},[252,1393,494],{"class":262},[252,1395,591],{"class":262},[252,1397,993],{"class":262},[252,1399,1400],{"class":279},"#ff0000",[252,1402,993],{"class":262},[252,1404,513],{"class":262},[252,1406,516],{"class":313},[252,1408,513],{"class":262},[252,1410,1411],{"class":313},"100",[252,1413,513],{"class":262},[252,1415,516],{"class":313},[252,1417,604],{"class":262},[252,1419,494],{"class":262},[252,1421,407],{"class":262},[252,1423,1424,1426,1428],{"class":254,"line":840},[252,1425,430],{"class":262},[252,1427,383],{"class":382},[252,1429,386],{"class":262},[447,1431,1433],{"id":1432},"declarative-properties","Declarative Properties",[217,1435,1436],{},"Beyond constructor arguments, TresJS allows you to set properties declaratively using Vue props:",[848,1438,1440],{"id":1439},"property-mapping","Property Mapping",[243,1442,1444],{"className":370,"code":1443,"language":372,"meta":248,"style":248},"\u003Ctemplate>\n  \u003C!-- Three.js equivalent:\n       const mesh = new THREE.Mesh()\n       mesh.position.set(0, 1, 0)\n       mesh.rotation.set(0, Math.PI, 0)\n       mesh.visible = true\n  -->\n  \u003CTresMesh\n    :position=\"[0, 1, 0]\"\n    :rotation=\"[0, Math.PI, 0]\"\n    :visible=\"true\"\n  >\n    \u003CTresBoxGeometry />\n    \u003CTresMeshBasicMaterial color=\"blue\" />\n  \u003C/TresMesh>\n\u003C/template>\n",[234,1445,1446,1454,1459,1464,1469,1474,1479,1484,1491,1520,1553,1570,1575,1584,1605,1615],{"__ignoreMap":248},[252,1447,1448,1450,1452],{"class":254,"line":255},[252,1449,379],{"class":262},[252,1451,383],{"class":382},[252,1453,386],{"class":262},[252,1455,1456],{"class":254,"line":285},[252,1457,1458],{"class":413},"  \u003C!-- Three.js equivalent:\n",[252,1460,1461],{"class":254,"line":291},[252,1462,1463],{"class":413},"       const mesh = new THREE.Mesh()\n",[252,1465,1466],{"class":254,"line":410},[252,1467,1468],{"class":413},"       mesh.position.set(0, 1, 0)\n",[252,1470,1471],{"class":254,"line":417},[252,1472,1473],{"class":413},"       mesh.rotation.set(0, Math.PI, 0)\n",[252,1475,1476],{"class":254,"line":427},[252,1477,1478],{"class":413},"       mesh.visible = true\n",[252,1480,1481],{"class":254,"line":840},[252,1482,1483],{"class":413},"  -->\n",[252,1485,1486,1488],{"class":254,"line":957},[252,1487,391],{"class":262},[252,1489,1490],{"class":382},"TresMesh\n",[252,1492,1493,1496,1498,1500,1502,1504,1507,1509,1511,1513,1515,1517],{"class":254,"line":962},[252,1494,1495],{"class":262},"    :",[252,1497,489],{"class":294},[252,1499,301],{"class":262},[252,1501,494],{"class":262},[252,1503,591],{"class":262},[252,1505,1506],{"class":313},"0",[252,1508,513],{"class":262},[252,1510,510],{"class":313},[252,1512,513],{"class":262},[252,1514,1506],{"class":313},[252,1516,604],{"class":262},[252,1518,1519],{"class":262},"\"\n",[252,1521,1522,1524,1527,1529,1531,1533,1535,1537,1540,1542,1545,1547,1549,1551],{"class":254,"line":968},[252,1523,1495],{"class":262},[252,1525,1526],{"class":294},"rotation",[252,1528,301],{"class":262},[252,1530,494],{"class":262},[252,1532,591],{"class":262},[252,1534,1506],{"class":313},[252,1536,513],{"class":262},[252,1538,1539],{"class":266},"Math",[252,1541,357],{"class":262},[252,1543,1544],{"class":266},"PI",[252,1546,513],{"class":262},[252,1548,1506],{"class":313},[252,1550,604],{"class":262},[252,1552,1519],{"class":262},[252,1554,1555,1557,1560,1562,1564,1568],{"class":254,"line":1008},[252,1556,1495],{"class":262},[252,1558,1559],{"class":294},"visible",[252,1561,301],{"class":262},[252,1563,494],{"class":262},[252,1565,1567],{"class":1566},"sfNiH","true",[252,1569,1519],{"class":262},[252,1571,1572],{"class":254,"line":1017},[252,1573,1574],{"class":262},"  >\n",[252,1576,1578,1580,1582],{"class":254,"line":1577},13,[252,1579,401],{"class":262},[252,1581,928],{"class":382},[252,1583,407],{"class":262},[252,1585,1587,1589,1591,1594,1596,1598,1601,1603],{"class":254,"line":1586},14,[252,1588,401],{"class":262},[252,1590,973],{"class":382},[252,1592,1593],{"class":294}," color",[252,1595,301],{"class":262},[252,1597,494],{"class":262},[252,1599,1600],{"class":279},"blue",[252,1602,494],{"class":262},[252,1604,407],{"class":262},[252,1606,1608,1610,1613],{"class":254,"line":1607},15,[252,1609,420],{"class":262},[252,1611,1612],{"class":382},"TresMesh",[252,1614,386],{"class":262},[252,1616,1618,1620,1622],{"class":254,"line":1617},16,[252,1619,430],{"class":262},[252,1621,383],{"class":382},[252,1623,386],{"class":262},[848,1625,1627],{"id":1626},"shorthand-properties","Shorthand Properties",[217,1629,1630],{},"TresJS provides convenient shorthands for common transformations:",[243,1632,1634],{"className":370,"code":1633,"language":372,"meta":248,"style":248},"\u003Ctemplate>\n  \u003C!-- Individual axis manipulation -->\n  \u003CTresMesh\n    :position-x=\"1\"\n    :position-y=\"2\"\n    :position-z=\"3\"\n    :rotation-x=\"Math.PI / 4\"\n    :scale-y=\"2\"\n  />\n\n  \u003C!-- Color properties -->\n  \u003CTresMeshBasicMaterial\n    :color-r=\"0.8\"\n    :color-g=\"0.2\"\n    :color-b=\"0.1\"\n  />\n\u003C/template>\n",[234,1635,1636,1644,1649,1655,1670,1685,1700,1724,1739,1744,1748,1753,1760,1776,1792,1807,1811],{"__ignoreMap":248},[252,1637,1638,1640,1642],{"class":254,"line":255},[252,1639,379],{"class":262},[252,1641,383],{"class":382},[252,1643,386],{"class":262},[252,1645,1646],{"class":254,"line":285},[252,1647,1648],{"class":413},"  \u003C!-- Individual axis manipulation -->\n",[252,1650,1651,1653],{"class":254,"line":291},[252,1652,391],{"class":262},[252,1654,1490],{"class":382},[252,1656,1657,1659,1662,1664,1666,1668],{"class":254,"line":410},[252,1658,1495],{"class":262},[252,1660,1661],{"class":294},"position-x",[252,1663,301],{"class":262},[252,1665,494],{"class":262},[252,1667,510],{"class":313},[252,1669,1519],{"class":262},[252,1671,1672,1674,1677,1679,1681,1683],{"class":254,"line":417},[252,1673,1495],{"class":262},[252,1675,1676],{"class":294},"position-y",[252,1678,301],{"class":262},[252,1680,494],{"class":262},[252,1682,516],{"class":313},[252,1684,1519],{"class":262},[252,1686,1687,1689,1692,1694,1696,1698],{"class":254,"line":427},[252,1688,1495],{"class":262},[252,1690,1691],{"class":294},"position-z",[252,1693,301],{"class":262},[252,1695,494],{"class":262},[252,1697,521],{"class":313},[252,1699,1519],{"class":262},[252,1701,1702,1704,1707,1709,1711,1713,1715,1717,1719,1722],{"class":254,"line":840},[252,1703,1495],{"class":262},[252,1705,1706],{"class":294},"rotation-x",[252,1708,301],{"class":262},[252,1710,494],{"class":262},[252,1712,1539],{"class":266},[252,1714,357],{"class":262},[252,1716,1544],{"class":266},[252,1718,1230],{"class":262},[252,1720,1721],{"class":313},"4",[252,1723,1519],{"class":262},[252,1725,1726,1728,1731,1733,1735,1737],{"class":254,"line":957},[252,1727,1495],{"class":262},[252,1729,1730],{"class":294},"scale-y",[252,1732,301],{"class":262},[252,1734,494],{"class":262},[252,1736,516],{"class":313},[252,1738,1519],{"class":262},[252,1740,1741],{"class":254,"line":962},[252,1742,1743],{"class":262},"  />\n",[252,1745,1746],{"class":254,"line":968},[252,1747,288],{"emptyLinePlaceholder":39},[252,1749,1750],{"class":254,"line":1008},[252,1751,1752],{"class":413},"  \u003C!-- Color properties -->\n",[252,1754,1755,1757],{"class":254,"line":1017},[252,1756,391],{"class":262},[252,1758,1759],{"class":382},"TresMeshBasicMaterial\n",[252,1761,1762,1764,1767,1769,1771,1774],{"class":254,"line":1577},[252,1763,1495],{"class":262},[252,1765,1766],{"class":294},"color-r",[252,1768,301],{"class":262},[252,1770,494],{"class":262},[252,1772,1773],{"class":313},"0.8",[252,1775,1519],{"class":262},[252,1777,1778,1780,1783,1785,1787,1790],{"class":254,"line":1586},[252,1779,1495],{"class":262},[252,1781,1782],{"class":294},"color-g",[252,1784,301],{"class":262},[252,1786,494],{"class":262},[252,1788,1789],{"class":313},"0.2",[252,1791,1519],{"class":262},[252,1793,1794,1796,1799,1801,1803,1805],{"class":254,"line":1607},[252,1795,1495],{"class":262},[252,1797,1798],{"class":294},"color-b",[252,1800,301],{"class":262},[252,1802,494],{"class":262},[252,1804,814],{"class":313},[252,1806,1519],{"class":262},[252,1808,1809],{"class":254,"line":1617},[252,1810,1743],{"class":262},[252,1812,1814,1816,1818],{"class":254,"line":1813},17,[252,1815,430],{"class":262},[252,1817,383],{"class":382},[252,1819,386],{"class":262},[848,1821,1823],{"id":1822},"set-methods","Set Methods",[217,1825,1826,1827,1830],{},"Properties with ",[234,1828,1829],{},".set()"," methods can accept arrays:",[243,1832,1834],{"className":370,"code":1833,"language":372,"meta":248,"style":248},"\u003Ctemplate>\n  \u003C!-- Automatically calls position.set(1, 2, 3) -->\n  \u003CTresMesh :position=\"[1, 2, 3]\" />\n\n  \u003C!-- Automatically calls scale.set(2, 2, 2) -->\n  \u003CTresMesh :scale=\"2\" />\n\n  \u003C!-- Automatically calls lookAt(0, 0, 0) -->\n  \u003CTresPerspectiveCamera :look-at=\"[0, 0, 0]\" />\n\u003C/template>\n",[234,1835,1836,1844,1849,1881,1885,1890,1911,1915,1920,1953],{"__ignoreMap":248},[252,1837,1838,1840,1842],{"class":254,"line":255},[252,1839,379],{"class":262},[252,1841,383],{"class":382},[252,1843,386],{"class":262},[252,1845,1846],{"class":254,"line":285},[252,1847,1848],{"class":413},"  \u003C!-- Automatically calls position.set(1, 2, 3) -->\n",[252,1850,1851,1853,1855,1857,1859,1861,1863,1865,1867,1869,1871,1873,1875,1877,1879],{"class":254,"line":291},[252,1852,391],{"class":262},[252,1854,1612],{"class":382},[252,1856,486],{"class":262},[252,1858,489],{"class":294},[252,1860,301],{"class":262},[252,1862,494],{"class":262},[252,1864,591],{"class":262},[252,1866,510],{"class":313},[252,1868,513],{"class":262},[252,1870,516],{"class":313},[252,1872,513],{"class":262},[252,1874,521],{"class":313},[252,1876,604],{"class":262},[252,1878,494],{"class":262},[252,1880,407],{"class":262},[252,1882,1883],{"class":254,"line":410},[252,1884,288],{"emptyLinePlaceholder":39},[252,1886,1887],{"class":254,"line":417},[252,1888,1889],{"class":413},"  \u003C!-- Automatically calls scale.set(2, 2, 2) -->\n",[252,1891,1892,1894,1896,1898,1901,1903,1905,1907,1909],{"class":254,"line":427},[252,1893,391],{"class":262},[252,1895,1612],{"class":382},[252,1897,486],{"class":262},[252,1899,1900],{"class":294},"scale",[252,1902,301],{"class":262},[252,1904,494],{"class":262},[252,1906,516],{"class":313},[252,1908,494],{"class":262},[252,1910,407],{"class":262},[252,1912,1913],{"class":254,"line":840},[252,1914,288],{"emptyLinePlaceholder":39},[252,1916,1917],{"class":254,"line":957},[252,1918,1919],{"class":413},"  \u003C!-- Automatically calls lookAt(0, 0, 0) -->\n",[252,1921,1922,1924,1926,1928,1931,1933,1935,1937,1939,1941,1943,1945,1947,1949,1951],{"class":254,"line":962},[252,1923,391],{"class":262},[252,1925,404],{"class":382},[252,1927,486],{"class":262},[252,1929,1930],{"class":294},"look-at",[252,1932,301],{"class":262},[252,1934,494],{"class":262},[252,1936,591],{"class":262},[252,1938,1506],{"class":313},[252,1940,513],{"class":262},[252,1942,1506],{"class":313},[252,1944,513],{"class":262},[252,1946,1506],{"class":313},[252,1948,604],{"class":262},[252,1950,494],{"class":262},[252,1952,407],{"class":262},[252,1954,1955,1957,1959],{"class":254,"line":968},[252,1956,430],{"class":262},[252,1958,383],{"class":382},[252,1960,386],{"class":262},[447,1962,1964],{"id":1963},"extending-the-catalogue","Extending the Catalogue 🔌",[217,1966,1967,1968,1971],{},"Tres offers bare bones functionality, but it's easy to add third-party elements and ",[234,1969,1970],{},"extend"," them into its internal catalogue.",[217,1973,1974,1975,1977],{},"Most of 3D experience uses ",[234,1976,158],{}," which is not part of the core threejs library. You can add it to your project by importing it from the three/addons/controls/OrbitControls module.",[243,1979,1981],{"className":245,"code":1980,"language":247,"meta":248,"style":248},"import { OrbitControls } from 'three/addons/controls/OrbitControls'\n",[234,1982,1983],{"__ignoreMap":248},[252,1984,1985,1987,1989,1992,1994,1996,1998,2001],{"class":254,"line":255},[252,1986,259],{"class":258},[252,1988,263],{"class":262},[252,1990,1991],{"class":266}," OrbitControls",[252,1993,270],{"class":262},[252,1995,273],{"class":258},[252,1997,276],{"class":262},[252,1999,2000],{"class":279},"three/addons/controls/OrbitControls",[252,2002,282],{"class":262},[217,2004,2005,2006,2008],{},"Then you can extend the catalogue with the ",[234,2007,1970],{}," function:",[243,2010,2013],{"className":370,"code":2011,"highlights":2012,"language":372,"meta":248,"style":248},"\u003Cscript setup lang=\"ts\">\nimport { extend } from '@tresjs/core'\nimport { OrbitControls } from 'three/addons/controls/OrbitControls'\nimport { TextGeometry } from 'three/addons/geometries/TextGeometry'\n\n// Add the element to the catalogue\nextend({ TextGeometry, OrbitControls })\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas shadows alpha>\n    \u003CTresPerspectiveCamera :position=\"[5, 5, 5]\" />\n    \u003CTresOrbitControls v-if=\"state.renderer\" :args=\"[state.camera, state.renderer?.domElement]\" />\n    \u003CTresMesh>\n      \u003CTresTextGeometry :args=\"['TresJS', { font, ...fontOptions }]\" center />\n      \u003CTresMeshMatcapMaterial :matcap=\"matcapTexture\" />\n    \u003C/TresMesh>\n  \u003C/TresCanvas>\n\u003C/template>\n",[285,291,410,427,840,1577,1607],[234,2014,2015,2039,2061,2080,2101,2105,2111,2133,2141,2145,2153,2167,2199,2261,2269,2315,2338,2347,2356],{"__ignoreMap":248},[252,2016,2017,2019,2022,2025,2028,2030,2032,2035,2037],{"class":254,"line":255},[252,2018,379],{"class":262},[252,2020,2021],{"class":382},"script",[252,2023,2024],{"class":294}," setup",[252,2026,2027],{"class":294}," lang",[252,2029,301],{"class":262},[252,2031,494],{"class":262},[252,2033,2034],{"class":279},"ts",[252,2036,494],{"class":262},[252,2038,386],{"class":262},[252,2040,2043,2045,2047,2050,2052,2054,2056,2059],{"class":2041,"line":285},[254,2042],"highlight",[252,2044,259],{"class":258},[252,2046,263],{"class":262},[252,2048,2049],{"class":266}," extend",[252,2051,270],{"class":262},[252,2053,273],{"class":258},[252,2055,276],{"class":262},[252,2057,2058],{"class":279},"@tresjs/core",[252,2060,282],{"class":262},[252,2062,2064,2066,2068,2070,2072,2074,2076,2078],{"class":2063,"line":291},[254,2042],[252,2065,259],{"class":258},[252,2067,263],{"class":262},[252,2069,1991],{"class":266},[252,2071,270],{"class":262},[252,2073,273],{"class":258},[252,2075,276],{"class":262},[252,2077,2000],{"class":279},[252,2079,282],{"class":262},[252,2081,2083,2085,2087,2090,2092,2094,2096,2099],{"class":2082,"line":410},[254,2042],[252,2084,259],{"class":258},[252,2086,263],{"class":262},[252,2088,2089],{"class":266}," TextGeometry",[252,2091,270],{"class":262},[252,2093,273],{"class":258},[252,2095,276],{"class":262},[252,2097,2098],{"class":279},"three/addons/geometries/TextGeometry",[252,2100,282],{"class":262},[252,2102,2103],{"class":254,"line":417},[252,2104,288],{"emptyLinePlaceholder":39},[252,2106,2108],{"class":2107,"line":427},[254,2042],[252,2109,2110],{"class":413},"// Add the element to the catalogue\n",[252,2112,2114,2116,2118,2121,2123,2125,2128,2131],{"class":2113,"line":840},[254,2042],[252,2115,1970],{"class":307},[252,2117,310],{"class":266},[252,2119,2120],{"class":262},"{",[252,2122,2089],{"class":266},[252,2124,317],{"class":262},[252,2126,2127],{"class":266}," OrbitControls ",[252,2129,2130],{"class":262},"}",[252,2132,339],{"class":266},[252,2134,2135,2137,2139],{"class":254,"line":957},[252,2136,430],{"class":262},[252,2138,2021],{"class":382},[252,2140,386],{"class":262},[252,2142,2143],{"class":254,"line":962},[252,2144,288],{"emptyLinePlaceholder":39},[252,2146,2147,2149,2151],{"class":254,"line":968},[252,2148,379],{"class":262},[252,2150,383],{"class":382},[252,2152,386],{"class":262},[252,2154,2155,2157,2159,2162,2165],{"class":254,"line":1008},[252,2156,391],{"class":262},[252,2158,394],{"class":382},[252,2160,2161],{"class":294}," shadows",[252,2163,2164],{"class":294}," alpha",[252,2166,386],{"class":262},[252,2168,2169,2171,2173,2175,2177,2179,2181,2183,2185,2187,2189,2191,2193,2195,2197],{"class":254,"line":1017},[252,2170,401],{"class":262},[252,2172,404],{"class":382},[252,2174,486],{"class":262},[252,2176,489],{"class":294},[252,2178,301],{"class":262},[252,2180,494],{"class":262},[252,2182,591],{"class":262},[252,2184,1281],{"class":313},[252,2186,513],{"class":262},[252,2188,1281],{"class":313},[252,2190,513],{"class":262},[252,2192,1281],{"class":313},[252,2194,604],{"class":262},[252,2196,494],{"class":262},[252,2198,407],{"class":262},[252,2200,2202,2204,2207,2210,2212,2214,2217,2219,2222,2224,2226,2228,2230,2232,2234,2236,2238,2241,2243,2245,2247,2249,2252,2255,2257,2259],{"class":2201,"line":1577},[254,2042],[252,2203,401],{"class":262},[252,2205,2206],{"class":382},"TresOrbitControls",[252,2208,2209],{"class":258}," v-if",[252,2211,301],{"class":262},[252,2213,494],{"class":262},[252,2215,2216],{"class":266},"state",[252,2218,357],{"class":262},[252,2220,2221],{"class":266},"renderer",[252,2223,494],{"class":262},[252,2225,486],{"class":262},[252,2227,708],{"class":294},[252,2229,301],{"class":262},[252,2231,494],{"class":262},[252,2233,591],{"class":262},[252,2235,2216],{"class":266},[252,2237,357],{"class":262},[252,2239,2240],{"class":266},"camera",[252,2242,513],{"class":262},[252,2244,2216],{"class":266},[252,2246,357],{"class":262},[252,2248,2221],{"class":266},[252,2250,2251],{"class":262},"?.",[252,2253,2254],{"class":266},"domElement",[252,2256,604],{"class":262},[252,2258,494],{"class":262},[252,2260,407],{"class":262},[252,2262,2263,2265,2267],{"class":254,"line":1586},[252,2264,401],{"class":262},[252,2266,1612],{"class":382},[252,2268,386],{"class":262},[252,2270,2272,2275,2278,2280,2282,2284,2286,2288,2290,2292,2294,2297,2300,2303,2306,2308,2310,2313],{"class":2271,"line":1607},[254,2042],[252,2273,2274],{"class":262},"      \u003C",[252,2276,2277],{"class":382},"TresTextGeometry",[252,2279,486],{"class":262},[252,2281,708],{"class":294},[252,2283,301],{"class":262},[252,2285,494],{"class":262},[252,2287,591],{"class":262},[252,2289,993],{"class":262},[252,2291,223],{"class":279},[252,2293,993],{"class":262},[252,2295,2296],{"class":262},", { ",[252,2298,2299],{"class":266},"font",[252,2301,2302],{"class":262},", ...",[252,2304,2305],{"class":266},"fontOptions",[252,2307,1001],{"class":262},[252,2309,494],{"class":262},[252,2311,2312],{"class":294}," center",[252,2314,407],{"class":262},[252,2316,2317,2319,2322,2324,2327,2329,2331,2334,2336],{"class":254,"line":1617},[252,2318,2274],{"class":262},[252,2320,2321],{"class":382},"TresMeshMatcapMaterial",[252,2323,486],{"class":262},[252,2325,2326],{"class":294},"matcap",[252,2328,301],{"class":262},[252,2330,494],{"class":262},[252,2332,2333],{"class":266},"matcapTexture",[252,2335,494],{"class":262},[252,2337,407],{"class":262},[252,2339,2340,2343,2345],{"class":254,"line":1813},[252,2341,2342],{"class":262},"    \u003C/",[252,2344,1612],{"class":382},[252,2346,386],{"class":262},[252,2348,2350,2352,2354],{"class":254,"line":2349},18,[252,2351,420],{"class":262},[252,2353,394],{"class":382},[252,2355,386],{"class":262},[252,2357,2359,2361,2363],{"class":254,"line":2358},19,[252,2360,430],{"class":262},[252,2362,383],{"class":382},[252,2364,386],{"class":262},[2366,2367,2368],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .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 .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":248,"searchDepth":255,"depth":285,"links":2370},[2371,2372,2377,2382],{"id":449,"depth":285,"text":450},{"id":704,"depth":285,"text":2373,"children":2374},"Constructor Arguments with args",[2375,2376],{"id":850,"depth":291,"text":851},{"id":1026,"depth":291,"text":1027},{"id":1432,"depth":285,"text":1433,"children":2378},[2379,2380,2381],{"id":1439,"depth":291,"text":1440},{"id":1626,"depth":291,"text":1627},{"id":1822,"depth":291,"text":1823},{"id":1963,"depth":285,"text":1964},"Learn how TresJS automatically maps Vue components to Three.js objects using a custom renderer and autogenerated catalogue.","md",null,{},{"title":81,"description":2383},"ds3gs3tGewLhgDYnlQ-A0FW02S3lQZLQK-KEtp2llXw",[2390,2392],{"title":77,"path":78,"stem":79,"description":2391,"children":-1},"The TresCanvas component is the main component for rendering 3D scenes.",{"title":92,"path":93,"stem":94,"description":2393,"children":-1},"useTres provides a convenient access to a simplified TresJS context.",1768600246027]