[{"data":1,"prerenderedAt":597},["ShallowReactive",2],{"navigation":3,"/api/utils/directives":239,"/api/utils/directives-surround":592},[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":152,"body":241,"description":586,"extension":587,"links":588,"meta":589,"navigation":39,"path":153,"seo":590,"stem":154,"__hash__":591},"docs/3.api/4.utils/2.directives.md",{"type":242,"value":243,"toc":583},"minimark",[244,248,261,532,537,544,569,579],[245,246,247],"h1",{"id":247},"v-log",[249,250,251,252,256,257,260],"p",{},"With the v-log directive provided by ",[253,254,255],"strong",{},"TresJS",", you can do this by just adding ",[258,259,247],"code",{}," to the instance.",[262,263,271],"pre",{"className":264,"code":265,"highlights":266,"language":269,"meta":270,"style":270},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { TresCanvas, vLog }  from '@tresjs/core'\nimport { OrbitControls, Sphere } from '@tresjs/cientos'\n\u003C/script>\n\u003Ctemplate>\n    \u003CTresCanvas >\n    \u003CTresPerspectiveCamera :position=\"[0, 2, 5]\" />\n    \u003CSphere\n      ref=\"sphereRef\"\n      :scale=\"0.5\"\n      v-log\n    />\n    \u003COrbitControls v-log />\n  \u003C/TresCanvas>\n\u003C/template>\n",[267,268],2,11,"vue","",[258,272,273,308,344,371,381,391,403,447,455,471,489,495,501,513,523],{"__ignoreMap":270},[274,275,278,282,286,290,293,296,299,303,305],"span",{"class":276,"line":277},"line",1,[274,279,281],{"class":280},"sMK4o","\u003C",[274,283,285],{"class":284},"swJcz","script",[274,287,289],{"class":288},"spNyl"," setup",[274,291,292],{"class":288}," lang",[274,294,295],{"class":280},"=",[274,297,298],{"class":280},"\"",[274,300,302],{"class":301},"sfazB","ts",[274,304,298],{"class":280},[274,306,307],{"class":280},">\n",[274,309,312,316,319,323,326,329,332,335,338,341],{"class":310,"line":267},[276,311],"highlight",[274,313,315],{"class":314},"s7zQu","import",[274,317,318],{"class":280}," {",[274,320,322],{"class":321},"sTEyZ"," TresCanvas",[274,324,325],{"class":280},",",[274,327,328],{"class":321}," vLog",[274,330,331],{"class":280}," }",[274,333,334],{"class":314},"  from",[274,336,337],{"class":280}," '",[274,339,340],{"class":301},"@tresjs/core",[274,342,343],{"class":280},"'\n",[274,345,347,349,351,354,356,359,361,364,366,369],{"class":276,"line":346},3,[274,348,315],{"class":314},[274,350,318],{"class":280},[274,352,353],{"class":321}," OrbitControls",[274,355,325],{"class":280},[274,357,358],{"class":321}," Sphere",[274,360,331],{"class":280},[274,362,363],{"class":314}," from",[274,365,337],{"class":280},[274,367,368],{"class":301},"@tresjs/cientos",[274,370,343],{"class":280},[274,372,374,377,379],{"class":276,"line":373},4,[274,375,376],{"class":280},"\u003C/",[274,378,285],{"class":284},[274,380,307],{"class":280},[274,382,384,386,389],{"class":276,"line":383},5,[274,385,281],{"class":280},[274,387,388],{"class":284},"template",[274,390,307],{"class":280},[274,392,394,397,400],{"class":276,"line":393},6,[274,395,396],{"class":280},"    \u003C",[274,398,399],{"class":284},"TresCanvas",[274,401,402],{"class":280}," >\n",[274,404,406,408,411,414,417,419,421,424,428,431,434,436,439,442,444],{"class":276,"line":405},7,[274,407,396],{"class":280},[274,409,410],{"class":284},"TresPerspectiveCamera",[274,412,413],{"class":280}," :",[274,415,416],{"class":288},"position",[274,418,295],{"class":280},[274,420,298],{"class":280},[274,422,423],{"class":280},"[",[274,425,427],{"class":426},"sbssI","0",[274,429,430],{"class":280},", ",[274,432,433],{"class":426},"2",[274,435,430],{"class":280},[274,437,438],{"class":426},"5",[274,440,441],{"class":280},"]",[274,443,298],{"class":280},[274,445,446],{"class":280}," />\n",[274,448,450,452],{"class":276,"line":449},8,[274,451,396],{"class":280},[274,453,454],{"class":284},"Sphere\n",[274,456,458,461,463,465,468],{"class":276,"line":457},9,[274,459,460],{"class":288},"      ref",[274,462,295],{"class":280},[274,464,298],{"class":280},[274,466,467],{"class":301},"sphereRef",[274,469,470],{"class":280},"\"\n",[274,472,474,477,480,482,484,487],{"class":276,"line":473},10,[274,475,476],{"class":280},"      :",[274,478,479],{"class":288},"scale",[274,481,295],{"class":280},[274,483,298],{"class":280},[274,485,486],{"class":426},"0.5",[274,488,470],{"class":280},[274,490,492],{"class":491,"line":268},[276,311],[274,493,494],{"class":288},"      v-log\n",[274,496,498],{"class":276,"line":497},12,[274,499,500],{"class":280},"    />\n",[274,502,504,506,508,511],{"class":276,"line":503},13,[274,505,396],{"class":280},[274,507,182],{"class":284},[274,509,510],{"class":288}," v-log",[274,512,446],{"class":280},[274,514,516,519,521],{"class":276,"line":515},14,[274,517,518],{"class":280},"  \u003C/",[274,520,399],{"class":284},[274,522,307],{"class":280},[274,524,526,528,530],{"class":276,"line":525},15,[274,527,376],{"class":280},[274,529,388],{"class":284},[274,531,307],{"class":280},[533,534,536],"h2",{"id":535},"arguments","Arguments",[249,538,539,540,543],{},"Note that you can pass a modifier with the name of ",[253,541,542],{},"any property",", for example:",[262,545,549],{"className":546,"code":547,"language":548,"meta":270,"style":270},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","    \u003C!-- will log the materials -->\n    \u003CSphere v-log:material />\n","html",[258,550,551,557],{"__ignoreMap":270},[274,552,553],{"class":276,"line":277},[274,554,556],{"class":555},"sHwdD","    \u003C!-- will log the materials -->\n",[274,558,559,561,564,567],{"class":276,"line":267},[274,560,396],{"class":280},[274,562,563],{"class":284},"Sphere",[274,565,566],{"class":288}," v-log:material",[274,568,446],{"class":280},[570,571,572],"prose-warning",{},[249,573,574,575,578],{},"The component ",[258,576,577],{},"\u003CTresCanvas >"," will not log the canvas or the scene.",[580,581,582],"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 pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .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}",{"title":270,"searchDepth":277,"depth":267,"links":584},[585],{"id":535,"depth":267,"text":536},"TresJS provides custom made vue directives to help you creating your scenes.","md",null,{},{"title":152,"description":586},"LKk3gA01rp3D7gnhfX3E0_GcZMIHPWIL5EcgHUUqDm0",[593,595],{"title":148,"path":149,"stem":150,"description":594,"children":-1},"TresJS provides type guard methods to help you determine the type of a Three.js object.",{"title":162,"path":163,"stem":164,"description":596,"children":-1},"Quick guide with tips to improve the performance of your TresJS application.",1774953660445]