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