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