[{"data":1,"prerenderedAt":590},["ShallowReactive",2],{"navigation":3,"/api/utils/directives":256,"/api/utils/directives-surround":585},[4,29,78,177,190,222,232,236,240,244,248,252],{"title":5,"path":6,"stem":7,"children":8,"icon":27,"titleTemplate":28},"Getting Started","/getting-started","1.getting-started/1.index",[9,12,17,22],{"title":10,"path":6,"stem":7,"icon":11},"Introduction","i-lucide-house",{"title":13,"path":14,"stem":15,"icon":16},"Installation","/getting-started/installation","1.getting-started/2.installation","i-lucide-download",{"title":18,"path":19,"stem":20,"icon":21},"Your First Scene","/getting-started/your-first-scene","1.getting-started/3.your-first-scene","i-lucide-donut",{"title":23,"path":24,"stem":25,"icon":26},"Upgrade Guide","/getting-started/upgrade-guide","1.getting-started/4.upgrade-guide","i-lucide-circle-arrow-up","i-lucide-rocket","%s · Get Started with TresJS",{"title":30,"path":31,"stem":32,"children":33},"Essentials","/essentials","2.essentials",[34,36,48],{"title":30,"path":31,"stem":35},"2.essentials/index",{"title":37,"icon":38,"open":39,"path":40,"stem":41,"children":42,"page":47},"Core Architecture","i-lucide-cpu",true,"/essentials/core-architecture","2.essentials/1.core-architecture",[43],{"title":44,"path":45,"stem":46},"Custom Vue Renderer","/essentials/core-architecture/custom-vue-renderer","2.essentials/1.core-architecture/2.custom-vue-renderer",false,{"title":49,"icon":50,"open":39,"path":51,"stem":52,"children":53,"page":47},"Key Concepts","i-lucide-medal","/essentials/concepts","2.essentials/2.concepts",[54,58,62,66,70,74],{"title":55,"path":56,"stem":57},"Declarative vs Imperative","/essentials/concepts/declarative-vs-imperative","2.essentials/2.concepts/1.declarative-vs-imperative",{"title":59,"path":60,"stem":61},"Reactivity","/essentials/concepts/reactivity","2.essentials/2.concepts/2.reactivity",{"title":63,"path":64,"stem":65},"Constructor Arguments","/essentials/concepts/constructor-arguments","2.essentials/2.concepts/3.constructor-arguments",{"title":67,"path":68,"stem":69},"Declarative Properties","/essentials/concepts/declarative-properties","2.essentials/2.concepts/4.declarative-properties",{"title":71,"path":72,"stem":73},"Extending the Catalogue","/essentials/concepts/extending-catalogue","2.essentials/2.concepts/5.extending-catalogue",{"title":75,"path":76,"stem":77},"Child Attachments","/essentials/concepts/child-attachments","2.essentials/2.concepts/6.child-attachments",{"title":79,"path":80,"stem":81,"children":82},"API","/api","3.api",[83,86,108,135,145,159],{"title":84,"path":80,"stem":85},"TresJS API Reference","3.api/1.index",{"title":87,"icon":88,"open":39,"path":89,"stem":90,"children":91,"page":47},"Components","i-lucide-box","/api/components","3.api/1.components",[92,96,100,104],{"title":93,"path":94,"stem":95},"\u003CTresCanvas />","/api/components/tres-canvas","3.api/1.components/tres-canvas",{"title":97,"path":98,"stem":99},"\u003CTresCanvasContext />","/api/components/tres-context","3.api/1.components/tres-context",{"title":101,"path":102,"stem":103},"Tres Components","/api/components/tres-objects","3.api/1.components/tres-objects",{"title":105,"path":106,"stem":107},"TresPortal","/api/components/tres-portal","3.api/1.components/tres-portal",{"title":109,"titleTemplate":110,"icon":111,"path":112,"stem":113,"children":114,"page":47},"Composables","%s · TresJS Composables","i-lucide-arrow-right-left","/api/composables","3.api/2.composables",[115,119,123,127,131],{"title":116,"path":117,"stem":118},"useTres","/api/composables/use-tres","3.api/2.composables/1.use-tres",{"title":120,"path":121,"stem":122},"useTresContext","/api/composables/use-tres-context","3.api/2.composables/2.use-tres-context",{"title":124,"path":125,"stem":126},"useLoop","/api/composables/use-loop","3.api/2.composables/3.use-loop",{"title":128,"path":129,"stem":130},"useGraph","/api/composables/use-graph","3.api/2.composables/4.use-graph",{"title":132,"path":133,"stem":134},"useLoader","/api/composables/use-loader","3.api/2.composables/5.use-loader",{"title":136,"icon":137,"path":138,"stem":139,"children":140,"page":47},"Event handling","i-lucide-mouse-pointer-2","/api/events","3.api/3.events",[141],{"title":142,"path":143,"stem":144},"Pointer Events","/api/events/pointer-events","3.api/3.events/1.pointer-events",{"title":146,"icon":147,"path":148,"stem":149,"children":150,"page":47},"Utils","i-lucide-wrench","/api/utils","3.api/4.utils",[151,155],{"title":152,"path":153,"stem":154},"Type Guards","/api/utils/type-guards","3.api/4.utils/1.type-guards",{"title":156,"path":157,"stem":158},"Directives","/api/utils/directives","3.api/4.utils/2.directives",{"title":160,"icon":161,"path":162,"stem":163,"children":164,"page":47},"Advanced","i-lucide-brain-circuit","/api/advanced","3.api/5.advanced",[165,169,173],{"title":166,"path":167,"stem":168},"Scaling Performance 🚀","/api/advanced/performance","3.api/5.advanced/performance",{"title":170,"path":171,"stem":172},"Primitives","/api/advanced/primitives","3.api/5.advanced/primitives",{"title":174,"path":175,"stem":176},"WebGPU","/api/advanced/web-gpu","3.api/5.advanced/web-gpu",{"title":178,"path":179,"stem":180,"children":181,"icon":184,"titleTemplate":189},"CLI","/cli","4.cli/1.index",[182,185],{"title":183,"path":179,"stem":180,"icon":184},"TresJS CLI","i-lucide-terminal",{"title":186,"path":187,"stem":188,"icon":88},"tres gltf","/cli/gltf","4.cli/2.gltf","%s · TresJS CLI",{"title":191,"path":192,"stem":193,"children":194},"Cookbook","/cookbook","5.cookbook",[195,198,202,206,210,214,218],{"title":196,"path":192,"stem":197},"Cookbook 🍳🧑‍🍳","5.cookbook/index",{"title":199,"path":200,"stem":201},"OrbitControls","/cookbook/orbit-controls","5.cookbook/1.orbit-controls",{"title":203,"path":204,"stem":205},"Basic Animations","/cookbook/basic-animations","5.cookbook/2.basic-animations",{"title":207,"path":208,"stem":209},"Model Animation","/cookbook/model-animation","5.cookbook/3.model-animation",{"title":211,"path":212,"stem":213},"Advanced GSAP Animations","/cookbook/advanced-gsap-animations","5.cookbook/4.advanced-gsap-animations",{"title":215,"path":216,"stem":217},"Tweakpane","/cookbook/tweakpane","5.cookbook/5.tweakpane",{"title":219,"path":220,"stem":221},"Dynamic components","/cookbook/transition-dynamic","5.cookbook/6.transition-dynamic",{"title":223,"path":224,"stem":225,"children":226},"Community","/community","6.community/1.index",[227,228],{"title":223,"path":224,"stem":225},{"title":229,"path":230,"stem":231},"Awesome Resources","/community/awesome-resources","6.community/awesome-resources",{"title":233,"path":234,"stem":235},"German Translation","/de","de",{"title":237,"path":238,"stem":239},"Spanish Translation","/es","es",{"title":241,"path":242,"stem":243},"French Translation","/fr","fr",{"title":245,"path":246,"stem":247},"Italian Translation","/it","it",{"title":249,"path":250,"stem":251},"Japanese Translation","/jp","jp",{"title":253,"path":254,"stem":255},"Chinese Translation","/zh","zh",{"id":257,"title":156,"body":258,"description":579,"extension":580,"links":581,"meta":582,"navigation":39,"path":157,"seo":583,"stem":158,"__hash__":584},"docs/3.api/4.utils/2.directives.md",{"type":259,"value":260,"toc":576},"minimark",[261,265,278,525,530,537,562,572],[262,263,264],"h1",{"id":264},"v-log",[266,267,268,269,273,274,277],"p",{},"With the v-log directive provided by ",[270,271,272],"strong",{},"TresJS",", you can do this by just adding ",[275,276,264],"code",{}," to the instance.",[279,280,288],"pre",{"className":281,"code":282,"highlights":283,"language":286,"meta":287,"style":287},"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",[284,285],2,11,"vue","",[275,289,290,325,361,388,398,408,420,443,451,467,482,488,494,506,516],{"__ignoreMap":287},[291,292,295,299,303,307,310,313,316,320,322],"span",{"class":293,"line":294},"line",1,[291,296,298],{"class":297},"sMK4o","\u003C",[291,300,302],{"class":301},"swJcz","script",[291,304,306],{"class":305},"spNyl"," setup",[291,308,309],{"class":305}," lang",[291,311,312],{"class":297},"=",[291,314,315],{"class":297},"\"",[291,317,319],{"class":318},"sfazB","ts",[291,321,315],{"class":297},[291,323,324],{"class":297},">\n",[291,326,329,333,336,340,343,346,349,352,355,358],{"class":327,"line":284},[293,328],"highlight",[291,330,332],{"class":331},"s7zQu","import",[291,334,335],{"class":297}," {",[291,337,339],{"class":338},"sTEyZ"," TresCanvas",[291,341,342],{"class":297},",",[291,344,345],{"class":338}," vLog",[291,347,348],{"class":297}," }",[291,350,351],{"class":331},"  from",[291,353,354],{"class":297}," '",[291,356,357],{"class":318},"@tresjs/core",[291,359,360],{"class":297},"'\n",[291,362,364,366,368,371,373,376,378,381,383,386],{"class":293,"line":363},3,[291,365,332],{"class":331},[291,367,335],{"class":297},[291,369,370],{"class":338}," OrbitControls",[291,372,342],{"class":297},[291,374,375],{"class":338}," Sphere",[291,377,348],{"class":297},[291,379,380],{"class":331}," from",[291,382,354],{"class":297},[291,384,385],{"class":318},"@tresjs/cientos",[291,387,360],{"class":297},[291,389,391,394,396],{"class":293,"line":390},4,[291,392,393],{"class":297},"\u003C/",[291,395,302],{"class":301},[291,397,324],{"class":297},[291,399,401,403,406],{"class":293,"line":400},5,[291,402,298],{"class":297},[291,404,405],{"class":301},"template",[291,407,324],{"class":297},[291,409,411,414,417],{"class":293,"line":410},6,[291,412,413],{"class":297},"    \u003C",[291,415,416],{"class":301},"TresCanvas",[291,418,419],{"class":297}," >\n",[291,421,423,425,428,431,433,435,438,440],{"class":293,"line":422},7,[291,424,413],{"class":297},[291,426,427],{"class":301},"TresPerspectiveCamera",[291,429,430],{"class":305}," :position",[291,432,312],{"class":297},[291,434,315],{"class":297},[291,436,437],{"class":318},"[0, 2, 5]",[291,439,315],{"class":297},[291,441,442],{"class":297}," />\n",[291,444,446,448],{"class":293,"line":445},8,[291,447,413],{"class":297},[291,449,450],{"class":301},"Sphere\n",[291,452,454,457,459,461,464],{"class":293,"line":453},9,[291,455,456],{"class":305},"      ref",[291,458,312],{"class":297},[291,460,315],{"class":297},[291,462,463],{"class":318},"sphereRef",[291,465,466],{"class":297},"\"\n",[291,468,470,473,475,477,480],{"class":293,"line":469},10,[291,471,472],{"class":305},"      :scale",[291,474,312],{"class":297},[291,476,315],{"class":297},[291,478,479],{"class":318},"0.5",[291,481,466],{"class":297},[291,483,485],{"class":484,"line":285},[293,328],[291,486,487],{"class":305},"      v-log\n",[291,489,491],{"class":293,"line":490},12,[291,492,493],{"class":297},"    />\n",[291,495,497,499,501,504],{"class":293,"line":496},13,[291,498,413],{"class":297},[291,500,199],{"class":301},[291,502,503],{"class":305}," v-log",[291,505,442],{"class":297},[291,507,509,512,514],{"class":293,"line":508},14,[291,510,511],{"class":297},"  \u003C/",[291,513,416],{"class":301},[291,515,324],{"class":297},[291,517,519,521,523],{"class":293,"line":518},15,[291,520,393],{"class":297},[291,522,405],{"class":301},[291,524,324],{"class":297},[526,527,529],"h2",{"id":528},"arguments","Arguments",[266,531,532,533,536],{},"Note that you can pass a modifier with the name of ",[270,534,535],{},"any property",", for example:",[279,538,542],{"className":539,"code":540,"language":541,"meta":287,"style":287},"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",[275,543,544,550],{"__ignoreMap":287},[291,545,546],{"class":293,"line":294},[291,547,549],{"class":548},"sHwdD","    \u003C!-- will log the materials -->\n",[291,551,552,554,557,560],{"class":293,"line":284},[291,553,413],{"class":297},[291,555,556],{"class":301},"Sphere",[291,558,559],{"class":305}," v-log:material",[291,561,442],{"class":297},[563,564,565],"prose-warning",{},[266,566,567,568,571],{},"The component ",[275,569,570],{},"\u003CTresCanvas >"," will not log the canvas or the scene.",[573,574,575],"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}",{"title":287,"searchDepth":294,"depth":284,"links":577},[578],{"id":528,"depth":284,"text":529},"TresJS provides custom made vue directives to help you creating your scenes.","md",null,{},{"title":156,"description":579},"XIbfjO4J4ExgSHjhGuo9UG7W6o8h4qYTHhX4FBK5XMI",[586,588],{"title":152,"path":153,"stem":154,"description":587,"children":-1},"TresJS provides type guard methods to help you determine the type of a Three.js object.",{"title":166,"path":167,"stem":168,"description":589,"children":-1},"Quick guide with tips to improve the performance of your TresJS application.",1785417171928]