[{"data":1,"prerenderedAt":2910},["ShallowReactive",2],{"navigation":3,"/getting-started/your-first-scene":239,"/getting-started/your-first-scene-surround":2905},[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":2898,"extension":2899,"links":2900,"meta":2901,"navigation":2902,"path":19,"seo":2903,"stem":20,"__hash__":2904},"docs/1.getting-started/3.your-first-scene.md",{"type":242,"value":243,"toc":2892},"minimark",[244,249,253,266,269,1731,1735,1738,2784,2788,2826,2830,2833,2870,2878,2888],[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,613,622,633,636,650,654,657,781,786,791,835,843,847,854,1058,1063,1067,1074,1095,1100,1137,1142,1152,1156,1162,1560,1565,1569,1572,1605,1710,1718,1722],"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,586,600,605],{"__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,579,581,584],{"class":298,"line":414},[296,575,576],{"class":310},"    :position",[296,578,317],{"class":302},[296,580,320],{"class":302},[296,582,583],{"class":323},"[7, 7, 7]",[296,585,427],{"class":302},[296,587,588,591,593,595,598],{"class":298,"line":430},[296,589,590],{"class":310},"    :look-at",[296,592,317],{"class":302},[296,594,320],{"class":302},[296,596,597],{"class":323},"[0, 0, 0]",[296,599,427],{"class":302},[296,601,602],{"class":298,"line":436},[296,603,604],{"class":302},"  />\n",[296,606,607,609,611],{"class":298,"line":442},[296,608,382],{"class":302},[296,610,400],{"class":306},[296,612,329],{"class":302},[250,614,615,618,619,621],{},[501,616,617],{},"What you should see",": A solid turquoise background (",[281,620,424],{},") filling your entire window.",[472,623,624],{},[250,625,626,629,630,632],{},[501,627,628],{},"Common Mistake",": A common mistake is not setting the camera position, which defaults to ",[281,631,597],{}," (the center of the scene). Always position your camera away from the origin to have a proper viewpoint of your 3D objects.",[250,634,635],{},"The camera defines the viewpoint of your scene:",[254,637,638,644],{},[257,639,640,643],{},[281,641,642],{},"position=\"[7, 7, 7]\""," places the camera at coordinates X=7, Y=7, Z=7 in 3D space",[257,645,646,649],{},[281,647,648],{},"look-at=\"[0, 0, 0]\""," points the camera toward the center of the scene",[245,651,653],{"id":652},"step-3-add-visual-helpers","Step 3: Add Visual Helpers",[250,655,656],{},"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,658,660],{"className":288,"code":659,"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,661,662,682,686,694,698,706,710,716,728,740,744,748,753,762,772],{"__ignoreMap":292},[296,663,664,666,668,670,672,674,676,678,680],{"class":298,"line":299},[296,665,303],{"class":302},[296,667,307],{"class":306},[296,669,311],{"class":310},[296,671,314],{"class":310},[296,673,317],{"class":302},[296,675,320],{"class":302},[296,677,324],{"class":323},[296,679,320],{"class":302},[296,681,329],{"class":302},[296,683,684],{"class":298,"line":332},[296,685,539],{"class":538},[296,687,688,690,692],{"class":298,"line":361},[296,689,382],{"class":302},[296,691,307],{"class":306},[296,693,329],{"class":302},[296,695,696],{"class":298,"line":379},[296,697,392],{"emptyLinePlaceholder":39},[296,699,700,702,704],{"class":298,"line":389},[296,701,303],{"class":302},[296,703,400],{"class":306},[296,705,329],{"class":302},[296,707,708],{"class":298,"line":395},[296,709,564],{"class":538},[296,711,712,714],{"class":298,"line":405},[296,713,408],{"class":302},[296,715,571],{"class":306},[296,717,718,720,722,724,726],{"class":298,"line":414},[296,719,576],{"class":310},[296,721,317],{"class":302},[296,723,320],{"class":302},[296,725,583],{"class":323},[296,727,427],{"class":302},[296,729,730,732,734,736,738],{"class":298,"line":430},[296,731,590],{"class":310},[296,733,317],{"class":302},[296,735,320],{"class":302},[296,737,597],{"class":323},[296,739,427],{"class":302},[296,741,742],{"class":298,"line":436},[296,743,604],{"class":302},[296,745,746],{"class":298,"line":442},[296,747,392],{"emptyLinePlaceholder":39},[296,749,750],{"class":298,"line":454},[296,751,752],{"class":538},"  \u003C!-- Visual Helpers -->\n",[296,754,755,757,760],{"class":298,"line":464},[296,756,408],{"class":302},[296,758,759],{"class":306},"TresAxesHelper",[296,761,451],{"class":302},[296,763,765,767,770],{"class":298,"line":764},14,[296,766,408],{"class":302},[296,768,769],{"class":306},"TresGridHelper",[296,771,451],{"class":302},[296,773,775,777,779],{"class":298,"line":774},15,[296,776,382],{"class":302},[296,778,400],{"class":306},[296,780,329],{"class":302},[250,782,783,785],{},[501,784,617],{},": A turquoise background with red, green, and blue arrows showing the X, Y, Z axes, plus a grid on the ground plane.",[787,788,790],"h3",{"id":789},"understanding-the-helpers","Understanding the Helpers",[254,792,793,820],{},[257,794,795,799,800],{},[501,796,797],{},[281,798,759],{},": Shows the coordinate system with colored arrows",[254,801,802,808,814],{},[257,803,804,807],{},[501,805,806],{},"Red arrow",": X-axis (left/right)",[257,809,810,813],{},[501,811,812],{},"Green arrow",": Y-axis (up/down)",[257,815,816,819],{},[501,817,818],{},"Blue arrow",": Z-axis (forward/backward)",[257,821,822,826,827],{},[501,823,824],{},[281,825,769],{},": Shows a grid on the XZ plane (ground)",[254,828,829,832],{},[257,830,831],{},"Helps visualize object positioning and scale",[257,833,834],{},"The grid center is at the origin (0, 0, 0)",[496,836,837],{},[250,838,839,842],{},[501,840,841],{},"Development Tip",": These helpers are invaluable for development and debugging. Remove them when your scene is ready for production!",[245,844,846],{"id":845},"step-4-add-the-donut","Step 4: Add the Donut",[250,848,849,850,853],{},"Now let's add our 3D donut to the scene. In TresJS, 3D objects are created using a ",[281,851,852],{},"TresMesh"," component with geometry and material as children.",[286,855,857],{"className":288,"code":856,"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,858,859,879,883,891,895,903,907,913,925,937,941,945,950,970,991,1012,1021,1026,1031,1040,1049],{"__ignoreMap":292},[296,860,861,863,865,867,869,871,873,875,877],{"class":298,"line":299},[296,862,303],{"class":302},[296,864,307],{"class":306},[296,866,311],{"class":310},[296,868,314],{"class":310},[296,870,317],{"class":302},[296,872,320],{"class":302},[296,874,324],{"class":323},[296,876,320],{"class":302},[296,878,329],{"class":302},[296,880,881],{"class":298,"line":332},[296,882,539],{"class":538},[296,884,885,887,889],{"class":298,"line":361},[296,886,382],{"class":302},[296,888,307],{"class":306},[296,890,329],{"class":302},[296,892,893],{"class":298,"line":379},[296,894,392],{"emptyLinePlaceholder":39},[296,896,897,899,901],{"class":298,"line":389},[296,898,303],{"class":302},[296,900,400],{"class":306},[296,902,329],{"class":302},[296,904,905],{"class":298,"line":395},[296,906,564],{"class":538},[296,908,909,911],{"class":298,"line":405},[296,910,408],{"class":302},[296,912,571],{"class":306},[296,914,915,917,919,921,923],{"class":298,"line":414},[296,916,576],{"class":310},[296,918,317],{"class":302},[296,920,320],{"class":302},[296,922,583],{"class":323},[296,924,427],{"class":302},[296,926,927,929,931,933,935],{"class":298,"line":430},[296,928,590],{"class":310},[296,930,317],{"class":302},[296,932,320],{"class":302},[296,934,597],{"class":323},[296,936,427],{"class":302},[296,938,939],{"class":298,"line":436},[296,940,604],{"class":302},[296,942,943],{"class":298,"line":442},[296,944,392],{"emptyLinePlaceholder":39},[296,946,947],{"class":298,"line":454},[296,948,949],{"class":538},"  \u003C!-- The Donut -->\n",[296,951,952,954,956,959,961,963,966,968],{"class":298,"line":464},[296,953,408],{"class":302},[296,955,852],{"class":306},[296,957,958],{"class":310}," :position",[296,960,317],{"class":302},[296,962,320],{"class":302},[296,964,965],{"class":323},"[0, 2, 0]",[296,967,320],{"class":302},[296,969,329],{"class":302},[296,971,972,974,977,980,982,984,987,989],{"class":298,"line":764},[296,973,445],{"class":302},[296,975,976],{"class":306},"TresTorusGeometry",[296,978,979],{"class":310}," :args",[296,981,317],{"class":302},[296,983,320],{"class":302},[296,985,986],{"class":323},"[1, 0.4, 16, 32]",[296,988,320],{"class":302},[296,990,451],{"class":302},[296,992,993,995,998,1001,1003,1005,1008,1010],{"class":298,"line":774},[296,994,445],{"class":302},[296,996,997],{"class":306},"TresMeshBasicMaterial",[296,999,1000],{"class":310}," color",[296,1002,317],{"class":302},[296,1004,320],{"class":302},[296,1006,1007],{"class":323},"#ff6b35",[296,1009,320],{"class":302},[296,1011,451],{"class":302},[296,1013,1015,1017,1019],{"class":298,"line":1014},16,[296,1016,457],{"class":302},[296,1018,852],{"class":306},[296,1020,329],{"class":302},[296,1022,1024],{"class":298,"line":1023},17,[296,1025,392],{"emptyLinePlaceholder":39},[296,1027,1029],{"class":298,"line":1028},18,[296,1030,752],{"class":538},[296,1032,1034,1036,1038],{"class":298,"line":1033},19,[296,1035,408],{"class":302},[296,1037,759],{"class":306},[296,1039,451],{"class":302},[296,1041,1043,1045,1047],{"class":298,"line":1042},20,[296,1044,408],{"class":302},[296,1046,769],{"class":306},[296,1048,451],{"class":302},[296,1050,1052,1054,1056],{"class":298,"line":1051},21,[296,1053,382],{"class":302},[296,1055,400],{"class":306},[296,1057,329],{"class":302},[250,1059,1060,1062],{},[501,1061,617],{},": A bright orange donut shape in the center of your scene!",[787,1064,1066],{"id":1065},"understanding-the-mesh-structure","Understanding the Mesh Structure",[250,1068,1069,1070,1073],{},"In TresJS, 3D objects follow a ",[501,1071,1072],{},"slot-based pattern",":",[254,1075,1076,1081,1088],{},[257,1077,1078,1080],{},[281,1079,852],{}," is the container that represents a 3D object",[257,1082,1083,1084,1087],{},"The first child defines the ",[501,1085,1086],{},"geometry"," (shape)",[257,1089,1090,1091,1094],{},"The second child defines the ",[501,1092,1093],{},"material"," (appearance)",[250,1096,1097],{},[501,1098,1099],{},"Geometry Parameters:",[254,1101,1102],{},[257,1103,1104,1106,1107,1110,1111],{},[281,1105,976],{}," creates the donut shape with an array of parameters ",[281,1108,1109],{},"[radius, tube, radialSegments, tubularSegments]",":\n",[254,1112,1113,1119,1125,1131],{},[257,1114,1115,1118],{},[281,1116,1117],{},"radius: 1"," - Overall size of the donut",[257,1120,1121,1124],{},[281,1122,1123],{},"tube: 0.4"," - Thickness of the donut tube",[257,1126,1127,1130],{},[281,1128,1129],{},"radialSegments: 16"," - How smooth the donut curve is",[257,1132,1133,1136],{},[281,1134,1135],{},"tubularSegments: 32"," - How smooth the tube surface is",[250,1138,1139],{},[501,1140,1141],{},"Material Types:",[254,1143,1144,1149],{},[257,1145,1146,1148],{},[281,1147,997],{}," - Simple material that doesn't require lighting",[257,1150,1151],{},"Perfect for beginners and solid colors",[245,1153,1155],{"id":1154},"step-5-add-animation","Step 5: Add Animation",[250,1157,1158,1159,1161],{},"Finally, let's make our donut rotate! We'll use TresJS's ",[281,1160,120],{}," composable to create smooth animations.",[286,1163,1165],{"className":288,"code":1164,"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,1166,1167,1187,1206,1225,1229,1234,1250,1254,1259,1278,1282,1306,1329,1334,1364,1390,1395,1402,1410,1414,1422,1426,1433,1447,1460,1465,1470,1475,1504,1523,1542,1551],{"__ignoreMap":292},[296,1168,1169,1171,1173,1175,1177,1179,1181,1183,1185],{"class":298,"line":299},[296,1170,303],{"class":302},[296,1172,307],{"class":306},[296,1174,311],{"class":310},[296,1176,314],{"class":310},[296,1178,317],{"class":302},[296,1180,320],{"class":302},[296,1182,324],{"class":323},[296,1184,320],{"class":302},[296,1186,329],{"class":302},[296,1188,1189,1191,1193,1196,1198,1200,1202,1204],{"class":298,"line":332},[296,1190,336],{"class":335},[296,1192,339],{"class":302},[296,1194,1195],{"class":342}," useLoop",[296,1197,346],{"class":302},[296,1199,349],{"class":335},[296,1201,352],{"class":302},[296,1203,355],{"class":323},[296,1205,358],{"class":302},[296,1207,1208,1210,1212,1215,1217,1219,1221,1223],{"class":298,"line":361},[296,1209,336],{"class":335},[296,1211,339],{"class":302},[296,1213,1214],{"class":342}," ref",[296,1216,346],{"class":302},[296,1218,349],{"class":335},[296,1220,352],{"class":302},[296,1222,291],{"class":323},[296,1224,358],{"class":302},[296,1226,1227],{"class":298,"line":379},[296,1228,392],{"emptyLinePlaceholder":39},[296,1230,1231],{"class":298,"line":389},[296,1232,1233],{"class":538},"// Reference to our donut mesh for animation\n",[296,1235,1236,1239,1242,1244,1247],{"class":298,"line":395},[296,1237,1238],{"class":310},"const",[296,1240,1241],{"class":342}," donutRef ",[296,1243,317],{"class":302},[296,1245,1214],{"class":1246},"s2Zo4",[296,1248,1249],{"class":342},"()\n",[296,1251,1252],{"class":298,"line":405},[296,1253,392],{"emptyLinePlaceholder":39},[296,1255,1256],{"class":298,"line":414},[296,1257,1258],{"class":538},"// Animation loop\n",[296,1260,1261,1263,1265,1268,1271,1274,1276],{"class":298,"line":430},[296,1262,1238],{"class":310},[296,1264,339],{"class":302},[296,1266,1267],{"class":342}," onBeforeRender ",[296,1269,1270],{"class":302},"}",[296,1272,1273],{"class":302}," =",[296,1275,1195],{"class":1246},[296,1277,1249],{"class":342},[296,1279,1280],{"class":298,"line":436},[296,1281,392],{"emptyLinePlaceholder":39},[296,1283,1284,1287,1290,1293,1297,1300,1303],{"class":298,"line":442},[296,1285,1286],{"class":1246},"onBeforeRender",[296,1288,1289],{"class":342},"(",[296,1291,1292],{"class":302},"({",[296,1294,1296],{"class":1295},"sHdIc"," elapsed",[296,1298,1299],{"class":302}," })",[296,1301,1302],{"class":310}," =>",[296,1304,1305],{"class":302}," {\n",[296,1307,1308,1311,1314,1317,1320,1323,1326],{"class":298,"line":454},[296,1309,1310],{"class":335},"  if",[296,1312,1313],{"class":306}," (",[296,1315,1316],{"class":342},"donutRef",[296,1318,1319],{"class":302},".",[296,1321,1322],{"class":342},"value",[296,1324,1325],{"class":306},") ",[296,1327,1328],{"class":302},"{\n",[296,1330,1331],{"class":298,"line":464},[296,1332,1333],{"class":538},"    // Rotate the donut on both X and Y axes\n",[296,1335,1336,1339,1341,1343,1345,1348,1350,1353,1355,1357,1360],{"class":298,"line":764},[296,1337,1338],{"class":342},"    donutRef",[296,1340,1319],{"class":302},[296,1342,1322],{"class":342},[296,1344,1319],{"class":302},[296,1346,1347],{"class":342},"rotation",[296,1349,1319],{"class":302},[296,1351,1352],{"class":342},"x",[296,1354,1273],{"class":302},[296,1356,1296],{"class":342},[296,1358,1359],{"class":302}," *",[296,1361,1363],{"class":1362},"sbssI"," 0.5\n",[296,1365,1366,1368,1370,1372,1374,1376,1378,1381,1383,1385,1387],{"class":298,"line":774},[296,1367,1338],{"class":342},[296,1369,1319],{"class":302},[296,1371,1322],{"class":342},[296,1373,1319],{"class":302},[296,1375,1347],{"class":342},[296,1377,1319],{"class":302},[296,1379,1380],{"class":342},"y",[296,1382,1273],{"class":302},[296,1384,1296],{"class":342},[296,1386,1359],{"class":302},[296,1388,1389],{"class":1362}," 0.3\n",[296,1391,1392],{"class":298,"line":1014},[296,1393,1394],{"class":302},"  }\n",[296,1396,1397,1399],{"class":298,"line":1023},[296,1398,1270],{"class":302},[296,1400,1401],{"class":342},")\n",[296,1403,1404,1406,1408],{"class":298,"line":1028},[296,1405,382],{"class":302},[296,1407,307],{"class":306},[296,1409,329],{"class":302},[296,1411,1412],{"class":298,"line":1033},[296,1413,392],{"emptyLinePlaceholder":39},[296,1415,1416,1418,1420],{"class":298,"line":1042},[296,1417,303],{"class":302},[296,1419,400],{"class":306},[296,1421,329],{"class":302},[296,1423,1424],{"class":298,"line":1051},[296,1425,564],{"class":538},[296,1427,1429,1431],{"class":298,"line":1428},22,[296,1430,408],{"class":302},[296,1432,571],{"class":306},[296,1434,1436,1438,1440,1442,1445],{"class":298,"line":1435},23,[296,1437,576],{"class":310},[296,1439,317],{"class":302},[296,1441,320],{"class":302},[296,1443,1444],{"class":323},"[4, 4, 4]",[296,1446,427],{"class":302},[296,1448,1450,1452,1454,1456,1458],{"class":298,"line":1449},24,[296,1451,590],{"class":310},[296,1453,317],{"class":302},[296,1455,320],{"class":302},[296,1457,597],{"class":323},[296,1459,427],{"class":302},[296,1461,1463],{"class":298,"line":1462},25,[296,1464,604],{"class":302},[296,1466,1468],{"class":298,"line":1467},26,[296,1469,392],{"emptyLinePlaceholder":39},[296,1471,1473],{"class":298,"line":1472},27,[296,1474,949],{"class":538},[296,1476,1478,1480,1482,1484,1486,1488,1490,1492,1494,1496,1498,1500,1502],{"class":298,"line":1477},28,[296,1479,408],{"class":302},[296,1481,852],{"class":306},[296,1483,1214],{"class":310},[296,1485,317],{"class":302},[296,1487,320],{"class":302},[296,1489,1316],{"class":323},[296,1491,320],{"class":302},[296,1493,958],{"class":310},[296,1495,317],{"class":302},[296,1497,320],{"class":302},[296,1499,965],{"class":323},[296,1501,320],{"class":302},[296,1503,329],{"class":302},[296,1505,1507,1509,1511,1513,1515,1517,1519,1521],{"class":298,"line":1506},29,[296,1508,445],{"class":302},[296,1510,976],{"class":306},[296,1512,979],{"class":310},[296,1514,317],{"class":302},[296,1516,320],{"class":302},[296,1518,986],{"class":323},[296,1520,320],{"class":302},[296,1522,451],{"class":302},[296,1524,1526,1528,1530,1532,1534,1536,1538,1540],{"class":298,"line":1525},30,[296,1527,445],{"class":302},[296,1529,997],{"class":306},[296,1531,1000],{"class":310},[296,1533,317],{"class":302},[296,1535,320],{"class":302},[296,1537,1007],{"class":323},[296,1539,320],{"class":302},[296,1541,451],{"class":302},[296,1543,1545,1547,1549],{"class":298,"line":1544},31,[296,1546,457],{"class":302},[296,1548,852],{"class":306},[296,1550,329],{"class":302},[296,1552,1554,1556,1558],{"class":298,"line":1553},32,[296,1555,382],{"class":302},[296,1557,400],{"class":306},[296,1559,329],{"class":302},[250,1561,1562,1564],{},[501,1563,617],{},": Your donut now rotates smoothly on both the X and Y axes!",[787,1566,1568],{"id":1567},"understanding-animation","Understanding Animation",[250,1570,1571],{},"The animation (system) consists of:",[1573,1574,1575,1585,1591,1596],"ol",{},[257,1576,1577,1580,1581,1584],{},[501,1578,1579],{},"Template Ref",": ",[281,1582,1583],{},"ref=\"donutRef\""," creates a reference to the mesh object",[257,1586,1587,1590],{},[501,1588,1589],{},"useLoop Hook",": Provides access to the render loop",[257,1592,1593,1595],{},[501,1594,1286],{},": Runs before each frame is rendered",[257,1597,1598,1580,1601,1604],{},[501,1599,1600],{},"Elapsed Time",[281,1602,1603],{},"elapsed"," parameter gives us the total time since animation started",[286,1606,1610],{"className":1607,"code":1608,"language":1609,"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,1611,1612,1628,1644,1672,1700,1704],{"__ignoreMap":292},[296,1613,1614,1616,1618,1620,1622,1624,1626],{"class":298,"line":299},[296,1615,1286],{"class":1246},[296,1617,1289],{"class":342},[296,1619,1292],{"class":302},[296,1621,1296],{"class":1295},[296,1623,1299],{"class":302},[296,1625,1302],{"class":310},[296,1627,1305],{"class":302},[296,1629,1630,1632,1634,1636,1638,1640,1642],{"class":298,"line":332},[296,1631,1310],{"class":335},[296,1633,1313],{"class":306},[296,1635,1316],{"class":342},[296,1637,1319],{"class":302},[296,1639,1322],{"class":342},[296,1641,1325],{"class":306},[296,1643,1328],{"class":302},[296,1645,1646,1648,1650,1652,1654,1656,1658,1660,1662,1664,1666,1669],{"class":298,"line":361},[296,1647,1338],{"class":342},[296,1649,1319],{"class":302},[296,1651,1322],{"class":342},[296,1653,1319],{"class":302},[296,1655,1347],{"class":342},[296,1657,1319],{"class":302},[296,1659,1352],{"class":342},[296,1661,1273],{"class":302},[296,1663,1296],{"class":342},[296,1665,1359],{"class":302},[296,1667,1668],{"class":1362}," 0.5",[296,1670,1671],{"class":538}," // Rotates on X-axis\n",[296,1673,1674,1676,1678,1680,1682,1684,1686,1688,1690,1692,1694,1697],{"class":298,"line":379},[296,1675,1338],{"class":342},[296,1677,1319],{"class":302},[296,1679,1322],{"class":342},[296,1681,1319],{"class":302},[296,1683,1347],{"class":342},[296,1685,1319],{"class":302},[296,1687,1380],{"class":342},[296,1689,1273],{"class":302},[296,1691,1296],{"class":342},[296,1693,1359],{"class":302},[296,1695,1696],{"class":1362}," 0.3",[296,1698,1699],{"class":538}," // Rotates on Y-axis (different speed)\n",[296,1701,1702],{"class":298,"line":389},[296,1703,1394],{"class":302},[296,1705,1706,1708],{"class":298,"line":395},[296,1707,1270],{"class":302},[296,1709,1401],{"class":342},[472,1711,1712],{},[250,1713,1714,1715,1717],{},"Using ",[281,1716,1603],{}," 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,1719,1721],{"id":1720},"step-6-running-your-scene","Step 6: Running Your Scene",[250,1723,1724,1725,1727,1728,1730],{},"Your scene is now complete! Since we've set up everything in ",[281,1726,290],{},", your 3D scene will automatically render when you start your application. The ",[281,1729,486],{}," prop ensures the canvas fills the entire viewport automatically.",[245,1732,1734],{"id":1733},"final-project-structure","Final Project Structure",[250,1736,1737],{},"Here's the complete file structure and code for your first TresJS scene:",[1739,1740,1741,1867,2244,2314,2652],"code-tree",{"default-value":511},[286,1742,1743],{"className":288,"code":289,"filename":290,"language":291,"meta":292,"style":292},[281,1744,1745,1765,1783,1797,1805,1809,1817,1823,1835,1839,1843,1851,1859],{"__ignoreMap":292},[296,1746,1747,1749,1751,1753,1755,1757,1759,1761,1763],{"class":298,"line":299},[296,1748,303],{"class":302},[296,1750,307],{"class":306},[296,1752,311],{"class":310},[296,1754,314],{"class":310},[296,1756,317],{"class":302},[296,1758,320],{"class":302},[296,1760,324],{"class":323},[296,1762,320],{"class":302},[296,1764,329],{"class":302},[296,1766,1767,1769,1771,1773,1775,1777,1779,1781],{"class":298,"line":332},[296,1768,336],{"class":335},[296,1770,339],{"class":302},[296,1772,343],{"class":342},[296,1774,346],{"class":302},[296,1776,349],{"class":335},[296,1778,352],{"class":302},[296,1780,355],{"class":323},[296,1782,358],{"class":302},[296,1784,1785,1787,1789,1791,1793,1795],{"class":298,"line":361},[296,1786,336],{"class":335},[296,1788,366],{"class":342},[296,1790,369],{"class":335},[296,1792,352],{"class":302},[296,1794,374],{"class":323},[296,1796,358],{"class":302},[296,1798,1799,1801,1803],{"class":298,"line":379},[296,1800,382],{"class":302},[296,1802,307],{"class":306},[296,1804,329],{"class":302},[296,1806,1807],{"class":298,"line":389},[296,1808,392],{"emptyLinePlaceholder":39},[296,1810,1811,1813,1815],{"class":298,"line":395},[296,1812,303],{"class":302},[296,1814,400],{"class":306},[296,1816,329],{"class":302},[296,1818,1819,1821],{"class":298,"line":405},[296,1820,408],{"class":302},[296,1822,411],{"class":306},[296,1824,1825,1827,1829,1831,1833],{"class":298,"line":414},[296,1826,417],{"class":310},[296,1828,317],{"class":302},[296,1830,320],{"class":302},[296,1832,424],{"class":323},[296,1834,427],{"class":302},[296,1836,1837],{"class":298,"line":430},[296,1838,433],{"class":310},[296,1840,1841],{"class":298,"line":436},[296,1842,439],{"class":302},[296,1844,1845,1847,1849],{"class":298,"line":442},[296,1846,445],{"class":302},[296,1848,448],{"class":306},[296,1850,451],{"class":302},[296,1852,1853,1855,1857],{"class":298,"line":454},[296,1854,457],{"class":302},[296,1856,283],{"class":306},[296,1858,329],{"class":302},[296,1860,1861,1863,1865],{"class":298,"line":464},[296,1862,382],{"class":302},[296,1864,400],{"class":306},[296,1866,329],{"class":302},[286,1868,1870],{"className":288,"code":1869,"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,1871,1872,1892,1910,1928,1932,1936,1948,1952,1956,1972,1976,1992,2008,2012,2036,2060,2064,2070,2078,2082,2090,2094,2100,2112,2124,2128,2132,2136,2164,2182,2200,2208,2212,2217,2226,2235],{"__ignoreMap":292},[296,1873,1874,1876,1878,1880,1882,1884,1886,1888,1890],{"class":298,"line":299},[296,1875,303],{"class":302},[296,1877,307],{"class":306},[296,1879,311],{"class":310},[296,1881,314],{"class":310},[296,1883,317],{"class":302},[296,1885,320],{"class":302},[296,1887,324],{"class":323},[296,1889,320],{"class":302},[296,1891,329],{"class":302},[296,1893,1894,1896,1898,1900,1902,1904,1906,1908],{"class":298,"line":332},[296,1895,336],{"class":335},[296,1897,339],{"class":302},[296,1899,1195],{"class":342},[296,1901,346],{"class":302},[296,1903,349],{"class":335},[296,1905,352],{"class":302},[296,1907,355],{"class":323},[296,1909,358],{"class":302},[296,1911,1912,1914,1916,1918,1920,1922,1924,1926],{"class":298,"line":361},[296,1913,336],{"class":335},[296,1915,339],{"class":302},[296,1917,1214],{"class":342},[296,1919,346],{"class":302},[296,1921,349],{"class":335},[296,1923,352],{"class":302},[296,1925,291],{"class":323},[296,1927,358],{"class":302},[296,1929,1930],{"class":298,"line":379},[296,1931,392],{"emptyLinePlaceholder":39},[296,1933,1934],{"class":298,"line":389},[296,1935,1233],{"class":538},[296,1937,1938,1940,1942,1944,1946],{"class":298,"line":395},[296,1939,1238],{"class":310},[296,1941,1241],{"class":342},[296,1943,317],{"class":302},[296,1945,1214],{"class":1246},[296,1947,1249],{"class":342},[296,1949,1950],{"class":298,"line":405},[296,1951,392],{"emptyLinePlaceholder":39},[296,1953,1954],{"class":298,"line":414},[296,1955,1258],{"class":538},[296,1957,1958,1960,1962,1964,1966,1968,1970],{"class":298,"line":430},[296,1959,1238],{"class":310},[296,1961,339],{"class":302},[296,1963,1267],{"class":342},[296,1965,1270],{"class":302},[296,1967,1273],{"class":302},[296,1969,1195],{"class":1246},[296,1971,1249],{"class":342},[296,1973,1974],{"class":298,"line":436},[296,1975,392],{"emptyLinePlaceholder":39},[296,1977,1978,1980,1982,1984,1986,1988,1990],{"class":298,"line":442},[296,1979,1286],{"class":1246},[296,1981,1289],{"class":342},[296,1983,1292],{"class":302},[296,1985,1296],{"class":1295},[296,1987,1299],{"class":302},[296,1989,1302],{"class":310},[296,1991,1305],{"class":302},[296,1993,1994,1996,1998,2000,2002,2004,2006],{"class":298,"line":454},[296,1995,1310],{"class":335},[296,1997,1313],{"class":306},[296,1999,1316],{"class":342},[296,2001,1319],{"class":302},[296,2003,1322],{"class":342},[296,2005,1325],{"class":306},[296,2007,1328],{"class":302},[296,2009,2010],{"class":298,"line":464},[296,2011,1333],{"class":538},[296,2013,2014,2016,2018,2020,2022,2024,2026,2028,2030,2032,2034],{"class":298,"line":764},[296,2015,1338],{"class":342},[296,2017,1319],{"class":302},[296,2019,1322],{"class":342},[296,2021,1319],{"class":302},[296,2023,1347],{"class":342},[296,2025,1319],{"class":302},[296,2027,1352],{"class":342},[296,2029,1273],{"class":302},[296,2031,1296],{"class":342},[296,2033,1359],{"class":302},[296,2035,1363],{"class":1362},[296,2037,2038,2040,2042,2044,2046,2048,2050,2052,2054,2056,2058],{"class":298,"line":774},[296,2039,1338],{"class":342},[296,2041,1319],{"class":302},[296,2043,1322],{"class":342},[296,2045,1319],{"class":302},[296,2047,1347],{"class":342},[296,2049,1319],{"class":302},[296,2051,1380],{"class":342},[296,2053,1273],{"class":302},[296,2055,1296],{"class":342},[296,2057,1359],{"class":302},[296,2059,1389],{"class":1362},[296,2061,2062],{"class":298,"line":1014},[296,2063,1394],{"class":302},[296,2065,2066,2068],{"class":298,"line":1023},[296,2067,1270],{"class":302},[296,2069,1401],{"class":342},[296,2071,2072,2074,2076],{"class":298,"line":1028},[296,2073,382],{"class":302},[296,2075,307],{"class":306},[296,2077,329],{"class":302},[296,2079,2080],{"class":298,"line":1033},[296,2081,392],{"emptyLinePlaceholder":39},[296,2083,2084,2086,2088],{"class":298,"line":1042},[296,2085,303],{"class":302},[296,2087,400],{"class":306},[296,2089,329],{"class":302},[296,2091,2092],{"class":298,"line":1051},[296,2093,564],{"class":538},[296,2095,2096,2098],{"class":298,"line":1428},[296,2097,408],{"class":302},[296,2099,571],{"class":306},[296,2101,2102,2104,2106,2108,2110],{"class":298,"line":1435},[296,2103,576],{"class":310},[296,2105,317],{"class":302},[296,2107,320],{"class":302},[296,2109,583],{"class":323},[296,2111,427],{"class":302},[296,2113,2114,2116,2118,2120,2122],{"class":298,"line":1449},[296,2115,590],{"class":310},[296,2117,317],{"class":302},[296,2119,320],{"class":302},[296,2121,597],{"class":323},[296,2123,427],{"class":302},[296,2125,2126],{"class":298,"line":1462},[296,2127,604],{"class":302},[296,2129,2130],{"class":298,"line":1467},[296,2131,392],{"emptyLinePlaceholder":39},[296,2133,2134],{"class":298,"line":1472},[296,2135,949],{"class":538},[296,2137,2138,2140,2142,2144,2146,2148,2150,2152,2154,2156,2158,2160,2162],{"class":298,"line":1477},[296,2139,408],{"class":302},[296,2141,852],{"class":306},[296,2143,1214],{"class":310},[296,2145,317],{"class":302},[296,2147,320],{"class":302},[296,2149,1316],{"class":323},[296,2151,320],{"class":302},[296,2153,958],{"class":310},[296,2155,317],{"class":302},[296,2157,320],{"class":302},[296,2159,965],{"class":323},[296,2161,320],{"class":302},[296,2163,329],{"class":302},[296,2165,2166,2168,2170,2172,2174,2176,2178,2180],{"class":298,"line":1506},[296,2167,445],{"class":302},[296,2169,976],{"class":306},[296,2171,979],{"class":310},[296,2173,317],{"class":302},[296,2175,320],{"class":302},[296,2177,986],{"class":323},[296,2179,320],{"class":302},[296,2181,451],{"class":302},[296,2183,2184,2186,2188,2190,2192,2194,2196,2198],{"class":298,"line":1525},[296,2185,445],{"class":302},[296,2187,997],{"class":306},[296,2189,1000],{"class":310},[296,2191,317],{"class":302},[296,2193,320],{"class":302},[296,2195,1007],{"class":323},[296,2197,320],{"class":302},[296,2199,451],{"class":302},[296,2201,2202,2204,2206],{"class":298,"line":1544},[296,2203,457],{"class":302},[296,2205,852],{"class":306},[296,2207,329],{"class":302},[296,2209,2210],{"class":298,"line":1553},[296,2211,392],{"emptyLinePlaceholder":39},[296,2213,2215],{"class":298,"line":2214},33,[296,2216,752],{"class":538},[296,2218,2220,2222,2224],{"class":298,"line":2219},34,[296,2221,408],{"class":302},[296,2223,759],{"class":306},[296,2225,451],{"class":302},[296,2227,2229,2231,2233],{"class":298,"line":2228},35,[296,2230,408],{"class":302},[296,2232,769],{"class":306},[296,2234,451],{"class":302},[296,2236,2238,2240,2242],{"class":298,"line":2237},36,[296,2239,382],{"class":302},[296,2241,400],{"class":306},[296,2243,329],{"class":302},[286,2245,2248],{"className":1607,"code":2246,"filename":2247,"language":1609,"meta":292,"style":292},"import { createApp } from 'vue'\nimport App from './App.vue'\n\ncreateApp(App).mount('#app')\n","main.ts",[281,2249,2250,2269,2285,2289],{"__ignoreMap":292},[296,2251,2252,2254,2256,2259,2261,2263,2265,2267],{"class":298,"line":299},[296,2253,336],{"class":335},[296,2255,339],{"class":302},[296,2257,2258],{"class":342}," createApp",[296,2260,346],{"class":302},[296,2262,349],{"class":335},[296,2264,352],{"class":302},[296,2266,291],{"class":323},[296,2268,358],{"class":302},[296,2270,2271,2273,2276,2278,2280,2283],{"class":298,"line":332},[296,2272,336],{"class":335},[296,2274,2275],{"class":342}," App ",[296,2277,369],{"class":335},[296,2279,352],{"class":302},[296,2281,2282],{"class":323},"./App.vue",[296,2284,358],{"class":302},[296,2286,2287],{"class":298,"line":361},[296,2288,392],{"emptyLinePlaceholder":39},[296,2290,2291,2294,2297,2299,2302,2304,2307,2310,2312],{"class":298,"line":379},[296,2292,2293],{"class":1246},"createApp",[296,2295,2296],{"class":342},"(App)",[296,2298,1319],{"class":302},[296,2300,2301],{"class":1246},"mount",[296,2303,1289],{"class":342},[296,2305,2306],{"class":302},"'",[296,2308,2309],{"class":323},"#app",[296,2311,2306],{"class":302},[296,2313,1401],{"class":342},[286,2315,2320],{"className":2316,"code":2317,"filename":2318,"language":2319,"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,2321,2322,2326,2349,2363,2383,2403,2416,2438,2458,2476,2481,2494,2513,2533,2550,2554,2567,2587,2606,2625,2643,2647],{"__ignoreMap":292},[296,2323,2324],{"class":298,"line":299},[296,2325,1328],{"class":302},[296,2327,2328,2331,2334,2336,2338,2341,2344,2346],{"class":298,"line":332},[296,2329,2330],{"class":302},"  \"",[296,2332,2333],{"class":310},"name",[296,2335,320],{"class":302},[296,2337,1073],{"class":302},[296,2339,2340],{"class":302}," \"",[296,2342,2343],{"class":323},"my-first-scene",[296,2345,320],{"class":302},[296,2347,2348],{"class":302},",\n",[296,2350,2351,2353,2356,2358,2360],{"class":298,"line":361},[296,2352,2330],{"class":302},[296,2354,2355],{"class":310},"private",[296,2357,320],{"class":302},[296,2359,1073],{"class":302},[296,2361,2362],{"class":302}," true,\n",[296,2364,2365,2367,2370,2372,2374,2376,2379,2381],{"class":298,"line":379},[296,2366,2330],{"class":302},[296,2368,2369],{"class":310},"version",[296,2371,320],{"class":302},[296,2373,1073],{"class":302},[296,2375,2340],{"class":302},[296,2377,2378],{"class":323},"0.0.0",[296,2380,320],{"class":302},[296,2382,2348],{"class":302},[296,2384,2385,2387,2390,2392,2394,2396,2399,2401],{"class":298,"line":389},[296,2386,2330],{"class":302},[296,2388,2389],{"class":310},"type",[296,2391,320],{"class":302},[296,2393,1073],{"class":302},[296,2395,2340],{"class":302},[296,2397,2398],{"class":323},"module",[296,2400,320],{"class":302},[296,2402,2348],{"class":302},[296,2404,2405,2407,2410,2412,2414],{"class":298,"line":395},[296,2406,2330],{"class":302},[296,2408,2409],{"class":310},"scripts",[296,2411,320],{"class":302},[296,2413,1073],{"class":302},[296,2415,1305],{"class":302},[296,2417,2418,2421,2425,2427,2429,2431,2434,2436],{"class":298,"line":405},[296,2419,2420],{"class":302},"    \"",[296,2422,2424],{"class":2423},"sBMFI","dev",[296,2426,320],{"class":302},[296,2428,1073],{"class":302},[296,2430,2340],{"class":302},[296,2432,2433],{"class":323},"vite",[296,2435,320],{"class":302},[296,2437,2348],{"class":302},[296,2439,2440,2442,2445,2447,2449,2451,2454,2456],{"class":298,"line":414},[296,2441,2420],{"class":302},[296,2443,2444],{"class":2423},"build",[296,2446,320],{"class":302},[296,2448,1073],{"class":302},[296,2450,2340],{"class":302},[296,2452,2453],{"class":323},"vue-tsc && vite build",[296,2455,320],{"class":302},[296,2457,2348],{"class":302},[296,2459,2460,2462,2465,2467,2469,2471,2474],{"class":298,"line":430},[296,2461,2420],{"class":302},[296,2463,2464],{"class":2423},"preview",[296,2466,320],{"class":302},[296,2468,1073],{"class":302},[296,2470,2340],{"class":302},[296,2472,2473],{"class":323},"vite preview",[296,2475,427],{"class":302},[296,2477,2478],{"class":298,"line":436},[296,2479,2480],{"class":302},"  },\n",[296,2482,2483,2485,2488,2490,2492],{"class":298,"line":442},[296,2484,2330],{"class":302},[296,2486,2487],{"class":310},"dependencies",[296,2489,320],{"class":302},[296,2491,1073],{"class":302},[296,2493,1305],{"class":302},[296,2495,2496,2498,2500,2502,2504,2506,2509,2511],{"class":298,"line":454},[296,2497,2420],{"class":302},[296,2499,355],{"class":2423},[296,2501,320],{"class":302},[296,2503,1073],{"class":302},[296,2505,2340],{"class":302},[296,2507,2508],{"class":323},"latest",[296,2510,320],{"class":302},[296,2512,2348],{"class":302},[296,2514,2515,2517,2520,2522,2524,2526,2529,2531],{"class":298,"line":464},[296,2516,2420],{"class":302},[296,2518,2519],{"class":2423},"three",[296,2521,320],{"class":302},[296,2523,1073],{"class":302},[296,2525,2340],{"class":302},[296,2527,2528],{"class":323},"^0.158.0",[296,2530,320],{"class":302},[296,2532,2348],{"class":302},[296,2534,2535,2537,2539,2541,2543,2545,2548],{"class":298,"line":764},[296,2536,2420],{"class":302},[296,2538,291],{"class":2423},[296,2540,320],{"class":302},[296,2542,1073],{"class":302},[296,2544,2340],{"class":302},[296,2546,2547],{"class":323},"^3.3.0",[296,2549,427],{"class":302},[296,2551,2552],{"class":298,"line":774},[296,2553,2480],{"class":302},[296,2555,2556,2558,2561,2563,2565],{"class":298,"line":1014},[296,2557,2330],{"class":302},[296,2559,2560],{"class":310},"devDependencies",[296,2562,320],{"class":302},[296,2564,1073],{"class":302},[296,2566,1305],{"class":302},[296,2568,2569,2571,2574,2576,2578,2580,2583,2585],{"class":298,"line":1023},[296,2570,2420],{"class":302},[296,2572,2573],{"class":2423},"@vitejs/plugin-vue",[296,2575,320],{"class":302},[296,2577,1073],{"class":302},[296,2579,2340],{"class":302},[296,2581,2582],{"class":323},"^4.4.0",[296,2584,320],{"class":302},[296,2586,2348],{"class":302},[296,2588,2589,2591,2593,2595,2597,2599,2602,2604],{"class":298,"line":1028},[296,2590,2420],{"class":302},[296,2592,1609],{"class":2423},[296,2594,320],{"class":302},[296,2596,1073],{"class":302},[296,2598,2340],{"class":302},[296,2600,2601],{"class":323},"^5.0.2",[296,2603,320],{"class":302},[296,2605,2348],{"class":302},[296,2607,2608,2610,2612,2614,2616,2618,2621,2623],{"class":298,"line":1033},[296,2609,2420],{"class":302},[296,2611,2433],{"class":2423},[296,2613,320],{"class":302},[296,2615,1073],{"class":302},[296,2617,2340],{"class":302},[296,2619,2620],{"class":323},"^4.4.5",[296,2622,320],{"class":302},[296,2624,2348],{"class":302},[296,2626,2627,2629,2632,2634,2636,2638,2641],{"class":298,"line":1042},[296,2628,2420],{"class":302},[296,2630,2631],{"class":2423},"vue-tsc",[296,2633,320],{"class":302},[296,2635,1073],{"class":302},[296,2637,2340],{"class":302},[296,2639,2640],{"class":323},"^1.8.5",[296,2642,427],{"class":302},[296,2644,2645],{"class":298,"line":1051},[296,2646,1394],{"class":302},[296,2648,2649],{"class":298,"line":1428},[296,2650,2651],{"class":302},"}\n",[286,2653,2656],{"className":1607,"code":2654,"filename":2655,"language":1609,"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,2657,2658,2677,2696,2711,2715,2729,2739,2748,2753,2761,2771,2778],{"__ignoreMap":292},[296,2659,2660,2662,2664,2667,2669,2671,2673,2675],{"class":298,"line":299},[296,2661,336],{"class":335},[296,2663,339],{"class":302},[296,2665,2666],{"class":342}," templateCompilerOptions",[296,2668,346],{"class":302},[296,2670,349],{"class":335},[296,2672,352],{"class":302},[296,2674,355],{"class":323},[296,2676,358],{"class":302},[296,2678,2679,2681,2683,2686,2688,2690,2692,2694],{"class":298,"line":332},[296,2680,336],{"class":335},[296,2682,339],{"class":302},[296,2684,2685],{"class":342}," defineConfig",[296,2687,346],{"class":302},[296,2689,349],{"class":335},[296,2691,352],{"class":302},[296,2693,2433],{"class":323},[296,2695,358],{"class":302},[296,2697,2698,2700,2703,2705,2707,2709],{"class":298,"line":361},[296,2699,336],{"class":335},[296,2701,2702],{"class":342}," vue ",[296,2704,369],{"class":335},[296,2706,352],{"class":302},[296,2708,2573],{"class":323},[296,2710,358],{"class":302},[296,2712,2713],{"class":298,"line":379},[296,2714,392],{"emptyLinePlaceholder":39},[296,2716,2717,2720,2723,2725,2727],{"class":298,"line":389},[296,2718,2719],{"class":335},"export",[296,2721,2722],{"class":335}," default",[296,2724,2685],{"class":1246},[296,2726,1289],{"class":342},[296,2728,1328],{"class":302},[296,2730,2731,2734,2736],{"class":298,"line":395},[296,2732,2733],{"class":306},"  plugins",[296,2735,1073],{"class":302},[296,2737,2738],{"class":342}," [\n",[296,2740,2741,2744,2746],{"class":298,"line":405},[296,2742,2743],{"class":1246},"    vue",[296,2745,1289],{"class":342},[296,2747,1328],{"class":302},[296,2749,2750],{"class":298,"line":414},[296,2751,2752],{"class":538},"      // Other config\n",[296,2754,2755,2758],{"class":298,"line":430},[296,2756,2757],{"class":302},"      ...",[296,2759,2760],{"class":342},"templateCompilerOptions\n",[296,2762,2763,2766,2769],{"class":298,"line":436},[296,2764,2765],{"class":302},"    }",[296,2767,2768],{"class":342},")",[296,2770,2348],{"class":302},[296,2772,2773,2776],{"class":298,"line":442},[296,2774,2775],{"class":342},"  ]",[296,2777,2348],{"class":302},[296,2779,2780,2782],{"class":298,"line":454},[296,2781,1270],{"class":302},[296,2783,1401],{"class":342},[245,2785,2787],{"id":2786},"key-concepts-learned","Key Concepts Learned",[2789,2790,2791,2802,2810,2819],"card-group",{},[2792,2793,2796],"card",{"icon":2794,"title":2795},"i-lucide-layers","Component Separation",[250,2797,2798,2799,2801],{},"Separating ",[281,2800,283],{}," from your 3D experience improves code organization and reusability.",[2792,2803,2805],{"icon":21,"title":2804},"Objects and Materials",[250,2806,2807,2808,853],{},"In TresJS, 3D objects are created using a ",[281,2809,852],{},[2792,2811,2814],{"icon":2812,"title":2813},"i-lucide-rotate-cw","Animation Loop",[250,2815,1714,2816,2818],{},[281,2817,120],{}," provides a clean way to handle animations and updates in your 3D scene.",[2792,2820,2823],{"icon":2821,"title":2822},"i-lucide-link","Template Refs",[250,2824,2825],{},"Using Vue's template refs allows you to directly manipulate 3D objects in your animations.",[245,2827,2829],{"id":2828},"next-steps","Next Steps",[250,2831,2832],{},"Now that you have your first scene running, you can:",[254,2834,2835,2845,2848,2864,2867],{},[257,2836,2837,2840,2841,2844],{},[501,2838,2839],{},"Extract the donut into its own component"," - Create a ",[281,2842,2843],{},"TheDonut.vue"," component to practice component composition",[257,2846,2847],{},"Experiment with different geometries and materials",[257,2849,2850,2851,2858,2859,2768],{},"Add more objects to your scene (Get inspired by Three.js's ",[2852,2853,2857],"a",{"href":2854,"rel":2855},"https://threejs.org/manual/#en/primitives",[2856],"nofollow","Geometries"," and ",[2852,2860,2863],{"href":2861,"rel":2862},"https://threejs.org/manual/#en/materials",[2856],"Materials",[257,2865,2866],{},"Try different camera positions and angles",[257,2868,2869],{},"Explore more complex animations",[496,2871,2872],{},[250,2873,2874,2875,2877],{},"Check out our ",[2852,2876,174],{"href":175}," section to see more complex scenes and learn advanced techniques!",[2879,2880,2882],"callout",{"icon":2881},"i-lucide-grid-3x3",[250,2883,2884,2887],{},[501,2885,2886],{},"Related Examples Placeholder",": Add a component here showing cards with related examples like \"Basic Primitives\", \"Lighting Setup\", \"Animation Patterns\", etc.",[2889,2890,2891],"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":292,"searchDepth":299,"depth":332,"links":2893},[2894,2895,2896,2897],{"id":247,"depth":332,"text":248},{"id":1733,"depth":332,"text":1734},{"id":2786,"depth":332,"text":2787},{"id":2828,"depth":332,"text":2829},"Learn how to create your first 3D scene with TresJS with this step-by-step guide.","md",null,{},{"icon":21},{"title":18,"description":2898},"MLsKTneI4rjdebKgmOmAOHzUG7IS9WMOOnhG8Xv7Qw4",[2906,2908],{"title":13,"path":14,"stem":15,"description":2907,"icon":16,"children":-1},"Get started with TresJS.",{"title":23,"path":24,"stem":25,"description":2909,"icon":26,"children":-1},"Upgrade TresJS to the latest version.",1782052330539]