[{"data":1,"prerenderedAt":2927},["ShallowReactive",2],{"navigation":3,"/getting-started/your-first-scene":256,"/getting-started/your-first-scene-surround":2922},[4,29,78,177,190,222,232,236,240,244,248,252],{"title":5,"path":6,"stem":7,"children":8,"icon":27,"titleTemplate":28},"Getting Started","/getting-started","1.getting-started/1.index",[9,12,17,22],{"title":10,"path":6,"stem":7,"icon":11},"Introduction","i-lucide-house",{"title":13,"path":14,"stem":15,"icon":16},"Installation","/getting-started/installation","1.getting-started/2.installation","i-lucide-download",{"title":18,"path":19,"stem":20,"icon":21},"Your First Scene","/getting-started/your-first-scene","1.getting-started/3.your-first-scene","i-lucide-donut",{"title":23,"path":24,"stem":25,"icon":26},"Upgrade Guide","/getting-started/upgrade-guide","1.getting-started/4.upgrade-guide","i-lucide-circle-arrow-up","i-lucide-rocket","%s · Get Started with TresJS",{"title":30,"path":31,"stem":32,"children":33},"Essentials","/essentials","2.essentials",[34,36,48],{"title":30,"path":31,"stem":35},"2.essentials/index",{"title":37,"icon":38,"open":39,"path":40,"stem":41,"children":42,"page":47},"Core Architecture","i-lucide-cpu",true,"/essentials/core-architecture","2.essentials/1.core-architecture",[43],{"title":44,"path":45,"stem":46},"Custom Vue Renderer","/essentials/core-architecture/custom-vue-renderer","2.essentials/1.core-architecture/2.custom-vue-renderer",false,{"title":49,"icon":50,"open":39,"path":51,"stem":52,"children":53,"page":47},"Key Concepts","i-lucide-medal","/essentials/concepts","2.essentials/2.concepts",[54,58,62,66,70,74],{"title":55,"path":56,"stem":57},"Declarative vs Imperative","/essentials/concepts/declarative-vs-imperative","2.essentials/2.concepts/1.declarative-vs-imperative",{"title":59,"path":60,"stem":61},"Reactivity","/essentials/concepts/reactivity","2.essentials/2.concepts/2.reactivity",{"title":63,"path":64,"stem":65},"Constructor Arguments","/essentials/concepts/constructor-arguments","2.essentials/2.concepts/3.constructor-arguments",{"title":67,"path":68,"stem":69},"Declarative Properties","/essentials/concepts/declarative-properties","2.essentials/2.concepts/4.declarative-properties",{"title":71,"path":72,"stem":73},"Extending the Catalogue","/essentials/concepts/extending-catalogue","2.essentials/2.concepts/5.extending-catalogue",{"title":75,"path":76,"stem":77},"Child Attachments","/essentials/concepts/child-attachments","2.essentials/2.concepts/6.child-attachments",{"title":79,"path":80,"stem":81,"children":82},"API","/api","3.api",[83,86,108,135,145,159],{"title":84,"path":80,"stem":85},"TresJS API Reference","3.api/1.index",{"title":87,"icon":88,"open":39,"path":89,"stem":90,"children":91,"page":47},"Components","i-lucide-box","/api/components","3.api/1.components",[92,96,100,104],{"title":93,"path":94,"stem":95},"\u003CTresCanvas />","/api/components/tres-canvas","3.api/1.components/tres-canvas",{"title":97,"path":98,"stem":99},"\u003CTresCanvasContext />","/api/components/tres-context","3.api/1.components/tres-context",{"title":101,"path":102,"stem":103},"Tres Components","/api/components/tres-objects","3.api/1.components/tres-objects",{"title":105,"path":106,"stem":107},"TresPortal","/api/components/tres-portal","3.api/1.components/tres-portal",{"title":109,"titleTemplate":110,"icon":111,"path":112,"stem":113,"children":114,"page":47},"Composables","%s · TresJS Composables","i-lucide-arrow-right-left","/api/composables","3.api/2.composables",[115,119,123,127,131],{"title":116,"path":117,"stem":118},"useTres","/api/composables/use-tres","3.api/2.composables/1.use-tres",{"title":120,"path":121,"stem":122},"useTresContext","/api/composables/use-tres-context","3.api/2.composables/2.use-tres-context",{"title":124,"path":125,"stem":126},"useLoop","/api/composables/use-loop","3.api/2.composables/3.use-loop",{"title":128,"path":129,"stem":130},"useGraph","/api/composables/use-graph","3.api/2.composables/4.use-graph",{"title":132,"path":133,"stem":134},"useLoader","/api/composables/use-loader","3.api/2.composables/5.use-loader",{"title":136,"icon":137,"path":138,"stem":139,"children":140,"page":47},"Event handling","i-lucide-mouse-pointer-2","/api/events","3.api/3.events",[141],{"title":142,"path":143,"stem":144},"Pointer Events","/api/events/pointer-events","3.api/3.events/1.pointer-events",{"title":146,"icon":147,"path":148,"stem":149,"children":150,"page":47},"Utils","i-lucide-wrench","/api/utils","3.api/4.utils",[151,155],{"title":152,"path":153,"stem":154},"Type Guards","/api/utils/type-guards","3.api/4.utils/1.type-guards",{"title":156,"path":157,"stem":158},"Directives","/api/utils/directives","3.api/4.utils/2.directives",{"title":160,"icon":161,"path":162,"stem":163,"children":164,"page":47},"Advanced","i-lucide-brain-circuit","/api/advanced","3.api/5.advanced",[165,169,173],{"title":166,"path":167,"stem":168},"Scaling Performance 🚀","/api/advanced/performance","3.api/5.advanced/performance",{"title":170,"path":171,"stem":172},"Primitives","/api/advanced/primitives","3.api/5.advanced/primitives",{"title":174,"path":175,"stem":176},"WebGPU","/api/advanced/web-gpu","3.api/5.advanced/web-gpu",{"title":178,"path":179,"stem":180,"children":181,"icon":184,"titleTemplate":189},"CLI","/cli","4.cli/1.index",[182,185],{"title":183,"path":179,"stem":180,"icon":184},"TresJS CLI","i-lucide-terminal",{"title":186,"path":187,"stem":188,"icon":88},"tres gltf","/cli/gltf","4.cli/2.gltf","%s · TresJS CLI",{"title":191,"path":192,"stem":193,"children":194},"Cookbook","/cookbook","5.cookbook",[195,198,202,206,210,214,218],{"title":196,"path":192,"stem":197},"Cookbook 🍳🧑‍🍳","5.cookbook/index",{"title":199,"path":200,"stem":201},"OrbitControls","/cookbook/orbit-controls","5.cookbook/1.orbit-controls",{"title":203,"path":204,"stem":205},"Basic Animations","/cookbook/basic-animations","5.cookbook/2.basic-animations",{"title":207,"path":208,"stem":209},"Model Animation","/cookbook/model-animation","5.cookbook/3.model-animation",{"title":211,"path":212,"stem":213},"Advanced GSAP Animations","/cookbook/advanced-gsap-animations","5.cookbook/4.advanced-gsap-animations",{"title":215,"path":216,"stem":217},"Tweakpane","/cookbook/tweakpane","5.cookbook/5.tweakpane",{"title":219,"path":220,"stem":221},"Dynamic components","/cookbook/transition-dynamic","5.cookbook/6.transition-dynamic",{"title":223,"path":224,"stem":225,"children":226},"Community","/community","6.community/1.index",[227,228],{"title":223,"path":224,"stem":225},{"title":229,"path":230,"stem":231},"Awesome Resources","/community/awesome-resources","6.community/awesome-resources",{"title":233,"path":234,"stem":235},"German Translation","/de","de",{"title":237,"path":238,"stem":239},"Spanish Translation","/es","es",{"title":241,"path":242,"stem":243},"French Translation","/fr","fr",{"title":245,"path":246,"stem":247},"Italian Translation","/it","it",{"title":249,"path":250,"stem":251},"Japanese Translation","/jp","jp",{"title":253,"path":254,"stem":255},"Chinese Translation","/zh","zh",{"id":257,"title":18,"body":258,"description":2915,"extension":2916,"links":2917,"meta":2918,"navigation":2919,"path":19,"seo":2920,"stem":20,"__hash__":2921},"docs/1.getting-started/3.your-first-scene.md",{"type":259,"value":260,"toc":2909},"minimark",[261,266,270,283,286,1748,1752,1755,2801,2805,2843,2847,2850,2887,2895,2905],[262,263,265],"h2",{"id":264},"what-youll-build","What You'll Build",[267,268,269],"p",{},"By the end of this guide, you'll have created:",[271,272,273,277,280],"ul",{},[274,275,276],"li",{},"A 3D scene with a rotating donut",[274,278,279],{},"A reusable component structure",[274,281,282],{},"Animation using TresJS composables",[284,285],"examples-my-first-scene",{},[287,288,290,294,302,488,505,509,512,525,630,639,650,653,667,671,674,798,803,808,852,860,864,871,1075,1080,1084,1091,1112,1117,1154,1159,1169,1173,1179,1577,1582,1586,1589,1622,1727,1735,1739],"steps",{"level":289},"2",[262,291,293],{"id":292},"step-1-set-up-the-canvas-component","Step 1: Set Up the Canvas Component",[267,295,296,297,301],{},"First, let's create the main canvas component that will host our 3D scene. This component will contain the ",[298,299,300],"code",{},"TresCanvas"," and handle the overall scene setup.",[303,304,310],"pre",{"className":305,"code":306,"filename":307,"language":308,"meta":309,"style":309},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { TresCanvas } from '@tresjs/core'\nimport FirstExperience from './components/FirstExperience.vue'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CTresCanvas\n    clear-color=\"#82DBC5\"\n    window-size\n  >\n    \u003CFirstExperience />\n  \u003C/TresCanvas>\n\u003C/template>\n","app.vue","vue","",[298,311,312,347,376,394,404,410,420,429,445,451,457,469,479],{"__ignoreMap":309},[313,314,317,321,325,329,332,335,338,342,344],"span",{"class":315,"line":316},"line",1,[313,318,320],{"class":319},"sMK4o","\u003C",[313,322,324],{"class":323},"swJcz","script",[313,326,328],{"class":327},"spNyl"," setup",[313,330,331],{"class":327}," lang",[313,333,334],{"class":319},"=",[313,336,337],{"class":319},"\"",[313,339,341],{"class":340},"sfazB","ts",[313,343,337],{"class":319},[313,345,346],{"class":319},">\n",[313,348,350,354,357,361,364,367,370,373],{"class":315,"line":349},2,[313,351,353],{"class":352},"s7zQu","import",[313,355,356],{"class":319}," {",[313,358,360],{"class":359},"sTEyZ"," TresCanvas",[313,362,363],{"class":319}," }",[313,365,366],{"class":352}," from",[313,368,369],{"class":319}," '",[313,371,372],{"class":340},"@tresjs/core",[313,374,375],{"class":319},"'\n",[313,377,379,381,384,387,389,392],{"class":315,"line":378},3,[313,380,353],{"class":352},[313,382,383],{"class":359}," FirstExperience ",[313,385,386],{"class":352},"from",[313,388,369],{"class":319},[313,390,391],{"class":340},"./components/FirstExperience.vue",[313,393,375],{"class":319},[313,395,397,400,402],{"class":315,"line":396},4,[313,398,399],{"class":319},"\u003C/",[313,401,324],{"class":323},[313,403,346],{"class":319},[313,405,407],{"class":315,"line":406},5,[313,408,409],{"emptyLinePlaceholder":39},"\n",[313,411,413,415,418],{"class":315,"line":412},6,[313,414,320],{"class":319},[313,416,417],{"class":323},"template",[313,419,346],{"class":319},[313,421,423,426],{"class":315,"line":422},7,[313,424,425],{"class":319},"  \u003C",[313,427,428],{"class":323},"TresCanvas\n",[313,430,432,435,437,439,442],{"class":315,"line":431},8,[313,433,434],{"class":327},"    clear-color",[313,436,334],{"class":319},[313,438,337],{"class":319},[313,440,441],{"class":340},"#82DBC5",[313,443,444],{"class":319},"\"\n",[313,446,448],{"class":315,"line":447},9,[313,449,450],{"class":327},"    window-size\n",[313,452,454],{"class":315,"line":453},10,[313,455,456],{"class":319},"  >\n",[313,458,460,463,466],{"class":315,"line":459},11,[313,461,462],{"class":319},"    \u003C",[313,464,465],{"class":323},"FirstExperience",[313,467,468],{"class":319}," />\n",[313,470,472,475,477],{"class":315,"line":471},12,[313,473,474],{"class":319},"  \u003C/",[313,476,300],{"class":323},[313,478,346],{"class":319},[313,480,482,484,486],{"class":315,"line":481},13,[313,483,399],{"class":319},[313,485,417],{"class":323},[313,487,346],{"class":319},[489,490,491],"note",{},[267,492,493,494,496,497,500,501,504],{},"The ",[298,495,300],{}," component is the root container for your 3D scene. The ",[298,498,499],{},"clear-color"," prop sets the background color, and ",[298,502,503],{},"window-size"," makes the canvas automatically fill the entire window without needing a parent container.",[262,506,508],{"id":507},"step-2-set-up-the-camera","Step 2: Set Up the Camera",[267,510,511],{},"Let's start by creating the experience component with just a camera. This will allow us to see the clear background color of our canvas.",[513,514,515],"tip",{},[267,516,517,521,522,524],{},[518,519,520],"strong",{},"Best Practice",": We recommend separating your ",[298,523,300],{}," component from your 3D experience. This pattern helps with organization, reusability, and makes your code easier to maintain.",[303,526,529],{"className":305,"code":527,"filename":528,"language":308,"meta":309,"style":309},"\u003Cscript setup lang=\"ts\">\n// No imports needed! TresJS components are available globally\n\u003C/script>\n\n\u003Ctemplate>\n  \u003C!-- Camera Setup -->\n  \u003CTresPerspectiveCamera\n    :position=\"[7, 7, 7]\"\n    :look-at=\"[0, 0, 0]\"\n  />\n\u003C/template>\n","components/FirstExperience.vue",[298,530,531,551,557,565,569,577,582,589,603,617,622],{"__ignoreMap":309},[313,532,533,535,537,539,541,543,545,547,549],{"class":315,"line":316},[313,534,320],{"class":319},[313,536,324],{"class":323},[313,538,328],{"class":327},[313,540,331],{"class":327},[313,542,334],{"class":319},[313,544,337],{"class":319},[313,546,341],{"class":340},[313,548,337],{"class":319},[313,550,346],{"class":319},[313,552,553],{"class":315,"line":349},[313,554,556],{"class":555},"sHwdD","// No imports needed! TresJS components are available globally\n",[313,558,559,561,563],{"class":315,"line":378},[313,560,399],{"class":319},[313,562,324],{"class":323},[313,564,346],{"class":319},[313,566,567],{"class":315,"line":396},[313,568,409],{"emptyLinePlaceholder":39},[313,570,571,573,575],{"class":315,"line":406},[313,572,320],{"class":319},[313,574,417],{"class":323},[313,576,346],{"class":319},[313,578,579],{"class":315,"line":412},[313,580,581],{"class":555},"  \u003C!-- Camera Setup -->\n",[313,583,584,586],{"class":315,"line":422},[313,585,425],{"class":319},[313,587,588],{"class":323},"TresPerspectiveCamera\n",[313,590,591,594,596,598,601],{"class":315,"line":431},[313,592,593],{"class":327},"    :position",[313,595,334],{"class":319},[313,597,337],{"class":319},[313,599,600],{"class":340},"[7, 7, 7]",[313,602,444],{"class":319},[313,604,605,608,610,612,615],{"class":315,"line":447},[313,606,607],{"class":327},"    :look-at",[313,609,334],{"class":319},[313,611,337],{"class":319},[313,613,614],{"class":340},"[0, 0, 0]",[313,616,444],{"class":319},[313,618,619],{"class":315,"line":453},[313,620,621],{"class":319},"  />\n",[313,623,624,626,628],{"class":315,"line":459},[313,625,399],{"class":319},[313,627,417],{"class":323},[313,629,346],{"class":319},[267,631,632,635,636,638],{},[518,633,634],{},"What you should see",": A solid turquoise background (",[298,637,441],{},") filling your entire window.",[489,640,641],{},[267,642,643,646,647,649],{},[518,644,645],{},"Common Mistake",": A common mistake is not setting the camera position, which defaults to ",[298,648,614],{}," (the center of the scene). Always position your camera away from the origin to have a proper viewpoint of your 3D objects.",[267,651,652],{},"The camera defines the viewpoint of your scene:",[271,654,655,661],{},[274,656,657,660],{},[298,658,659],{},"position=\"[7, 7, 7]\""," places the camera at coordinates X=7, Y=7, Z=7 in 3D space",[274,662,663,666],{},[298,664,665],{},"look-at=\"[0, 0, 0]\""," points the camera toward the center of the scene",[262,668,670],{"id":669},"step-3-add-visual-helpers","Step 3: Add Visual Helpers",[267,672,673],{},"Before adding our donut, let's add some visual helpers to better understand the 3D space. These helpers will show us the coordinate axes and a grid.",[303,675,677],{"className":305,"code":676,"filename":528,"language":308,"meta":309,"style":309},"\u003Cscript setup lang=\"ts\">\n// No imports needed! TresJS components are available globally\n\u003C/script>\n\n\u003Ctemplate>\n  \u003C!-- Camera Setup -->\n  \u003CTresPerspectiveCamera\n    :position=\"[7, 7, 7]\"\n    :look-at=\"[0, 0, 0]\"\n  />\n\n  \u003C!-- Visual Helpers -->\n  \u003CTresAxesHelper />\n  \u003CTresGridHelper />\n\u003C/template>\n",[298,678,679,699,703,711,715,723,727,733,745,757,761,765,770,779,789],{"__ignoreMap":309},[313,680,681,683,685,687,689,691,693,695,697],{"class":315,"line":316},[313,682,320],{"class":319},[313,684,324],{"class":323},[313,686,328],{"class":327},[313,688,331],{"class":327},[313,690,334],{"class":319},[313,692,337],{"class":319},[313,694,341],{"class":340},[313,696,337],{"class":319},[313,698,346],{"class":319},[313,700,701],{"class":315,"line":349},[313,702,556],{"class":555},[313,704,705,707,709],{"class":315,"line":378},[313,706,399],{"class":319},[313,708,324],{"class":323},[313,710,346],{"class":319},[313,712,713],{"class":315,"line":396},[313,714,409],{"emptyLinePlaceholder":39},[313,716,717,719,721],{"class":315,"line":406},[313,718,320],{"class":319},[313,720,417],{"class":323},[313,722,346],{"class":319},[313,724,725],{"class":315,"line":412},[313,726,581],{"class":555},[313,728,729,731],{"class":315,"line":422},[313,730,425],{"class":319},[313,732,588],{"class":323},[313,734,735,737,739,741,743],{"class":315,"line":431},[313,736,593],{"class":327},[313,738,334],{"class":319},[313,740,337],{"class":319},[313,742,600],{"class":340},[313,744,444],{"class":319},[313,746,747,749,751,753,755],{"class":315,"line":447},[313,748,607],{"class":327},[313,750,334],{"class":319},[313,752,337],{"class":319},[313,754,614],{"class":340},[313,756,444],{"class":319},[313,758,759],{"class":315,"line":453},[313,760,621],{"class":319},[313,762,763],{"class":315,"line":459},[313,764,409],{"emptyLinePlaceholder":39},[313,766,767],{"class":315,"line":471},[313,768,769],{"class":555},"  \u003C!-- Visual Helpers -->\n",[313,771,772,774,777],{"class":315,"line":481},[313,773,425],{"class":319},[313,775,776],{"class":323},"TresAxesHelper",[313,778,468],{"class":319},[313,780,782,784,787],{"class":315,"line":781},14,[313,783,425],{"class":319},[313,785,786],{"class":323},"TresGridHelper",[313,788,468],{"class":319},[313,790,792,794,796],{"class":315,"line":791},15,[313,793,399],{"class":319},[313,795,417],{"class":323},[313,797,346],{"class":319},[267,799,800,802],{},[518,801,634],{},": A turquoise background with red, green, and blue arrows showing the X, Y, Z axes, plus a grid on the ground plane.",[804,805,807],"h3",{"id":806},"understanding-the-helpers","Understanding the Helpers",[271,809,810,837],{},[274,811,812,816,817],{},[518,813,814],{},[298,815,776],{},": Shows the coordinate system with colored arrows",[271,818,819,825,831],{},[274,820,821,824],{},[518,822,823],{},"Red arrow",": X-axis (left/right)",[274,826,827,830],{},[518,828,829],{},"Green arrow",": Y-axis (up/down)",[274,832,833,836],{},[518,834,835],{},"Blue arrow",": Z-axis (forward/backward)",[274,838,839,843,844],{},[518,840,841],{},[298,842,786],{},": Shows a grid on the XZ plane (ground)",[271,845,846,849],{},[274,847,848],{},"Helps visualize object positioning and scale",[274,850,851],{},"The grid center is at the origin (0, 0, 0)",[513,853,854],{},[267,855,856,859],{},[518,857,858],{},"Development Tip",": These helpers are invaluable for development and debugging. Remove them when your scene is ready for production!",[262,861,863],{"id":862},"step-4-add-the-donut","Step 4: Add the Donut",[267,865,866,867,870],{},"Now let's add our 3D donut to the scene. In TresJS, 3D objects are created using a ",[298,868,869],{},"TresMesh"," component with geometry and material as children.",[303,872,874],{"className":305,"code":873,"filename":528,"language":308,"meta":309,"style":309},"\u003Cscript setup lang=\"ts\">\n// No imports needed! TresJS components are available globally\n\u003C/script>\n\n\u003Ctemplate>\n  \u003C!-- Camera Setup -->\n  \u003CTresPerspectiveCamera\n    :position=\"[7, 7, 7]\"\n    :look-at=\"[0, 0, 0]\"\n  />\n\n  \u003C!-- The Donut -->\n  \u003CTresMesh :position=\"[0, 2, 0]\">\n    \u003CTresTorusGeometry :args=\"[1, 0.4, 16, 32]\" />\n    \u003CTresMeshBasicMaterial color=\"#ff6b35\" />\n  \u003C/TresMesh>\n\n  \u003C!-- Visual Helpers -->\n  \u003CTresAxesHelper />\n  \u003CTresGridHelper />\n\u003C/template>\n",[298,875,876,896,900,908,912,920,924,930,942,954,958,962,967,987,1008,1029,1038,1043,1048,1057,1066],{"__ignoreMap":309},[313,877,878,880,882,884,886,888,890,892,894],{"class":315,"line":316},[313,879,320],{"class":319},[313,881,324],{"class":323},[313,883,328],{"class":327},[313,885,331],{"class":327},[313,887,334],{"class":319},[313,889,337],{"class":319},[313,891,341],{"class":340},[313,893,337],{"class":319},[313,895,346],{"class":319},[313,897,898],{"class":315,"line":349},[313,899,556],{"class":555},[313,901,902,904,906],{"class":315,"line":378},[313,903,399],{"class":319},[313,905,324],{"class":323},[313,907,346],{"class":319},[313,909,910],{"class":315,"line":396},[313,911,409],{"emptyLinePlaceholder":39},[313,913,914,916,918],{"class":315,"line":406},[313,915,320],{"class":319},[313,917,417],{"class":323},[313,919,346],{"class":319},[313,921,922],{"class":315,"line":412},[313,923,581],{"class":555},[313,925,926,928],{"class":315,"line":422},[313,927,425],{"class":319},[313,929,588],{"class":323},[313,931,932,934,936,938,940],{"class":315,"line":431},[313,933,593],{"class":327},[313,935,334],{"class":319},[313,937,337],{"class":319},[313,939,600],{"class":340},[313,941,444],{"class":319},[313,943,944,946,948,950,952],{"class":315,"line":447},[313,945,607],{"class":327},[313,947,334],{"class":319},[313,949,337],{"class":319},[313,951,614],{"class":340},[313,953,444],{"class":319},[313,955,956],{"class":315,"line":453},[313,957,621],{"class":319},[313,959,960],{"class":315,"line":459},[313,961,409],{"emptyLinePlaceholder":39},[313,963,964],{"class":315,"line":471},[313,965,966],{"class":555},"  \u003C!-- The Donut -->\n",[313,968,969,971,973,976,978,980,983,985],{"class":315,"line":481},[313,970,425],{"class":319},[313,972,869],{"class":323},[313,974,975],{"class":327}," :position",[313,977,334],{"class":319},[313,979,337],{"class":319},[313,981,982],{"class":340},"[0, 2, 0]",[313,984,337],{"class":319},[313,986,346],{"class":319},[313,988,989,991,994,997,999,1001,1004,1006],{"class":315,"line":781},[313,990,462],{"class":319},[313,992,993],{"class":323},"TresTorusGeometry",[313,995,996],{"class":327}," :args",[313,998,334],{"class":319},[313,1000,337],{"class":319},[313,1002,1003],{"class":340},"[1, 0.4, 16, 32]",[313,1005,337],{"class":319},[313,1007,468],{"class":319},[313,1009,1010,1012,1015,1018,1020,1022,1025,1027],{"class":315,"line":791},[313,1011,462],{"class":319},[313,1013,1014],{"class":323},"TresMeshBasicMaterial",[313,1016,1017],{"class":327}," color",[313,1019,334],{"class":319},[313,1021,337],{"class":319},[313,1023,1024],{"class":340},"#ff6b35",[313,1026,337],{"class":319},[313,1028,468],{"class":319},[313,1030,1032,1034,1036],{"class":315,"line":1031},16,[313,1033,474],{"class":319},[313,1035,869],{"class":323},[313,1037,346],{"class":319},[313,1039,1041],{"class":315,"line":1040},17,[313,1042,409],{"emptyLinePlaceholder":39},[313,1044,1046],{"class":315,"line":1045},18,[313,1047,769],{"class":555},[313,1049,1051,1053,1055],{"class":315,"line":1050},19,[313,1052,425],{"class":319},[313,1054,776],{"class":323},[313,1056,468],{"class":319},[313,1058,1060,1062,1064],{"class":315,"line":1059},20,[313,1061,425],{"class":319},[313,1063,786],{"class":323},[313,1065,468],{"class":319},[313,1067,1069,1071,1073],{"class":315,"line":1068},21,[313,1070,399],{"class":319},[313,1072,417],{"class":323},[313,1074,346],{"class":319},[267,1076,1077,1079],{},[518,1078,634],{},": A bright orange donut shape in the center of your scene!",[804,1081,1083],{"id":1082},"understanding-the-mesh-structure","Understanding the Mesh Structure",[267,1085,1086,1087,1090],{},"In TresJS, 3D objects follow a ",[518,1088,1089],{},"slot-based pattern",":",[271,1092,1093,1098,1105],{},[274,1094,1095,1097],{},[298,1096,869],{}," is the container that represents a 3D object",[274,1099,1100,1101,1104],{},"The first child defines the ",[518,1102,1103],{},"geometry"," (shape)",[274,1106,1107,1108,1111],{},"The second child defines the ",[518,1109,1110],{},"material"," (appearance)",[267,1113,1114],{},[518,1115,1116],{},"Geometry Parameters:",[271,1118,1119],{},[274,1120,1121,1123,1124,1127,1128],{},[298,1122,993],{}," creates the donut shape with an array of parameters ",[298,1125,1126],{},"[radius, tube, radialSegments, tubularSegments]",":\n",[271,1129,1130,1136,1142,1148],{},[274,1131,1132,1135],{},[298,1133,1134],{},"radius: 1"," - Overall size of the donut",[274,1137,1138,1141],{},[298,1139,1140],{},"tube: 0.4"," - Thickness of the donut tube",[274,1143,1144,1147],{},[298,1145,1146],{},"radialSegments: 16"," - How smooth the donut curve is",[274,1149,1150,1153],{},[298,1151,1152],{},"tubularSegments: 32"," - How smooth the tube surface is",[267,1155,1156],{},[518,1157,1158],{},"Material Types:",[271,1160,1161,1166],{},[274,1162,1163,1165],{},[298,1164,1014],{}," - Simple material that doesn't require lighting",[274,1167,1168],{},"Perfect for beginners and solid colors",[262,1170,1172],{"id":1171},"step-5-add-animation","Step 5: Add Animation",[267,1174,1175,1176,1178],{},"Finally, let's make our donut rotate! We'll use TresJS's ",[298,1177,124],{}," composable to create smooth animations.",[303,1180,1182],{"className":305,"code":1181,"filename":528,"language":308,"meta":309,"style":309},"\u003Cscript setup lang=\"ts\">\nimport { useLoop } from '@tresjs/core'\nimport { ref } from 'vue'\n\n// Reference to our donut mesh for animation\nconst donutRef = ref()\n\n// Animation loop\nconst { onBeforeRender } = useLoop()\n\nonBeforeRender(({ elapsed }) => {\n  if (donutRef.value) {\n    // Rotate the donut on both X and Y axes\n    donutRef.value.rotation.x = elapsed * 0.5\n    donutRef.value.rotation.y = elapsed * 0.3\n  }\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003C!-- Camera Setup -->\n  \u003CTresPerspectiveCamera\n    :position=\"[4, 4, 4]\"\n    :look-at=\"[0, 0, 0]\"\n  />\n\n  \u003C!-- The Donut -->\n  \u003CTresMesh ref=\"donutRef\" :position=\"[0, 2, 0]\">\n    \u003CTresTorusGeometry :args=\"[1, 0.4, 16, 32]\" />\n    \u003CTresMeshBasicMaterial color=\"#ff6b35\" />\n  \u003C/TresMesh>\n\u003C/template>\n",[298,1183,1184,1204,1223,1242,1246,1251,1267,1271,1276,1295,1299,1323,1346,1351,1381,1407,1412,1419,1427,1431,1439,1443,1450,1464,1477,1482,1487,1492,1521,1540,1559,1568],{"__ignoreMap":309},[313,1185,1186,1188,1190,1192,1194,1196,1198,1200,1202],{"class":315,"line":316},[313,1187,320],{"class":319},[313,1189,324],{"class":323},[313,1191,328],{"class":327},[313,1193,331],{"class":327},[313,1195,334],{"class":319},[313,1197,337],{"class":319},[313,1199,341],{"class":340},[313,1201,337],{"class":319},[313,1203,346],{"class":319},[313,1205,1206,1208,1210,1213,1215,1217,1219,1221],{"class":315,"line":349},[313,1207,353],{"class":352},[313,1209,356],{"class":319},[313,1211,1212],{"class":359}," useLoop",[313,1214,363],{"class":319},[313,1216,366],{"class":352},[313,1218,369],{"class":319},[313,1220,372],{"class":340},[313,1222,375],{"class":319},[313,1224,1225,1227,1229,1232,1234,1236,1238,1240],{"class":315,"line":378},[313,1226,353],{"class":352},[313,1228,356],{"class":319},[313,1230,1231],{"class":359}," ref",[313,1233,363],{"class":319},[313,1235,366],{"class":352},[313,1237,369],{"class":319},[313,1239,308],{"class":340},[313,1241,375],{"class":319},[313,1243,1244],{"class":315,"line":396},[313,1245,409],{"emptyLinePlaceholder":39},[313,1247,1248],{"class":315,"line":406},[313,1249,1250],{"class":555},"// Reference to our donut mesh for animation\n",[313,1252,1253,1256,1259,1261,1264],{"class":315,"line":412},[313,1254,1255],{"class":327},"const",[313,1257,1258],{"class":359}," donutRef ",[313,1260,334],{"class":319},[313,1262,1231],{"class":1263},"s2Zo4",[313,1265,1266],{"class":359},"()\n",[313,1268,1269],{"class":315,"line":422},[313,1270,409],{"emptyLinePlaceholder":39},[313,1272,1273],{"class":315,"line":431},[313,1274,1275],{"class":555},"// Animation loop\n",[313,1277,1278,1280,1282,1285,1288,1291,1293],{"class":315,"line":447},[313,1279,1255],{"class":327},[313,1281,356],{"class":319},[313,1283,1284],{"class":359}," onBeforeRender ",[313,1286,1287],{"class":319},"}",[313,1289,1290],{"class":319}," =",[313,1292,1212],{"class":1263},[313,1294,1266],{"class":359},[313,1296,1297],{"class":315,"line":453},[313,1298,409],{"emptyLinePlaceholder":39},[313,1300,1301,1304,1307,1310,1314,1317,1320],{"class":315,"line":459},[313,1302,1303],{"class":1263},"onBeforeRender",[313,1305,1306],{"class":359},"(",[313,1308,1309],{"class":319},"({",[313,1311,1313],{"class":1312},"sHdIc"," elapsed",[313,1315,1316],{"class":319}," })",[313,1318,1319],{"class":327}," =>",[313,1321,1322],{"class":319}," {\n",[313,1324,1325,1328,1331,1334,1337,1340,1343],{"class":315,"line":471},[313,1326,1327],{"class":352},"  if",[313,1329,1330],{"class":323}," (",[313,1332,1333],{"class":359},"donutRef",[313,1335,1336],{"class":319},".",[313,1338,1339],{"class":359},"value",[313,1341,1342],{"class":323},") ",[313,1344,1345],{"class":319},"{\n",[313,1347,1348],{"class":315,"line":481},[313,1349,1350],{"class":555},"    // Rotate the donut on both X and Y axes\n",[313,1352,1353,1356,1358,1360,1362,1365,1367,1370,1372,1374,1377],{"class":315,"line":781},[313,1354,1355],{"class":359},"    donutRef",[313,1357,1336],{"class":319},[313,1359,1339],{"class":359},[313,1361,1336],{"class":319},[313,1363,1364],{"class":359},"rotation",[313,1366,1336],{"class":319},[313,1368,1369],{"class":359},"x",[313,1371,1290],{"class":319},[313,1373,1313],{"class":359},[313,1375,1376],{"class":319}," *",[313,1378,1380],{"class":1379},"sbssI"," 0.5\n",[313,1382,1383,1385,1387,1389,1391,1393,1395,1398,1400,1402,1404],{"class":315,"line":791},[313,1384,1355],{"class":359},[313,1386,1336],{"class":319},[313,1388,1339],{"class":359},[313,1390,1336],{"class":319},[313,1392,1364],{"class":359},[313,1394,1336],{"class":319},[313,1396,1397],{"class":359},"y",[313,1399,1290],{"class":319},[313,1401,1313],{"class":359},[313,1403,1376],{"class":319},[313,1405,1406],{"class":1379}," 0.3\n",[313,1408,1409],{"class":315,"line":1031},[313,1410,1411],{"class":319},"  }\n",[313,1413,1414,1416],{"class":315,"line":1040},[313,1415,1287],{"class":319},[313,1417,1418],{"class":359},")\n",[313,1420,1421,1423,1425],{"class":315,"line":1045},[313,1422,399],{"class":319},[313,1424,324],{"class":323},[313,1426,346],{"class":319},[313,1428,1429],{"class":315,"line":1050},[313,1430,409],{"emptyLinePlaceholder":39},[313,1432,1433,1435,1437],{"class":315,"line":1059},[313,1434,320],{"class":319},[313,1436,417],{"class":323},[313,1438,346],{"class":319},[313,1440,1441],{"class":315,"line":1068},[313,1442,581],{"class":555},[313,1444,1446,1448],{"class":315,"line":1445},22,[313,1447,425],{"class":319},[313,1449,588],{"class":323},[313,1451,1453,1455,1457,1459,1462],{"class":315,"line":1452},23,[313,1454,593],{"class":327},[313,1456,334],{"class":319},[313,1458,337],{"class":319},[313,1460,1461],{"class":340},"[4, 4, 4]",[313,1463,444],{"class":319},[313,1465,1467,1469,1471,1473,1475],{"class":315,"line":1466},24,[313,1468,607],{"class":327},[313,1470,334],{"class":319},[313,1472,337],{"class":319},[313,1474,614],{"class":340},[313,1476,444],{"class":319},[313,1478,1480],{"class":315,"line":1479},25,[313,1481,621],{"class":319},[313,1483,1485],{"class":315,"line":1484},26,[313,1486,409],{"emptyLinePlaceholder":39},[313,1488,1490],{"class":315,"line":1489},27,[313,1491,966],{"class":555},[313,1493,1495,1497,1499,1501,1503,1505,1507,1509,1511,1513,1515,1517,1519],{"class":315,"line":1494},28,[313,1496,425],{"class":319},[313,1498,869],{"class":323},[313,1500,1231],{"class":327},[313,1502,334],{"class":319},[313,1504,337],{"class":319},[313,1506,1333],{"class":340},[313,1508,337],{"class":319},[313,1510,975],{"class":327},[313,1512,334],{"class":319},[313,1514,337],{"class":319},[313,1516,982],{"class":340},[313,1518,337],{"class":319},[313,1520,346],{"class":319},[313,1522,1524,1526,1528,1530,1532,1534,1536,1538],{"class":315,"line":1523},29,[313,1525,462],{"class":319},[313,1527,993],{"class":323},[313,1529,996],{"class":327},[313,1531,334],{"class":319},[313,1533,337],{"class":319},[313,1535,1003],{"class":340},[313,1537,337],{"class":319},[313,1539,468],{"class":319},[313,1541,1543,1545,1547,1549,1551,1553,1555,1557],{"class":315,"line":1542},30,[313,1544,462],{"class":319},[313,1546,1014],{"class":323},[313,1548,1017],{"class":327},[313,1550,334],{"class":319},[313,1552,337],{"class":319},[313,1554,1024],{"class":340},[313,1556,337],{"class":319},[313,1558,468],{"class":319},[313,1560,1562,1564,1566],{"class":315,"line":1561},31,[313,1563,474],{"class":319},[313,1565,869],{"class":323},[313,1567,346],{"class":319},[313,1569,1571,1573,1575],{"class":315,"line":1570},32,[313,1572,399],{"class":319},[313,1574,417],{"class":323},[313,1576,346],{"class":319},[267,1578,1579,1581],{},[518,1580,634],{},": Your donut now rotates smoothly on both the X and Y axes!",[804,1583,1585],{"id":1584},"understanding-animation","Understanding Animation",[267,1587,1588],{},"The animation (system) consists of:",[1590,1591,1592,1602,1608,1613],"ol",{},[274,1593,1594,1597,1598,1601],{},[518,1595,1596],{},"Template Ref",": ",[298,1599,1600],{},"ref=\"donutRef\""," creates a reference to the mesh object",[274,1603,1604,1607],{},[518,1605,1606],{},"useLoop Hook",": Provides access to the render loop",[274,1609,1610,1612],{},[518,1611,1303],{},": Runs before each frame is rendered",[274,1614,1615,1597,1618,1621],{},[518,1616,1617],{},"Elapsed Time",[298,1619,1620],{},"elapsed"," parameter gives us the total time since animation started",[303,1623,1627],{"className":1624,"code":1625,"language":1626,"meta":309,"style":309},"language-typescript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","onBeforeRender(({ elapsed }) => {\n  if (donutRef.value) {\n    donutRef.value.rotation.x = elapsed * 0.5 // Rotates on X-axis\n    donutRef.value.rotation.y = elapsed * 0.3 // Rotates on Y-axis (different speed)\n  }\n})\n","typescript",[298,1628,1629,1645,1661,1689,1717,1721],{"__ignoreMap":309},[313,1630,1631,1633,1635,1637,1639,1641,1643],{"class":315,"line":316},[313,1632,1303],{"class":1263},[313,1634,1306],{"class":359},[313,1636,1309],{"class":319},[313,1638,1313],{"class":1312},[313,1640,1316],{"class":319},[313,1642,1319],{"class":327},[313,1644,1322],{"class":319},[313,1646,1647,1649,1651,1653,1655,1657,1659],{"class":315,"line":349},[313,1648,1327],{"class":352},[313,1650,1330],{"class":323},[313,1652,1333],{"class":359},[313,1654,1336],{"class":319},[313,1656,1339],{"class":359},[313,1658,1342],{"class":323},[313,1660,1345],{"class":319},[313,1662,1663,1665,1667,1669,1671,1673,1675,1677,1679,1681,1683,1686],{"class":315,"line":378},[313,1664,1355],{"class":359},[313,1666,1336],{"class":319},[313,1668,1339],{"class":359},[313,1670,1336],{"class":319},[313,1672,1364],{"class":359},[313,1674,1336],{"class":319},[313,1676,1369],{"class":359},[313,1678,1290],{"class":319},[313,1680,1313],{"class":359},[313,1682,1376],{"class":319},[313,1684,1685],{"class":1379}," 0.5",[313,1687,1688],{"class":555}," // Rotates on X-axis\n",[313,1690,1691,1693,1695,1697,1699,1701,1703,1705,1707,1709,1711,1714],{"class":315,"line":396},[313,1692,1355],{"class":359},[313,1694,1336],{"class":319},[313,1696,1339],{"class":359},[313,1698,1336],{"class":319},[313,1700,1364],{"class":359},[313,1702,1336],{"class":319},[313,1704,1397],{"class":359},[313,1706,1290],{"class":319},[313,1708,1313],{"class":359},[313,1710,1376],{"class":319},[313,1712,1713],{"class":1379}," 0.3",[313,1715,1716],{"class":555}," // Rotates on Y-axis (different speed)\n",[313,1718,1719],{"class":315,"line":406},[313,1720,1411],{"class":319},[313,1722,1723,1725],{"class":315,"line":412},[313,1724,1287],{"class":319},[313,1726,1418],{"class":359},[489,1728,1729],{},[267,1730,1731,1732,1734],{},"Using ",[298,1733,1620],{}," time creates smooth, time-based animations that run consistently regardless of frame rate. The multipliers (0.5 and 0.3) control the rotation speed on each axis.",[262,1736,1738],{"id":1737},"step-6-running-your-scene","Step 6: Running Your Scene",[267,1740,1741,1742,1744,1745,1747],{},"Your scene is now complete! Since we've set up everything in ",[298,1743,307],{},", your 3D scene will automatically render when you start your application. The ",[298,1746,503],{}," prop ensures the canvas fills the entire viewport automatically.",[262,1749,1751],{"id":1750},"final-project-structure","Final Project Structure",[267,1753,1754],{},"Here's the complete file structure and code for your first TresJS scene:",[1756,1757,1758,1884,2261,2331,2669],"code-tree",{"default-value":528},[303,1759,1760],{"className":305,"code":306,"filename":307,"language":308,"meta":309,"style":309},[298,1761,1762,1782,1800,1814,1822,1826,1834,1840,1852,1856,1860,1868,1876],{"__ignoreMap":309},[313,1763,1764,1766,1768,1770,1772,1774,1776,1778,1780],{"class":315,"line":316},[313,1765,320],{"class":319},[313,1767,324],{"class":323},[313,1769,328],{"class":327},[313,1771,331],{"class":327},[313,1773,334],{"class":319},[313,1775,337],{"class":319},[313,1777,341],{"class":340},[313,1779,337],{"class":319},[313,1781,346],{"class":319},[313,1783,1784,1786,1788,1790,1792,1794,1796,1798],{"class":315,"line":349},[313,1785,353],{"class":352},[313,1787,356],{"class":319},[313,1789,360],{"class":359},[313,1791,363],{"class":319},[313,1793,366],{"class":352},[313,1795,369],{"class":319},[313,1797,372],{"class":340},[313,1799,375],{"class":319},[313,1801,1802,1804,1806,1808,1810,1812],{"class":315,"line":378},[313,1803,353],{"class":352},[313,1805,383],{"class":359},[313,1807,386],{"class":352},[313,1809,369],{"class":319},[313,1811,391],{"class":340},[313,1813,375],{"class":319},[313,1815,1816,1818,1820],{"class":315,"line":396},[313,1817,399],{"class":319},[313,1819,324],{"class":323},[313,1821,346],{"class":319},[313,1823,1824],{"class":315,"line":406},[313,1825,409],{"emptyLinePlaceholder":39},[313,1827,1828,1830,1832],{"class":315,"line":412},[313,1829,320],{"class":319},[313,1831,417],{"class":323},[313,1833,346],{"class":319},[313,1835,1836,1838],{"class":315,"line":422},[313,1837,425],{"class":319},[313,1839,428],{"class":323},[313,1841,1842,1844,1846,1848,1850],{"class":315,"line":431},[313,1843,434],{"class":327},[313,1845,334],{"class":319},[313,1847,337],{"class":319},[313,1849,441],{"class":340},[313,1851,444],{"class":319},[313,1853,1854],{"class":315,"line":447},[313,1855,450],{"class":327},[313,1857,1858],{"class":315,"line":453},[313,1859,456],{"class":319},[313,1861,1862,1864,1866],{"class":315,"line":459},[313,1863,462],{"class":319},[313,1865,465],{"class":323},[313,1867,468],{"class":319},[313,1869,1870,1872,1874],{"class":315,"line":471},[313,1871,474],{"class":319},[313,1873,300],{"class":323},[313,1875,346],{"class":319},[313,1877,1878,1880,1882],{"class":315,"line":481},[313,1879,399],{"class":319},[313,1881,417],{"class":323},[313,1883,346],{"class":319},[303,1885,1887],{"className":305,"code":1886,"filename":528,"language":308,"meta":309,"style":309},"\u003Cscript setup lang=\"ts\">\nimport { useLoop } from '@tresjs/core'\nimport { ref } from 'vue'\n\n// Reference to our donut mesh for animation\nconst donutRef = ref()\n\n// Animation loop\nconst { onBeforeRender } = useLoop()\n\nonBeforeRender(({ elapsed }) => {\n  if (donutRef.value) {\n    // Rotate the donut on both X and Y axes\n    donutRef.value.rotation.x = elapsed * 0.5\n    donutRef.value.rotation.y = elapsed * 0.3\n  }\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003C!-- Camera Setup -->\n  \u003CTresPerspectiveCamera\n    :position=\"[7, 7, 7]\"\n    :look-at=\"[0, 0, 0]\"\n  />\n\n  \u003C!-- The Donut -->\n  \u003CTresMesh ref=\"donutRef\" :position=\"[0, 2, 0]\">\n    \u003CTresTorusGeometry :args=\"[1, 0.4, 16, 32]\" />\n    \u003CTresMeshBasicMaterial color=\"#ff6b35\" />\n  \u003C/TresMesh>\n\n  \u003C!-- Visual Helpers -->\n  \u003CTresAxesHelper />\n  \u003CTresGridHelper />\n\u003C/template>\n",[298,1888,1889,1909,1927,1945,1949,1953,1965,1969,1973,1989,1993,2009,2025,2029,2053,2077,2081,2087,2095,2099,2107,2111,2117,2129,2141,2145,2149,2153,2181,2199,2217,2225,2229,2234,2243,2252],{"__ignoreMap":309},[313,1890,1891,1893,1895,1897,1899,1901,1903,1905,1907],{"class":315,"line":316},[313,1892,320],{"class":319},[313,1894,324],{"class":323},[313,1896,328],{"class":327},[313,1898,331],{"class":327},[313,1900,334],{"class":319},[313,1902,337],{"class":319},[313,1904,341],{"class":340},[313,1906,337],{"class":319},[313,1908,346],{"class":319},[313,1910,1911,1913,1915,1917,1919,1921,1923,1925],{"class":315,"line":349},[313,1912,353],{"class":352},[313,1914,356],{"class":319},[313,1916,1212],{"class":359},[313,1918,363],{"class":319},[313,1920,366],{"class":352},[313,1922,369],{"class":319},[313,1924,372],{"class":340},[313,1926,375],{"class":319},[313,1928,1929,1931,1933,1935,1937,1939,1941,1943],{"class":315,"line":378},[313,1930,353],{"class":352},[313,1932,356],{"class":319},[313,1934,1231],{"class":359},[313,1936,363],{"class":319},[313,1938,366],{"class":352},[313,1940,369],{"class":319},[313,1942,308],{"class":340},[313,1944,375],{"class":319},[313,1946,1947],{"class":315,"line":396},[313,1948,409],{"emptyLinePlaceholder":39},[313,1950,1951],{"class":315,"line":406},[313,1952,1250],{"class":555},[313,1954,1955,1957,1959,1961,1963],{"class":315,"line":412},[313,1956,1255],{"class":327},[313,1958,1258],{"class":359},[313,1960,334],{"class":319},[313,1962,1231],{"class":1263},[313,1964,1266],{"class":359},[313,1966,1967],{"class":315,"line":422},[313,1968,409],{"emptyLinePlaceholder":39},[313,1970,1971],{"class":315,"line":431},[313,1972,1275],{"class":555},[313,1974,1975,1977,1979,1981,1983,1985,1987],{"class":315,"line":447},[313,1976,1255],{"class":327},[313,1978,356],{"class":319},[313,1980,1284],{"class":359},[313,1982,1287],{"class":319},[313,1984,1290],{"class":319},[313,1986,1212],{"class":1263},[313,1988,1266],{"class":359},[313,1990,1991],{"class":315,"line":453},[313,1992,409],{"emptyLinePlaceholder":39},[313,1994,1995,1997,1999,2001,2003,2005,2007],{"class":315,"line":459},[313,1996,1303],{"class":1263},[313,1998,1306],{"class":359},[313,2000,1309],{"class":319},[313,2002,1313],{"class":1312},[313,2004,1316],{"class":319},[313,2006,1319],{"class":327},[313,2008,1322],{"class":319},[313,2010,2011,2013,2015,2017,2019,2021,2023],{"class":315,"line":471},[313,2012,1327],{"class":352},[313,2014,1330],{"class":323},[313,2016,1333],{"class":359},[313,2018,1336],{"class":319},[313,2020,1339],{"class":359},[313,2022,1342],{"class":323},[313,2024,1345],{"class":319},[313,2026,2027],{"class":315,"line":481},[313,2028,1350],{"class":555},[313,2030,2031,2033,2035,2037,2039,2041,2043,2045,2047,2049,2051],{"class":315,"line":781},[313,2032,1355],{"class":359},[313,2034,1336],{"class":319},[313,2036,1339],{"class":359},[313,2038,1336],{"class":319},[313,2040,1364],{"class":359},[313,2042,1336],{"class":319},[313,2044,1369],{"class":359},[313,2046,1290],{"class":319},[313,2048,1313],{"class":359},[313,2050,1376],{"class":319},[313,2052,1380],{"class":1379},[313,2054,2055,2057,2059,2061,2063,2065,2067,2069,2071,2073,2075],{"class":315,"line":791},[313,2056,1355],{"class":359},[313,2058,1336],{"class":319},[313,2060,1339],{"class":359},[313,2062,1336],{"class":319},[313,2064,1364],{"class":359},[313,2066,1336],{"class":319},[313,2068,1397],{"class":359},[313,2070,1290],{"class":319},[313,2072,1313],{"class":359},[313,2074,1376],{"class":319},[313,2076,1406],{"class":1379},[313,2078,2079],{"class":315,"line":1031},[313,2080,1411],{"class":319},[313,2082,2083,2085],{"class":315,"line":1040},[313,2084,1287],{"class":319},[313,2086,1418],{"class":359},[313,2088,2089,2091,2093],{"class":315,"line":1045},[313,2090,399],{"class":319},[313,2092,324],{"class":323},[313,2094,346],{"class":319},[313,2096,2097],{"class":315,"line":1050},[313,2098,409],{"emptyLinePlaceholder":39},[313,2100,2101,2103,2105],{"class":315,"line":1059},[313,2102,320],{"class":319},[313,2104,417],{"class":323},[313,2106,346],{"class":319},[313,2108,2109],{"class":315,"line":1068},[313,2110,581],{"class":555},[313,2112,2113,2115],{"class":315,"line":1445},[313,2114,425],{"class":319},[313,2116,588],{"class":323},[313,2118,2119,2121,2123,2125,2127],{"class":315,"line":1452},[313,2120,593],{"class":327},[313,2122,334],{"class":319},[313,2124,337],{"class":319},[313,2126,600],{"class":340},[313,2128,444],{"class":319},[313,2130,2131,2133,2135,2137,2139],{"class":315,"line":1466},[313,2132,607],{"class":327},[313,2134,334],{"class":319},[313,2136,337],{"class":319},[313,2138,614],{"class":340},[313,2140,444],{"class":319},[313,2142,2143],{"class":315,"line":1479},[313,2144,621],{"class":319},[313,2146,2147],{"class":315,"line":1484},[313,2148,409],{"emptyLinePlaceholder":39},[313,2150,2151],{"class":315,"line":1489},[313,2152,966],{"class":555},[313,2154,2155,2157,2159,2161,2163,2165,2167,2169,2171,2173,2175,2177,2179],{"class":315,"line":1494},[313,2156,425],{"class":319},[313,2158,869],{"class":323},[313,2160,1231],{"class":327},[313,2162,334],{"class":319},[313,2164,337],{"class":319},[313,2166,1333],{"class":340},[313,2168,337],{"class":319},[313,2170,975],{"class":327},[313,2172,334],{"class":319},[313,2174,337],{"class":319},[313,2176,982],{"class":340},[313,2178,337],{"class":319},[313,2180,346],{"class":319},[313,2182,2183,2185,2187,2189,2191,2193,2195,2197],{"class":315,"line":1523},[313,2184,462],{"class":319},[313,2186,993],{"class":323},[313,2188,996],{"class":327},[313,2190,334],{"class":319},[313,2192,337],{"class":319},[313,2194,1003],{"class":340},[313,2196,337],{"class":319},[313,2198,468],{"class":319},[313,2200,2201,2203,2205,2207,2209,2211,2213,2215],{"class":315,"line":1542},[313,2202,462],{"class":319},[313,2204,1014],{"class":323},[313,2206,1017],{"class":327},[313,2208,334],{"class":319},[313,2210,337],{"class":319},[313,2212,1024],{"class":340},[313,2214,337],{"class":319},[313,2216,468],{"class":319},[313,2218,2219,2221,2223],{"class":315,"line":1561},[313,2220,474],{"class":319},[313,2222,869],{"class":323},[313,2224,346],{"class":319},[313,2226,2227],{"class":315,"line":1570},[313,2228,409],{"emptyLinePlaceholder":39},[313,2230,2232],{"class":315,"line":2231},33,[313,2233,769],{"class":555},[313,2235,2237,2239,2241],{"class":315,"line":2236},34,[313,2238,425],{"class":319},[313,2240,776],{"class":323},[313,2242,468],{"class":319},[313,2244,2246,2248,2250],{"class":315,"line":2245},35,[313,2247,425],{"class":319},[313,2249,786],{"class":323},[313,2251,468],{"class":319},[313,2253,2255,2257,2259],{"class":315,"line":2254},36,[313,2256,399],{"class":319},[313,2258,417],{"class":323},[313,2260,346],{"class":319},[303,2262,2265],{"className":1624,"code":2263,"filename":2264,"language":1626,"meta":309,"style":309},"import { createApp } from 'vue'\nimport App from './App.vue'\n\ncreateApp(App).mount('#app')\n","main.ts",[298,2266,2267,2286,2302,2306],{"__ignoreMap":309},[313,2268,2269,2271,2273,2276,2278,2280,2282,2284],{"class":315,"line":316},[313,2270,353],{"class":352},[313,2272,356],{"class":319},[313,2274,2275],{"class":359}," createApp",[313,2277,363],{"class":319},[313,2279,366],{"class":352},[313,2281,369],{"class":319},[313,2283,308],{"class":340},[313,2285,375],{"class":319},[313,2287,2288,2290,2293,2295,2297,2300],{"class":315,"line":349},[313,2289,353],{"class":352},[313,2291,2292],{"class":359}," App ",[313,2294,386],{"class":352},[313,2296,369],{"class":319},[313,2298,2299],{"class":340},"./App.vue",[313,2301,375],{"class":319},[313,2303,2304],{"class":315,"line":378},[313,2305,409],{"emptyLinePlaceholder":39},[313,2307,2308,2311,2314,2316,2319,2321,2324,2327,2329],{"class":315,"line":396},[313,2309,2310],{"class":1263},"createApp",[313,2312,2313],{"class":359},"(App)",[313,2315,1336],{"class":319},[313,2317,2318],{"class":1263},"mount",[313,2320,1306],{"class":359},[313,2322,2323],{"class":319},"'",[313,2325,2326],{"class":340},"#app",[313,2328,2323],{"class":319},[313,2330,1418],{"class":359},[303,2332,2337],{"className":2333,"code":2334,"filename":2335,"language":2336,"meta":309,"style":309},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\n  \"name\": \"my-first-scene\",\n  \"private\": true,\n  \"version\": \"0.0.0\",\n  \"type\": \"module\",\n  \"scripts\": {\n    \"dev\": \"vite\",\n    \"build\": \"vue-tsc && vite build\",\n    \"preview\": \"vite preview\"\n  },\n  \"dependencies\": {\n    \"@tresjs/core\": \"latest\",\n    \"three\": \"^0.158.0\",\n    \"vue\": \"^3.3.0\"\n  },\n  \"devDependencies\": {\n    \"@vitejs/plugin-vue\": \"^4.4.0\",\n    \"typescript\": \"^5.0.2\",\n    \"vite\": \"^4.4.5\",\n    \"vue-tsc\": \"^1.8.5\"\n  }\n}\n","package.json","json",[298,2338,2339,2343,2366,2380,2400,2420,2433,2455,2475,2493,2498,2511,2530,2550,2567,2571,2584,2604,2623,2642,2660,2664],{"__ignoreMap":309},[313,2340,2341],{"class":315,"line":316},[313,2342,1345],{"class":319},[313,2344,2345,2348,2351,2353,2355,2358,2361,2363],{"class":315,"line":349},[313,2346,2347],{"class":319},"  \"",[313,2349,2350],{"class":327},"name",[313,2352,337],{"class":319},[313,2354,1090],{"class":319},[313,2356,2357],{"class":319}," \"",[313,2359,2360],{"class":340},"my-first-scene",[313,2362,337],{"class":319},[313,2364,2365],{"class":319},",\n",[313,2367,2368,2370,2373,2375,2377],{"class":315,"line":378},[313,2369,2347],{"class":319},[313,2371,2372],{"class":327},"private",[313,2374,337],{"class":319},[313,2376,1090],{"class":319},[313,2378,2379],{"class":319}," true,\n",[313,2381,2382,2384,2387,2389,2391,2393,2396,2398],{"class":315,"line":396},[313,2383,2347],{"class":319},[313,2385,2386],{"class":327},"version",[313,2388,337],{"class":319},[313,2390,1090],{"class":319},[313,2392,2357],{"class":319},[313,2394,2395],{"class":340},"0.0.0",[313,2397,337],{"class":319},[313,2399,2365],{"class":319},[313,2401,2402,2404,2407,2409,2411,2413,2416,2418],{"class":315,"line":406},[313,2403,2347],{"class":319},[313,2405,2406],{"class":327},"type",[313,2408,337],{"class":319},[313,2410,1090],{"class":319},[313,2412,2357],{"class":319},[313,2414,2415],{"class":340},"module",[313,2417,337],{"class":319},[313,2419,2365],{"class":319},[313,2421,2422,2424,2427,2429,2431],{"class":315,"line":412},[313,2423,2347],{"class":319},[313,2425,2426],{"class":327},"scripts",[313,2428,337],{"class":319},[313,2430,1090],{"class":319},[313,2432,1322],{"class":319},[313,2434,2435,2438,2442,2444,2446,2448,2451,2453],{"class":315,"line":422},[313,2436,2437],{"class":319},"    \"",[313,2439,2441],{"class":2440},"sBMFI","dev",[313,2443,337],{"class":319},[313,2445,1090],{"class":319},[313,2447,2357],{"class":319},[313,2449,2450],{"class":340},"vite",[313,2452,337],{"class":319},[313,2454,2365],{"class":319},[313,2456,2457,2459,2462,2464,2466,2468,2471,2473],{"class":315,"line":431},[313,2458,2437],{"class":319},[313,2460,2461],{"class":2440},"build",[313,2463,337],{"class":319},[313,2465,1090],{"class":319},[313,2467,2357],{"class":319},[313,2469,2470],{"class":340},"vue-tsc && vite build",[313,2472,337],{"class":319},[313,2474,2365],{"class":319},[313,2476,2477,2479,2482,2484,2486,2488,2491],{"class":315,"line":447},[313,2478,2437],{"class":319},[313,2480,2481],{"class":2440},"preview",[313,2483,337],{"class":319},[313,2485,1090],{"class":319},[313,2487,2357],{"class":319},[313,2489,2490],{"class":340},"vite preview",[313,2492,444],{"class":319},[313,2494,2495],{"class":315,"line":453},[313,2496,2497],{"class":319},"  },\n",[313,2499,2500,2502,2505,2507,2509],{"class":315,"line":459},[313,2501,2347],{"class":319},[313,2503,2504],{"class":327},"dependencies",[313,2506,337],{"class":319},[313,2508,1090],{"class":319},[313,2510,1322],{"class":319},[313,2512,2513,2515,2517,2519,2521,2523,2526,2528],{"class":315,"line":471},[313,2514,2437],{"class":319},[313,2516,372],{"class":2440},[313,2518,337],{"class":319},[313,2520,1090],{"class":319},[313,2522,2357],{"class":319},[313,2524,2525],{"class":340},"latest",[313,2527,337],{"class":319},[313,2529,2365],{"class":319},[313,2531,2532,2534,2537,2539,2541,2543,2546,2548],{"class":315,"line":481},[313,2533,2437],{"class":319},[313,2535,2536],{"class":2440},"three",[313,2538,337],{"class":319},[313,2540,1090],{"class":319},[313,2542,2357],{"class":319},[313,2544,2545],{"class":340},"^0.158.0",[313,2547,337],{"class":319},[313,2549,2365],{"class":319},[313,2551,2552,2554,2556,2558,2560,2562,2565],{"class":315,"line":781},[313,2553,2437],{"class":319},[313,2555,308],{"class":2440},[313,2557,337],{"class":319},[313,2559,1090],{"class":319},[313,2561,2357],{"class":319},[313,2563,2564],{"class":340},"^3.3.0",[313,2566,444],{"class":319},[313,2568,2569],{"class":315,"line":791},[313,2570,2497],{"class":319},[313,2572,2573,2575,2578,2580,2582],{"class":315,"line":1031},[313,2574,2347],{"class":319},[313,2576,2577],{"class":327},"devDependencies",[313,2579,337],{"class":319},[313,2581,1090],{"class":319},[313,2583,1322],{"class":319},[313,2585,2586,2588,2591,2593,2595,2597,2600,2602],{"class":315,"line":1040},[313,2587,2437],{"class":319},[313,2589,2590],{"class":2440},"@vitejs/plugin-vue",[313,2592,337],{"class":319},[313,2594,1090],{"class":319},[313,2596,2357],{"class":319},[313,2598,2599],{"class":340},"^4.4.0",[313,2601,337],{"class":319},[313,2603,2365],{"class":319},[313,2605,2606,2608,2610,2612,2614,2616,2619,2621],{"class":315,"line":1045},[313,2607,2437],{"class":319},[313,2609,1626],{"class":2440},[313,2611,337],{"class":319},[313,2613,1090],{"class":319},[313,2615,2357],{"class":319},[313,2617,2618],{"class":340},"^5.0.2",[313,2620,337],{"class":319},[313,2622,2365],{"class":319},[313,2624,2625,2627,2629,2631,2633,2635,2638,2640],{"class":315,"line":1050},[313,2626,2437],{"class":319},[313,2628,2450],{"class":2440},[313,2630,337],{"class":319},[313,2632,1090],{"class":319},[313,2634,2357],{"class":319},[313,2636,2637],{"class":340},"^4.4.5",[313,2639,337],{"class":319},[313,2641,2365],{"class":319},[313,2643,2644,2646,2649,2651,2653,2655,2658],{"class":315,"line":1059},[313,2645,2437],{"class":319},[313,2647,2648],{"class":2440},"vue-tsc",[313,2650,337],{"class":319},[313,2652,1090],{"class":319},[313,2654,2357],{"class":319},[313,2656,2657],{"class":340},"^1.8.5",[313,2659,444],{"class":319},[313,2661,2662],{"class":315,"line":1068},[313,2663,1411],{"class":319},[313,2665,2666],{"class":315,"line":1445},[313,2667,2668],{"class":319},"}\n",[303,2670,2673],{"className":1624,"code":2671,"filename":2672,"language":1626,"meta":309,"style":309},"import { templateCompilerOptions } from '@tresjs/core'\nimport { defineConfig } from 'vite'\nimport vue from '@vitejs/plugin-vue'\n\nexport default defineConfig({\n  plugins: [\n    vue({\n      // Other config\n      ...templateCompilerOptions\n    }),\n  ],\n})\n","vite.config.ts",[298,2674,2675,2694,2713,2728,2732,2746,2756,2765,2770,2778,2788,2795],{"__ignoreMap":309},[313,2676,2677,2679,2681,2684,2686,2688,2690,2692],{"class":315,"line":316},[313,2678,353],{"class":352},[313,2680,356],{"class":319},[313,2682,2683],{"class":359}," templateCompilerOptions",[313,2685,363],{"class":319},[313,2687,366],{"class":352},[313,2689,369],{"class":319},[313,2691,372],{"class":340},[313,2693,375],{"class":319},[313,2695,2696,2698,2700,2703,2705,2707,2709,2711],{"class":315,"line":349},[313,2697,353],{"class":352},[313,2699,356],{"class":319},[313,2701,2702],{"class":359}," defineConfig",[313,2704,363],{"class":319},[313,2706,366],{"class":352},[313,2708,369],{"class":319},[313,2710,2450],{"class":340},[313,2712,375],{"class":319},[313,2714,2715,2717,2720,2722,2724,2726],{"class":315,"line":378},[313,2716,353],{"class":352},[313,2718,2719],{"class":359}," vue ",[313,2721,386],{"class":352},[313,2723,369],{"class":319},[313,2725,2590],{"class":340},[313,2727,375],{"class":319},[313,2729,2730],{"class":315,"line":396},[313,2731,409],{"emptyLinePlaceholder":39},[313,2733,2734,2737,2740,2742,2744],{"class":315,"line":406},[313,2735,2736],{"class":352},"export",[313,2738,2739],{"class":352}," default",[313,2741,2702],{"class":1263},[313,2743,1306],{"class":359},[313,2745,1345],{"class":319},[313,2747,2748,2751,2753],{"class":315,"line":412},[313,2749,2750],{"class":323},"  plugins",[313,2752,1090],{"class":319},[313,2754,2755],{"class":359}," [\n",[313,2757,2758,2761,2763],{"class":315,"line":422},[313,2759,2760],{"class":1263},"    vue",[313,2762,1306],{"class":359},[313,2764,1345],{"class":319},[313,2766,2767],{"class":315,"line":431},[313,2768,2769],{"class":555},"      // Other config\n",[313,2771,2772,2775],{"class":315,"line":447},[313,2773,2774],{"class":319},"      ...",[313,2776,2777],{"class":359},"templateCompilerOptions\n",[313,2779,2780,2783,2786],{"class":315,"line":453},[313,2781,2782],{"class":319},"    }",[313,2784,2785],{"class":359},")",[313,2787,2365],{"class":319},[313,2789,2790,2793],{"class":315,"line":459},[313,2791,2792],{"class":359},"  ]",[313,2794,2365],{"class":319},[313,2796,2797,2799],{"class":315,"line":471},[313,2798,1287],{"class":319},[313,2800,1418],{"class":359},[262,2802,2804],{"id":2803},"key-concepts-learned","Key Concepts Learned",[2806,2807,2808,2819,2827,2836],"card-group",{},[2809,2810,2813],"card",{"icon":2811,"title":2812},"i-lucide-layers","Component Separation",[267,2814,2815,2816,2818],{},"Separating ",[298,2817,300],{}," from your 3D experience improves code organization and reusability.",[2809,2820,2822],{"icon":21,"title":2821},"Objects and Materials",[267,2823,2824,2825,870],{},"In TresJS, 3D objects are created using a ",[298,2826,869],{},[2809,2828,2831],{"icon":2829,"title":2830},"i-lucide-rotate-cw","Animation Loop",[267,2832,1731,2833,2835],{},[298,2834,124],{}," provides a clean way to handle animations and updates in your 3D scene.",[2809,2837,2840],{"icon":2838,"title":2839},"i-lucide-link","Template Refs",[267,2841,2842],{},"Using Vue's template refs allows you to directly manipulate 3D objects in your animations.",[262,2844,2846],{"id":2845},"next-steps","Next Steps",[267,2848,2849],{},"Now that you have your first scene running, you can:",[271,2851,2852,2862,2865,2881,2884],{},[274,2853,2854,2857,2858,2861],{},[518,2855,2856],{},"Extract the donut into its own component"," - Create a ",[298,2859,2860],{},"TheDonut.vue"," component to practice component composition",[274,2863,2864],{},"Experiment with different geometries and materials",[274,2866,2867,2868,2875,2876,2785],{},"Add more objects to your scene (Get inspired by Three.js's ",[2869,2870,2874],"a",{"href":2871,"rel":2872},"https://threejs.org/manual/#en/primitives",[2873],"nofollow","Geometries"," and ",[2869,2877,2880],{"href":2878,"rel":2879},"https://threejs.org/manual/#en/materials",[2873],"Materials",[274,2882,2883],{},"Try different camera positions and angles",[274,2885,2886],{},"Explore more complex animations",[513,2888,2889],{},[267,2890,2891,2892,2894],{},"Check out our ",[2869,2893,191],{"href":192}," section to see more complex scenes and learn advanced techniques!",[2896,2897,2899],"callout",{"icon":2898},"i-lucide-grid-3x3",[267,2900,2901,2904],{},[518,2902,2903],{},"Related Examples Placeholder",": Add a component here showing cards with related examples like \"Basic Primitives\", \"Lighting Setup\", \"Animation Patterns\", etc.",[2906,2907,2908],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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 .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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":309,"searchDepth":316,"depth":349,"links":2910},[2911,2912,2913,2914],{"id":264,"depth":349,"text":265},{"id":1750,"depth":349,"text":1751},{"id":2803,"depth":349,"text":2804},{"id":2845,"depth":349,"text":2846},"Learn how to create your first 3D scene with TresJS with this step-by-step guide.","md",null,{},{"icon":21},{"title":18,"description":2915},"MLsKTneI4rjdebKgmOmAOHzUG7IS9WMOOnhG8Xv7Qw4",[2923,2925],{"title":13,"path":14,"stem":15,"description":2924,"icon":16,"children":-1},"Get started with TresJS.",{"title":23,"path":24,"stem":25,"description":2926,"icon":26,"children":-1},"Upgrade TresJS to the latest version.",1785417168950]