docs: improved migration guide

docs/.vitepress/cache/deps/@tresjs_core.js

@@ -1,42 +1,42 @@
 import {
-  A,
   Ct,
+  D,
   Et,
+  I,
   Lt,
-  Mt,
+  Me,
   N,
-  St,
-  Xe,
+  Pt,
+  Qe,
+  Rt,
+  bt,
   ct,
-  it,
-  k,
-  ot,
-  q,
-  ut,
-  ve,
-  we,
-  wt
-} from "./chunk-ZAYNNKM4.js";
+  ft,
+  he,
+  lt,
+  st,
+  we
+} from "./chunk-DESKY23Y.js";
 import "./chunk-LZPJ5JBW.js";
 import "./chunk-4QXXOI63.js";
 import "./chunk-JC4IRQUL.js";
 export {
-  Xe as CameraType,
-  wt as TresCanvas,
-  N as catalogue,
-  St as default,
-  ve as extend,
-  Et as isProd,
-  it as trasverseObjects,
-  q as useCamera,
-  Mt as useLoader,
-  A as useLogger,
-  ut as useRaycaster,
-  we as useRenderLoop,
-  ot as useRenderer,
-  Lt as useSeek,
+  Qe as CameraType,
+  bt as TresCanvas,
+  he as catalogue,
+  Lt as default,
+  we as extend,
+  Pt as isProd,
+  ct as trasverseObjects,
+  N as useCamera,
+  Et as useLoader,
+  I as useLogger,
+  lt as useRaycaster,
+  Me as useRenderLoop,
+  st as useRenderer,
+  Rt as useSeek,
   Ct as useTexture,
-  k as useTres,
-  ct as useTresProvider
+  D as useTres,
+  ft as useTresProvider
 };
 //# sourceMappingURL=@tresjs_core.js.map

docs/.vitepress/cache/deps/_metadata.json

@@ -1,47 +1,47 @@
 {
-  "hash": "c0aa5abf",
-  "browserHash": "786d5af0",
+  "hash": "73411b7d",
+  "browserHash": "0bbf8bc7",
   "optimized": {
     "vue": {
       "src": "../../../../node_modules/.pnpm/vue@3.2.47/node_modules/vue/dist/vue.runtime.esm-bundler.js",
       "file": "vue.js",
-      "fileHash": "fca2bc15",
-      "needsInterop": false
-    },
-    "@tresjs/core": {
-      "src": "../../../../node_modules/.pnpm/@tresjs+core@2.0.0-beta.2_three@0.150.1/node_modules/@tresjs/core/dist/tres.js",
-      "file": "@tresjs_core.js",
-      "fileHash": "f99c16ea",
+      "fileHash": "1ab1f91c",
       "needsInterop": false
     },
     "three": {
       "src": "../../../../node_modules/.pnpm/three@0.150.1/node_modules/three/build/three.module.js",
       "file": "three.js",
-      "fileHash": "674337d4",
+      "fileHash": "c93e162c",
+      "needsInterop": false
+    },
+    "@tresjs/core": {
+      "src": "../../../../node_modules/.pnpm/@tresjs+core@2.0.0-beta.5_three@0.150.1_vue@3.2.47/node_modules/@tresjs/core/dist/tres.js",
+      "file": "@tresjs_core.js",
+      "fileHash": "dc076c3b",
       "needsInterop": false
     },
     "@tresjs/cientos": {
-      "src": "../../../../node_modules/.pnpm/@tresjs+cientos@2.0.0-beta.0_tmfoxhtycm6gvt37fuuvp77ciy/node_modules/@tresjs/cientos/dist/trescientos.js",
+      "src": "../../../../node_modules/.pnpm/@tresjs+cientos@2.0.0-beta.1_@tresjs+core@2.0.0-beta.5_three@0.150.1_vue@3.2.47/node_modules/@tresjs/cientos/dist/trescientos.js",
       "file": "@tresjs_cientos.js",
-      "fileHash": "8c54a5ea",
+      "fileHash": "c0bcd255",
       "needsInterop": false
     },
     "@stackblitz/sdk": {
       "src": "../../../../node_modules/.pnpm/@stackblitz+sdk@1.9.0/node_modules/@stackblitz/sdk/bundles/sdk.m.js",
       "file": "@stackblitz_sdk.js",
-      "fileHash": "8df2d73d",
+      "fileHash": "68a20abf",
       "needsInterop": false
     },
     "gsap": {
       "src": "../../../../node_modules/.pnpm/gsap@3.11.5/node_modules/gsap/index.js",
       "file": "gsap.js",
-      "fileHash": "194308d9",
+      "fileHash": "a4e0a5be",
       "needsInterop": false
     }
   },
   "chunks": {
-    "chunk-ZAYNNKM4": {
-      "file": "chunk-ZAYNNKM4.js"
+    "chunk-DESKY23Y": {
+      "file": "chunk-DESKY23Y.js"
     },
     "chunk-LZPJ5JBW": {
       "file": "chunk-LZPJ5JBW.js"

docs/.vitepress/cache/deps/chunk-ZAYNNKM4.js → docs/.vitepress/cache/deps/chunk-DESKY23Y.js

@@ -43,7 +43,7 @@ import {
   three_module_exports
 } from "./chunk-4QXXOI63.js";
 
-// node_modules/.pnpm/@vueuse+shared@9.13.0/node_modules/@vueuse/shared/index.mjs
+// node_modules/.pnpm/@vueuse+shared@9.13.0_vue@3.2.47/node_modules/@vueuse/shared/index.mjs
 var _a;
 var isClient = typeof window !== "undefined";
 var isFunction = (val) => typeof val === "function";
@@ -97,7 +97,7 @@ function tryOnMounted(fn, sync = true) {
     nextTick(fn);
 }
 
-// node_modules/.pnpm/@vueuse+core@9.13.0/node_modules/@vueuse/core/index.mjs
+// node_modules/.pnpm/@vueuse+core@9.13.0_vue@3.2.47/node_modules/@vueuse/core/index.mjs
 function unrefElement(elRef) {
   var _a2;
   const plain = resolveUnref(elRef);
@@ -390,25 +390,25 @@ function useWindowSize(options = {}) {
   return { width, height };
 }
 
-// node_modules/.pnpm/@tresjs+core@2.0.0-beta.2_three@0.150.1/node_modules/@tresjs/core/dist/tres.js
-var N = ref({ uuid: MathUtils.generateUUID() });
-var ve = (e) => void Object.assign(N.value, e);
-var Xe = ((e) => (e.Perspective = "Perspective", e.Orthographic = "Orthographic", e))(Xe || {});
-var Je = 45;
-var L;
-function q() {
-  const { state: e, setState: t, aspectRatio: r } = k();
-  function a(o = "Perspective", c) {
-    var l, v, d;
-    if (o === "Perspective") {
-      const { near: f, far: M, fov: h2 } = c || {
+// node_modules/.pnpm/@tresjs+core@2.0.0-beta.5_three@0.150.1_vue@3.2.47/node_modules/@tresjs/core/dist/tres.js
+var he = ref({ uuid: MathUtils.generateUUID() });
+var we = (e) => void Object.assign(he.value, e);
+var Qe = ((e) => (e.Perspective = "Perspective", e.Orthographic = "Orthographic", e))(Qe || {});
+var Ze = 45;
+var _;
+function N() {
+  const { state: e, setState: t, aspectRatio: o } = D();
+  function a(i = "Perspective", c) {
+    var u, f, m;
+    if (i === "Perspective") {
+      const { near: d, far: P, fov: g } = c || {
         near: 0.1,
         far: 1e3,
-        fov: Je
+        fov: Ze
       };
-      L = new PerspectiveCamera(h2, ((l = e.aspectRatio) == null ? void 0 : l.value) || window.innerWidth / window.innerHeight, f, M), (v = e.cameras) == null || v.push(L);
+      _ = new PerspectiveCamera(g, ((u = e.aspectRatio) == null ? void 0 : u.value) || window.innerWidth / window.innerHeight, d, P), (f = e.cameras) == null || f.push(_);
     } else {
-      const { left: f, right: M, top: h2, bottom: C, near: g, far: p } = c || {
+      const { left: d, right: P, top: g, bottom: R, near: w, far: p } = c || {
         left: -100,
         right: 100,
         top: 100,
@@ -416,60 +416,60 @@ function q() {
         near: 0.1,
         far: 1e3
       };
-      L = new OrthographicCamera(f, M, h2, C, g, p), (d = e.cameras) == null || d.push(L);
+      _ = new OrthographicCamera(d, P, g, R, w, p), (m = e.cameras) == null || m.push(_);
     }
-    return e.camera = L, t("camera", e.camera), L;
+    return e.camera = _, t("camera", e.camera), _;
   }
   function n() {
-    var o;
-    e.camera instanceof PerspectiveCamera && e.aspectRatio && (e.camera.aspect = e.aspectRatio.value), (o = e.camera) == null || o.updateProjectionMatrix();
+    var i;
+    e.camera instanceof PerspectiveCamera && e.aspectRatio && (e.camera.aspect = e.aspectRatio.value), (i = e.camera) == null || i.updateProjectionMatrix();
   }
-  function i(o) {
+  function r(i) {
     var c;
-    (c = e.cameras) == null || c.push(o), o instanceof PerspectiveCamera && e.aspectRatio && (o.aspect = e.aspectRatio.value), o.updateProjectionMatrix(), t("camera", o);
+    (c = e.cameras) == null || c.push(i), i instanceof PerspectiveCamera && e.aspectRatio && (i.aspect = e.aspectRatio.value), i.updateProjectionMatrix(), t("camera", i);
   }
   function s() {
     e.cameras = [];
   }
   return watchEffect(() => {
-    r != null && r.value && n();
+    o != null && o.value && n();
   }), {
     activeCamera: toRef(e, "camera"),
     createCamera: a,
     updateCamera: n,
-    pushCamera: i,
+    pushCamera: r,
     clearCameras: s
   };
 }
-var he = createEventHook();
-var ge = createEventHook();
-var Y = createEventHook();
-var R = new Clock();
-var D = 0;
-var W = 0;
-var { pause: Qe, resume: Ze, isActive: et } = useRafFn(
+var be = createEventHook();
+var ye = createEventHook();
+var K = createEventHook();
+var j = new Clock();
+var G = 0;
+var V = 0;
+var { pause: et, resume: tt, isActive: at } = useRafFn(
   () => {
-    he.trigger({ delta: D, elapsed: W, clock: R }), ge.trigger({ delta: D, elapsed: W, clock: R }), Y.trigger({ delta: D, elapsed: W, clock: R });
+    be.trigger({ delta: G, elapsed: V, clock: j }), ye.trigger({ delta: G, elapsed: V, clock: j }), K.trigger({ delta: G, elapsed: V, clock: j });
   },
   { immediate: false }
 );
-Y.on(() => {
-  D = R.getDelta(), W = R.getElapsedTime();
+K.on(() => {
+  G = j.getDelta(), V = j.getElapsedTime();
 });
-function we() {
+function Me() {
   return {
-    onBeforeLoop: he.on,
-    onLoop: ge.on,
-    onAfterLoop: Y.on,
-    pause: Qe,
-    resume: Ze,
-    isActive: et
+    onBeforeLoop: be.on,
+    onLoop: ye.on,
+    onAfterLoop: K.on,
+    pause: et,
+    resume: tt,
+    isActive: at
   };
 }
-function tt(e) {
+function nt(e) {
   return e instanceof Color ? e : Array.isArray(e) ? new Color(...e) : new Color(e);
 }
-var G = {
+var $ = {
   realistic: {
     outputEncoding: sRGBEncoding,
     toneMapping: ACESFilmicToneMapping,
@@ -480,165 +480,165 @@ var G = {
     }
   }
 };
-var be = (e, t) => {
-  for (const r of Object.keys(t))
-    t[r] instanceof Object && Object.assign(t[r], be(e[r], t[r]));
+var xe = (e, t) => {
+  for (const o of Object.keys(t))
+    t[o] instanceof Object && Object.assign(t[o], xe(e[o], t[o]));
   return Object.assign(e || {}, t), e;
 };
-var nt = "html,body,base,head,link,meta,style,title,address,article,aside,footer,header,hgroup,h1,h2,h3,h4,h5,h6,nav,section,div,dd,dl,dt,figcaption,figure,picture,hr,img,li,main,ol,p,pre,ul,a,b,abbr,bdi,bdo,br,cite,code,data,dfn,em,i,kbd,mark,q,rp,rt,ruby,s,samp,small,span,strong,sub,sup,time,u,var,wbr,area,audio,map,track,video,embed,object,param,source,canvas,script,noscript,del,ins,caption,col,colgroup,table,thead,tbody,td,th,tr,button,datalist,fieldset,form,input,label,legend,meter,optgroup,option,output,progress,select,textarea,details,dialog,menu,summary,template,blockquote,iframe,tfoot";
-var at = rt(nt);
-function _(e) {
-  return e.replace(/-([a-z])/g, (t, r) => r.toUpperCase());
+var rt = "html,body,base,head,link,meta,style,title,address,article,aside,footer,header,hgroup,h1,h2,h3,h4,h5,h6,nav,section,div,dd,dl,dt,figcaption,figure,picture,hr,img,li,main,ol,p,pre,ul,a,b,abbr,bdi,bdo,br,cite,code,data,dfn,em,i,kbd,mark,q,rp,rt,ruby,s,samp,small,span,strong,sub,sup,time,u,var,wbr,area,audio,map,track,video,embed,object,param,source,canvas,script,noscript,del,ins,caption,col,colgroup,table,thead,tbody,td,th,tr,button,datalist,fieldset,form,input,label,legend,meter,optgroup,option,output,progress,select,textarea,details,dialog,menu,summary,template,blockquote,iframe,tfoot";
+var ot = it(rt);
+function z(e) {
+  return e.replace(/-([a-z])/g, (t, o) => o.toUpperCase());
 }
-function rt(e, t) {
-  const r = /* @__PURE__ */ Object.create(null), a = e.split(",");
+function it(e, t) {
+  const o = /* @__PURE__ */ Object.create(null), a = e.split(",");
   for (let n = 0; n < a.length; n++)
-    r[a[n]] = true;
-  return t ? (n) => !!r[n.toLowerCase()] : (n) => !!r[n];
+    o[a[n]] = true;
+  return t ? (n) => !!o[n.toLowerCase()] : (n) => !!o[n];
 }
-function ot(e) {
-  var ee, te;
-  const t = shallowRef(), r = ref(false), {
+function st(e) {
+  var Z, ee;
+  const t = shallowRef(), o = ref(false), {
     alpha: a = true,
     antialias: n = true,
-    depth: i,
+    depth: r,
     logarithmicDepthBuffer: s,
-    failIfMajorPerformanceCaveat: o,
+    failIfMajorPerformanceCaveat: i,
     precision: c,
-    premultipliedAlpha: l,
-    stencil: v,
-    shadows: d = false,
-    shadowMapType: f = PCFShadowMap,
-    physicallyCorrectLights: M = false,
-    useLegacyLights: h2 = false,
-    outputEncoding: C = LinearEncoding,
-    toneMapping: g = NoToneMapping,
+    premultipliedAlpha: u,
+    stencil: f,
+    shadows: m = false,
+    shadowMapType: d = PCFShadowMap,
+    physicallyCorrectLights: P = false,
+    useLegacyLights: g = false,
+    outputEncoding: R = LinearEncoding,
+    toneMapping: w = NoToneMapping,
     toneMappingExposure: p = 1,
-    context: b = void 0,
-    powerPreference: y = "default",
-    preserveDrawingBuffer: O = false,
-    clearColor: w,
-    windowSize: T = false,
-    preset: j = void 0
-  } = toRefs(e), { state: x, setState: F } = k(), { width: K, height: X } = resolveUnref(T) ? useWindowSize() : useElementSize(x.container), { logError: Me, logWarning: Ce } = A(), { pixelRatio: J } = useDevicePixelRatio(), { pause: Ee, resume: Le } = we(), I = computed(() => K.value / X.value);
-  !resolveUnref(T) && ((te = (ee = x.container) == null ? void 0 : ee.value) == null ? void 0 : te.offsetHeight) === 0 && Ce(`Oops... Seems like your canvas height is currently 0px, by default it takes the height of it's parent, so make sure it has some height with CSS.
+    context: x = void 0,
+    powerPreference: b = "default",
+    preserveDrawingBuffer: y = false,
+    clearColor: M,
+    windowSize: E = false,
+    preset: L = void 0
+  } = toRefs(e), { state: h2, setState: T } = D(), { width: C, height: O } = resolveUnref(E) == true || resolveUnref(E) === "" || resolveUnref(E) === "true" ? useWindowSize() : useElementSize(h2.container), { logError: B, logWarning: Pe } = I(), { pixelRatio: J } = useDevicePixelRatio(), { pause: Re, resume: Le } = Me(), U = computed(() => C.value / O.value);
+  !resolveUnref(E) && ((ee = (Z = h2.container) == null ? void 0 : Z.value) == null ? void 0 : ee.offsetHeight) === 0 && Pe(`Oops... Seems like your canvas height is currently 0px, by default it takes the height of it's parent, so make sure it has some height with CSS.
 You could set windowSize=true to force the canvas to be the size of the window.`);
-  const Q = () => {
-    t.value && (t.value.setSize(K.value, X.value), t.value.setPixelRatio(Math.min(J.value, 2)));
-  }, Z = () => {
+  const X = () => {
+    t.value && (t.value.setSize(C.value, O.value), t.value.setPixelRatio(Math.min(J.value, 2)));
+  }, Q = () => {
     if (!t.value)
       return;
-    const E = resolveUnref(j);
-    if (E) {
-      E in G || Me("Renderer Preset must be one of these: " + Object.keys(G).join(", ")), be(t.value, G[E]);
+    const A = resolveUnref(L);
+    if (A) {
+      A in $ || B("Renderer Preset must be one of these: " + Object.keys($).join(", ")), xe(t.value, $[A]);
       return;
     }
-    t.value.shadowMap.enabled = resolveUnref(d), t.value.shadowMap.type = resolveUnref(f), t.value.toneMapping = resolveUnref(g) || NoToneMapping, t.value.toneMappingExposure = resolveUnref(p), t.value.outputEncoding = resolveUnref(C) || LinearEncoding, w != null && w.value && t.value.setClearColor(tt(resolveUnref(w))), t.value.useLegacyLights = resolveUnref(h2);
-  }, Se = () => {
-    const E = unrefElement(x.canvas);
-    E && (t.value = new WebGLRenderer({
-      canvas: E,
+    t.value.shadowMap.enabled = resolveUnref(m), t.value.shadowMap.type = resolveUnref(d), t.value.toneMapping = resolveUnref(w) || NoToneMapping, t.value.toneMappingExposure = resolveUnref(p), t.value.outputEncoding = resolveUnref(R) || LinearEncoding, M != null && M.value && t.value.setClearColor(nt(resolveUnref(M))), t.value.useLegacyLights = resolveUnref(g);
+  }, Te = () => {
+    const A = unrefElement(h2.canvas);
+    A && (t.value = new WebGLRenderer({
+      canvas: A,
       alpha: resolveUnref(a),
       antialias: resolveUnref(n),
-      context: resolveUnref(b),
-      depth: resolveUnref(i),
-      failIfMajorPerformanceCaveat: resolveUnref(o),
+      context: resolveUnref(x),
+      depth: resolveUnref(r),
+      failIfMajorPerformanceCaveat: resolveUnref(i),
       logarithmicDepthBuffer: resolveUnref(s),
-      powerPreference: resolveUnref(y),
+      powerPreference: resolveUnref(b),
       precision: resolveUnref(c),
-      stencil: resolveUnref(v),
-      preserveDrawingBuffer: resolveUnref(O),
-      premultipliedAlpha: resolveUnref(l)
-    }), F("renderer", t.value), F("clock", new Clock()), F("aspectRatio", I), Z(), Q(), Le(), r.value = true);
-  }, Te = () => {
-    t.value && (t.value.dispose(), t.value = void 0, r.value = false, Ee());
+      stencil: resolveUnref(f),
+      preserveDrawingBuffer: resolveUnref(y),
+      premultipliedAlpha: resolveUnref(u)
+    }), T("renderer", t.value), T("clock", new Clock()), T("aspectRatio", U), Q(), X(), Le(), o.value = true);
+  }, Ae = () => {
+    t.value && (t.value.dispose(), t.value = void 0, o.value = false, Re());
   };
-  return watch([I, J], Q), watch(
-    [d, f, C, h2, g, p, w],
-    Z
+  return watch([U, J], X), watch(
+    [m, d, R, g, w, p, M],
+    Q
   ), watch(
-    () => [x.canvas, x.container],
+    () => [h2.canvas, h2.container],
     () => {
-      unrefElement(x.canvas) && unrefElement(x.container) && Se();
+      unrefElement(h2.canvas) && unrefElement(h2.container) && Te();
     },
     { immediate: true, deep: true }
   ), {
     renderer: t,
-    isReady: r,
-    dispose: Te,
-    aspectRatio: I
+    isReady: o,
+    dispose: Ae,
+    aspectRatio: U
   };
 }
-var ye = (e) => !!e && e.constructor === Array;
-function it(e) {
+var Ee = (e) => !!e && e.constructor === Array;
+function ct(e) {
   const t = { nodes: {}, materials: {} };
-  return e && e.traverse((r) => {
-    r.name && (t.nodes[r.name] = r), r.material && !t.materials[r.material.name] && (t.materials[r.material.name] = r.material);
+  return e && e.traverse((o) => {
+    o.name && (t.nodes[o.name] = o), o.material && !t.materials[o.material.name] && (t.materials[o.material.name] = o.material);
   }), t;
 }
-async function Mt(e, t, r, a, n) {
-  const { logError: i } = A(), s = new e();
-  n && n(s), r && r(s);
+async function Et(e, t, o, a, n) {
+  const { logError: r } = I(), s = new e();
+  n && n(s), o && o(s);
   const c = (Array.isArray(t) ? t : [t]).map(
-    (l) => new Promise((v, d) => {
+    (u) => new Promise((f, m) => {
       s.load(
-        l,
-        (f) => {
-          f.scene && Object.assign(f, it(f.scene)), v(f);
+        u,
+        (d) => {
+          d.scene && Object.assign(d, ct(d.scene)), f(d);
         },
         a,
-        (f) => d(i("[useLoader] - Failed to load resource", f))
+        (d) => m(r("[useLoader] - Failed to load resource", d))
       );
     })
   );
-  return ye(t) ? await Promise.all(c) : await c[0];
+  return Ee(t) ? await Promise.all(c) : await c[0];
 }
 async function Ct(e) {
-  const t = new LoadingManager(), r = new TextureLoader(t), a = (n) => new Promise((i, s) => {
-    r.load(
+  const t = new LoadingManager(), o = new TextureLoader(t), a = (n) => new Promise((r, s) => {
+    o.load(
       n,
-      (o) => i(o),
+      (i) => r(i),
       () => null,
       () => {
         s(new Error("[useTextures] - Failed to load texture"));
       }
     );
   });
-  if (ye(e)) {
-    const n = await Promise.all(e.map((i) => a(i)));
+  if (Ee(e)) {
+    const n = await Promise.all(e.map((r) => a(r)));
     return e.length > 1 ? n : n[0];
   } else {
     const {
       map: n,
-      displacementMap: i,
+      displacementMap: r,
       normalMap: s,
-      roughnessMap: o,
+      roughnessMap: i,
       metalnessMap: c,
-      aoMap: l,
-      alphaMap: v,
-      matcap: d
+      aoMap: u,
+      alphaMap: f,
+      matcap: m
     } = e;
     return {
       map: n ? await a(n) : null,
-      displacementMap: i ? await a(i) : null,
+      displacementMap: r ? await a(r) : null,
       normalMap: s ? await a(s) : null,
-      roughnessMap: o ? await a(o) : null,
+      roughnessMap: i ? await a(i) : null,
       metalnessMap: c ? await a(c) : null,
-      aoMap: l ? await a(l) : null,
-      alphaMap: v ? await a(v) : null,
-      matcap: d ? await a(d) : null
+      aoMap: u ? await a(u) : null,
+      alphaMap: f ? await a(f) : null,
+      matcap: m ? await a(m) : null
     };
   }
 }
-var m = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "0a", "0b", "0c", "0d", "0e", "0f", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "1a", "1b", "1c", "1d", "1e", "1f", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "2a", "2b", "2c", "2d", "2e", "2f", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "3a", "3b", "3c", "3d", "3e", "3f", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "4a", "4b", "4c", "4d", "4e", "4f", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59", "5a", "5b", "5c", "5d", "5e", "5f", "60", "61", "62", "63", "64", "65", "66", "67", "68", "69", "6a", "6b", "6c", "6d", "6e", "6f", "70", "71", "72", "73", "74", "75", "76", "77", "78", "79", "7a", "7b", "7c", "7d", "7e", "7f", "80", "81", "82", "83", "84", "85", "86", "87", "88", "89", "8a", "8b", "8c", "8d", "8e", "8f", "90", "91", "92", "93", "94", "95", "96", "97", "98", "99", "9a", "9b", "9c", "9d", "9e", "9f", "a0", "a1", "a2", "a3", "a4", "a5", "a6", "a7", "a8", "a9", "aa", "ab", "ac", "ad", "ae", "af", "b0", "b1", "b2", "b3", "b4", "b5", "b6", "b7", "b8", "b9", "ba", "bb", "bc", "bd", "be", "bf", "c0", "c1", "c2", "c3", "c4", "c5", "c6", "c7", "c8", "c9", "ca", "cb", "cc", "cd", "ce", "cf", "d0", "d1", "d2", "d3", "d4", "d5", "d6", "d7", "d8", "d9", "da", "db", "dc", "dd", "de", "df", "e0", "e1", "e2", "e3", "e4", "e5", "e6", "e7", "e8", "e9", "ea", "eb", "ec", "ed", "ee", "ef", "f0", "f1", "f2", "f3", "f4", "f5", "f6", "f7", "f8", "f9", "fa", "fb", "fc", "fd", "fe", "ff"];
-function st() {
-  const e = Math.random() * 4294967295 | 0, t = Math.random() * 4294967295 | 0, r = Math.random() * 4294967295 | 0, a = Math.random() * 4294967295 | 0;
-  return (m[e & 255] + m[e >> 8 & 255] + m[e >> 16 & 255] + m[e >> 24 & 255] + "-" + m[t & 255] + m[t >> 8 & 255] + "-" + m[t >> 16 & 15 | 64] + m[t >> 24 & 255] + "-" + m[r & 63 | 128] + m[r >> 8 & 255] + "-" + m[r >> 16 & 255] + m[r >> 24 & 255] + m[a & 255] + m[a >> 8 & 255] + m[a >> 16 & 255] + m[a >> 24 & 255]).toLowerCase();
+var v = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "0a", "0b", "0c", "0d", "0e", "0f", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "1a", "1b", "1c", "1d", "1e", "1f", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "2a", "2b", "2c", "2d", "2e", "2f", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "3a", "3b", "3c", "3d", "3e", "3f", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "4a", "4b", "4c", "4d", "4e", "4f", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59", "5a", "5b", "5c", "5d", "5e", "5f", "60", "61", "62", "63", "64", "65", "66", "67", "68", "69", "6a", "6b", "6c", "6d", "6e", "6f", "70", "71", "72", "73", "74", "75", "76", "77", "78", "79", "7a", "7b", "7c", "7d", "7e", "7f", "80", "81", "82", "83", "84", "85", "86", "87", "88", "89", "8a", "8b", "8c", "8d", "8e", "8f", "90", "91", "92", "93", "94", "95", "96", "97", "98", "99", "9a", "9b", "9c", "9d", "9e", "9f", "a0", "a1", "a2", "a3", "a4", "a5", "a6", "a7", "a8", "a9", "aa", "ab", "ac", "ad", "ae", "af", "b0", "b1", "b2", "b3", "b4", "b5", "b6", "b7", "b8", "b9", "ba", "bb", "bc", "bd", "be", "bf", "c0", "c1", "c2", "c3", "c4", "c5", "c6", "c7", "c8", "c9", "ca", "cb", "cc", "cd", "ce", "cf", "d0", "d1", "d2", "d3", "d4", "d5", "d6", "d7", "d8", "d9", "da", "db", "dc", "dd", "de", "df", "e0", "e1", "e2", "e3", "e4", "e5", "e6", "e7", "e8", "e9", "ea", "eb", "ec", "ed", "ee", "ef", "f0", "f1", "f2", "f3", "f4", "f5", "f6", "f7", "f8", "f9", "fa", "fb", "fc", "fd", "fe", "ff"];
+function ut() {
+  const e = Math.random() * 4294967295 | 0, t = Math.random() * 4294967295 | 0, o = Math.random() * 4294967295 | 0, a = Math.random() * 4294967295 | 0;
+  return (v[e & 255] + v[e >> 8 & 255] + v[e >> 16 & 255] + v[e >> 24 & 255] + "-" + v[t & 255] + v[t >> 8 & 255] + "-" + v[t >> 16 & 15 | 64] + v[t >> 24 & 255] + "-" + v[o & 63 | 128] + v[o >> 8 & 255] + "-" + v[o >> 16 & 255] + v[o >> 24 & 255] + v[a & 255] + v[a >> 8 & 255] + v[a >> 16 & 255] + v[a >> 24 & 255]).toLowerCase();
 }
-var xe = Symbol();
-function ct() {
+var Ce = Symbol();
+function ft() {
   const e = shallowReactive({
-    uuid: st(),
+    uuid: ut(),
     camera: void 0,
     cameras: [],
     scene: void 0,
@@ -648,18 +648,18 @@ function ct() {
   function t(n) {
     return e[n];
   }
-  function r(n, i) {
-    e[n] = i;
+  function o(n, r) {
+    e[n] = r;
   }
   const a = {
     state: e,
     ...toRefs(e),
     getState: t,
-    setState: r
+    setState: o
   };
-  return provide(xe, a), a;
+  return provide(Ce, a), a;
 }
-var k = () => inject(xe, {
+var D = () => inject(Ce, {
   state: shallowReactive({
     camera: void 0,
     cameras: [],
@@ -667,109 +667,128 @@ var k = () => inject(xe, {
     renderer: void 0
   })
 });
-function ut() {
+function lt() {
   var s;
-  const e = shallowRef(new Raycaster()), t = ref(new Vector2()), r = ref(null), { setState: a, state: n } = k();
-  a("raycaster", e.value), a("pointer", t), a("currentInstance", r);
-  function i(o) {
-    t.value.x = o.clientX / window.innerWidth * 2 - 1, t.value.y = -(o.clientY / window.innerHeight) * 2 + 1;
+  const e = shallowRef(new Raycaster()), t = ref(new Vector2()), o = ref(null), { setState: a, state: n } = D();
+  a("raycaster", e.value), a("pointer", t), a("currentInstance", o);
+  function r(i) {
+    t.value.x = i.clientX / window.innerWidth * 2 - 1, t.value.y = -(i.clientY / window.innerHeight) * 2 + 1;
   }
-  return (s = n == null ? void 0 : n.renderer) == null || s.domElement.addEventListener("pointermove", i), onUnmounted(() => {
-    var o;
-    (o = n == null ? void 0 : n.renderer) == null || o.domElement.removeEventListener("pointermove", i);
+  return (s = n == null ? void 0 : n.renderer) == null || s.domElement.addEventListener("pointermove", r), onUnmounted(() => {
+    var i;
+    (i = n == null ? void 0 : n.renderer) == null || i.domElement.removeEventListener("pointermove", r);
   }), {
     raycaster: e,
     pointer: t
   };
 }
-var Et = true;
-var oe = "[TresJS ▲ ■ ●] ";
-function A() {
+var Pt = true;
+var re = "[TresJS ▲ ■ ●] ";
+function I() {
   function e(a, n) {
-    console.error(`${oe} ${a}`, n || "");
+    console.error(`${re} ${a}`, n || "");
   }
   function t(a) {
-    console.warn(`${oe} ${a}`);
+    console.warn(`${re} ${a}`);
   }
-  function r(a, n) {
+  function o(a, n) {
   }
   return {
     logError: e,
     logWarning: t,
-    logMessage: r
+    logMessage: o
   };
 }
-function Lt() {
-  const { logWarning: e } = A();
-  function t(a, n, i) {
+function Rt() {
+  const { logWarning: e } = I();
+  function t(a, n, r) {
     let s = null;
-    return a.traverse((o) => {
-      o[n] === i && (s = o);
-    }), s || e(`Child with ${n} '${i}' not found.`), s;
+    return a.traverse((i) => {
+      i[n] === r && (s = i);
+    }), s || e(`Child with ${n} '${r}' not found.`), s;
   }
-  function r(a, n) {
+  function o(a, n) {
     return t(a, "name", n);
   }
   return {
     seek: t,
-    seekByName: r
+    seekByName: o
   };
 }
-var { logWarning: lt } = A();
-var ft = /^on[^a-z]/;
-var dt = (e) => ft.test(e);
-var z = null;
-var pt = {
-  createElement(e, t, r, a) {
-    if (e === "template" || at(e))
+var dt = /^on[^a-z]/;
+var pt = (e) => dt.test(e);
+var oe = null;
+var ie = {
+  GEOMETRY_VIA_PROP: "tres__geometryViaProp",
+  MATERIAL_VIA_PROP: "tres__materialViaProp"
+};
+var { logError: se } = I();
+var mt = {
+  createElement(e, t, o, a) {
+    var c, u;
+    if (a || (a = {}), a.args || (a.args = []), e === "template" || ot(e))
       return null;
-    let n;
-    if (a === null && (a = {}), a != null && a.args ? n = new N.value[e.replace("Tres", "")](...a.args) : n = new N.value[e.replace("Tres", "")](), n.isCamera) {
-      (!(a != null && a.position) || a != null && a.position.every((s) => s == 0)) && lt(
-        // eslint-disable-next-line max-len
-        "Camera is positioned at the center of the scene [0,0,0], if this is not intentional try setting a position if your scene seems empty 🤗"
-      );
-      const { pushCamera: i } = q();
-      i(n);
+    let n = e.replace("Tres", ""), r;
+    if (e === "primitive") {
+      (a == null ? void 0 : a.object) === void 0 && se("Tres primitives need a prop 'object'");
+      const f = a.object;
+      n = f.type, r = Object.assign(f, { type: n, attach: a.attach, primitive: true });
+    } else {
+      const f = he.value[n];
+      f || se(`${n} is not defined on the THREE namespace. Use extend to add it to the catalog.`), r = Object.assign(new f(...a.args), { type: n, attach: a.attach });
+    }
+    if (r.isCamera) {
+      a != null && a.position || r.position.set(3, 3, 3), a != null && a.lookAt || r.lookAt(0, 0, 0);
+      const { pushCamera: f } = N();
+      f(r);
     }
-    return (a == null ? void 0 : a.attach) === void 0 && (n.isMaterial ? n.attach = "material" : n.isBufferGeometry && (n.attach = "geometry")), n.events = {}, n;
+    (a == null ? void 0 : a.attach) === void 0 && (r.isMaterial ? r.attach = "material" : r.isBufferGeometry && (r.attach = "geometry"));
+    const { GEOMETRY_VIA_PROP: s, MATERIAL_VIA_PROP: i } = ie;
+    return r.isObject3D && ((c = a == null ? void 0 : a.material) != null && c.isMaterial && (r.userData[i] = true), (u = a == null ? void 0 : a.geometry) != null && u.isBufferGeometry && (r.userData[s] = true)), r.events = {}, r;
   },
-  insert(e, t, r) {
-    if (z === null && t.isScene && (z = t), t === null && (t = z), t != null && t.isObject3D && (e != null && e.isObject3D)) {
-      const a = r ? t.children.indexOf(r) : 0;
-      e.parent = t, t.children.splice(a, 0, e), e.dispatchEvent({ type: "added" });
-    } else
-      typeof (e == null ? void 0 : e.attach) == "string" && (e.__previousAttach = e[t == null ? void 0 : t.attach], t && (t[e.attach] = e));
+  insert(e, t) {
+    var o, a;
+    if (((e == null ? void 0 : e.__vnode.type) === "TresGroup" || (e == null ? void 0 : e.__vnode.type) === "TresObject3D") && t === null && !((a = (o = e == null ? void 0 : e.__vnode) == null ? void 0 : o.ctx) != null && a.asyncResolved)) {
+      oe = e;
+      return;
+    }
+    t || (t = oe), e != null && e.isObject3D && (t != null && t.isObject3D) ? (t.add(e), e.dispatchEvent({ type: "added" })) : typeof (e == null ? void 0 : e.attach) == "string" && (e.__previousAttach = e[t == null ? void 0 : t.attach], t && (t[e.attach] = e));
   },
   remove(e) {
-    if (!e)
-      return;
-    const t = e.parentNode;
-    t && t.removeChild(e);
+    var t, o;
+    if (e) {
+      if (e.isObject3D) {
+        const a = e, n = (r) => {
+          var c, u;
+          const { GEOMETRY_VIA_PROP: s, MATERIAL_VIA_PROP: i } = ie;
+          r.userData[i] || (c = r.material) == null || c.dispose(), r.userData[s] || (u = r.geometry) == null || u.dispose();
+        };
+        a.traverse((r) => n(r)), n(a);
+      }
+      (t = e.removeFromParent) == null || t.call(e), (o = e.dispose) == null || o.call(e);
+    }
   },
-  patchProp(e, t, r, a) {
+  patchProp(e, t, o, a) {
     if (e) {
-      let n = e, i = t;
-      const s = _(i);
-      let o = n == null ? void 0 : n[s];
-      if (e.parent || (e.parent = z), n.type === "BufferGeometry") {
+      let n = e, r = t, s = z(r), i = n == null ? void 0 : n[s];
+      if (n.type === "BufferGeometry") {
         n.setAttribute(
-          _(i),
+          z(r),
           new BufferAttribute(...a)
         );
         return;
       }
-      if (i.includes("-") && o === void 0) {
-        const l = i.split("-");
-        o = l.reduce((v, d) => v[_(d)], n), i = l.pop(), o != null && o.set || (n = l.reduce((v, d) => v[_(d)], n));
+      if (r.includes("-") && i === void 0) {
+        const u = r.split("-");
+        i = u.reduce((f, m) => f[z(m)], n), r = u.pop(), s = r.toLowerCase(), i != null && i.set || (n = u.reduce((f, m) => f[z(m)], n));
       }
-      dt(i) && (e.events[i] = a);
+      pt(r) && (e.events[r] = a);
       let c = a;
-      if (c === "" && (c = true), isFunction(o)) {
+      if (c === "" && (c = true), isFunction(i)) {
         Array.isArray(c) ? e[s](...c) : e[s](c);
         return;
       }
-      !(o != null && o.set) && !isFunction(o) ? n[s] = c : o.constructor === c.constructor && (o != null && o.copy) ? o == null || o.copy(c) : Array.isArray(c) ? o.set(...c) : !o.isColor && o.setScalar ? o.setScalar(c) : o.set(c);
+      !(i != null && i.set) && !isFunction(i) ? n[s] = c : i.constructor === c.constructor && (i != null && i.copy) ? i == null || i.copy(c) : Array.isArray(c) ? i.set(...c) : !i.isColor && i.setScalar ? i.setScalar(c) : i.set(c);
     }
   },
   parentNode(e) {
@@ -785,17 +804,17 @@ var pt = {
   cloneNode: () => void 0,
   insertStaticContent: () => void 0
 };
-var { createApp: mt } = createRenderer(pt);
-var vt = (e) => {
-  const t = mt(r);
-  function r() {
+var { createApp: vt } = createRenderer(mt);
+var gt = (e) => {
+  const t = vt(o);
+  function o() {
     return e && e.default ? e.default() : [];
   }
   return t;
 };
-ve(three_module_exports);
-var { logWarning: ht } = A();
-var gt = defineComponent({
+we(three_module_exports);
+var { logWarning: ht } = I();
+var wt = defineComponent({
   name: "TresScene",
   props: [
     "shadows",
@@ -812,45 +831,45 @@ var gt = defineComponent({
     "windowSize",
     "preset"
   ],
-  setup(e, { slots: t, expose: r }) {
+  setup(e, { slots: t, expose: o }) {
     e.physicallyCorrectLights === true && ht("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");
-    const a = ref(), n = ref(), i = new Scene(), { setState: s } = k();
-    s("scene", i), s("canvas", n), s("container", a);
-    const { pushCamera: o } = q();
-    o(new PerspectiveCamera()), onMounted(() => {
+    const a = ref(), n = ref(), r = new Scene(), { setState: s } = D();
+    s("scene", r), s("canvas", n), s("container", a);
+    const { pushCamera: i } = N();
+    i(new PerspectiveCamera()), onMounted(() => {
       c();
     }), onUnmounted(() => {
       s("renderer", null);
     });
     function c() {
-      const { renderer: d } = ot(e), { activeCamera: f } = q(), { onLoop: M } = we(), { raycaster: h2, pointer: C } = ut();
-      let g = null, p = null;
+      const { renderer: m } = st(e), { activeCamera: d } = N(), { onLoop: P } = Me(), { raycaster: g, pointer: R } = lt();
+      let w = null, p = null;
       watchEffect(() => {
-        f.value && h2.value.setFromCamera(C.value, f.value);
-      }), M(() => {
-        var b, y, O, w, T;
-        if (f.value && ((b = d.value) == null || b.render(i, f.value)), h2.value) {
-          const j = h2.value.intersectObjects(i.children);
-          j.length > 0 ? (p = j[0], g === null && ((O = (y = p.object.events).onPointerEnter) == null || O.call(y, p))) : g !== null && ((T = p == null ? void 0 : (w = p.object.events).onPointerLeave) == null || T.call(w, g), p = null), g = p;
+        d.value && g.value.setFromCamera(R.value, d.value);
+      }), P(() => {
+        var x, b, y, M, E, L, h2, T, C, O;
+        if (d.value && ((x = m.value) == null || x.render(r, d.value)), g.value) {
+          const B = g.value.intersectObjects(r.children);
+          B.length > 0 ? (p = B[0], w === null && ((M = (y = (b = p.object) == null ? void 0 : b.events) == null ? void 0 : y.onPointerEnter) == null || M.call(y, p)), (h2 = (L = (E = p.object) == null ? void 0 : E.events) == null ? void 0 : L.onPointerMove) == null || h2.call(L, p)) : w !== null && ((O = (C = (T = p == null ? void 0 : p.object) == null ? void 0 : T.events) == null ? void 0 : C.onPointerLeave) == null || O.call(C, w), p = null), w = p;
         }
       }), useEventListener(n.value, "click", () => {
-        var b, y;
-        p !== null && ((y = (b = p.object.events).onClick) == null || y.call(b, p));
+        var x, b, y;
+        p !== null && ((y = (b = (x = p.object) == null ? void 0 : x.events) == null ? void 0 : b.onClick) == null || y.call(b, p));
       });
     }
-    let l;
-    function v() {
-      l = vt(t), l.provide("useTres", k()), l.provide("extend", ve), l.mount(i);
+    let u;
+    function f() {
+      u = gt(t), u.provide("useTres", D()), u.provide("extend", we), u.mount(r);
     }
-    return v(), r({
-      scene: i
+    return f(), o({
+      scene: r
     }), () => h(
       h(
         "div",
         {
           ref: a,
-          "data-scene": i.uuid,
-          key: i.uuid,
+          "data-scene": r.uuid,
+          key: r.uuid,
           style: {
             position: "relative",
             width: "100%",
@@ -871,7 +890,7 @@ var gt = defineComponent({
             [
               h("canvas", {
                 ref: n,
-                "data-scene": i.uuid,
+                "data-scene": r.uuid,
                 style: {
                   display: "block",
                   width: "100%",
@@ -888,7 +907,7 @@ var gt = defineComponent({
     );
   }
 });
-var wt = defineComponent({
+var bt = defineComponent({
   name: "TresCanvas",
   props: [
     "shadows",
@@ -905,34 +924,34 @@ var wt = defineComponent({
     "windowSize",
     "preset"
   ],
-  setup(e, { slots: t, expose: r }) {
-    const a = ct();
-    return r(a), () => h(gt, e, t);
+  setup(e, { slots: t, expose: o }) {
+    const a = ft();
+    return o(a), () => h(wt, e, t);
   }
 });
-var St = {
+var Lt = {
   install(e) {
-    e.component("TresCanvas", wt);
+    e.component("TresCanvas", bt);
   }
 };
 
 export {
-  N,
-  ve,
-  Xe,
-  q,
+  he,
   we,
-  ot,
-  it,
-  Mt,
-  Ct,
+  Qe,
+  N,
+  Me,
+  st,
   ct,
-  k,
-  ut,
   Et,
-  A,
-  Lt,
-  wt,
-  St
+  Ct,
+  ft,
+  D,
+  lt,
+  Pt,
+  I,
+  Rt,
+  bt,
+  Lt
 };
-//# sourceMappingURL=chunk-ZAYNNKM4.js.map
+//# sourceMappingURL=chunk-DESKY23Y.js.map

docs/api/composables.md

@@ -78,7 +78,7 @@ console.log(isActive) // true
 The `useLoader` composable allows you to load assets using the [THREE.js loaders](https://threejs.org/docs/#manual/en/introduction/Loading-3D-models). It returns a promise with loaded asset.
 
 ```ts
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
+import { GLTFLoader } from 'three/addons/loaders/GLTFLoader'
 
 const { scene } = await useLoader(THREE.GLTFLoader, 'path/to/asset.gltf')
 ```

docs/examples/load-models.md

@@ -18,7 +18,7 @@ For a detailed explanation of how to use `useLoader`, check out the [useLoader](
 
 ```ts
 import { useLoader } from '@tresjs/core'
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
+import { GLTFLoader } from 'three/addons/loaders/GLTFLoader'
 
 const { scene } = await useLoader(GLTFLoader, '/models/AkuAku.gltf')
 ```

docs/examples/load-textures.md

@@ -16,7 +16,7 @@ For a detailed explanation of how to use `useLoader`, check out the [useLoader](
 
 ```ts
 import { useLoader } from '@tresjs/core'
-import { TextureLoader } from 'three/examples/jsm/loaders/TextureLoader'
+import { TextureLoader } from 'three/addons/loaders/TextureLoader'
 
 const texture = useLoader(TextureLoader, '/Rock035_2K_Color.jpg')
 ```

docs/examples/orbit-controls.md

@@ -4,29 +4,27 @@
 
 [OrbitControls](https://threejs.org/docs/index.html?q=orbit#examples/en/controls/OrbitControls) is a camera controller that allows you to orbit around a target. It's a great way to explore your scene.
 
-However, it is not part of the core of ThreeJS. So to use it you would need to import it from the `three/examples/jsm/controls/OrbitControls` module.
+However, it is not part of the core of ThreeJS. So to use it you would need to import it from the `three/addons/controls/OrbitControls` module.
 
 This creates a problem because **TresJS** automatically creates a catalog of the core of Three so you can use them as components.
 
-Fortunately, **TresJS** provides a way to extend the catalog of components. You can do it by using the `extend` method using the [useCatalogue](/api/composables#usecatalog) composable.
+Fortunately, **TresJS** provides a way to extend the catalog of components. You can do it by using the `extend` method from the core library.
 
 For more information about extending your TresJS catalog, refer to the [extending](/advanced/extending.md) section.
 
 ## Using OrbitControls
 
-To use `OrbitControls` you need to import it from the `three/examples/jsm/controls/OrbitControls` module.
+To use `OrbitControls` you need to import it from the `three/addons/controls/OrbitControls` module.
 
 ```js
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
+import { OrbitControls } from 'three/addons/controls/OrbitControls'
 ```
 
-Then you need to extend the catalogue of components using the `extend` method of the [useCatalogue](/api/composables#usecatalog) composable.
+Then you need to extend the catalogue of components using the `extend` method.
 
 ```js
-import { useCatalogue } from '@tresjs/core'
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
-
-const { extend } = useCatalogue()
+import { extend } from '@tresjs/core'
+import { OrbitControls } from 'three/addons/controls/OrbitControls'
 
 extend({ OrbitControls })
 ```
@@ -56,10 +54,9 @@ So the final code would be something like this:
 
 ```vue
 <script setup lang="ts">
-import { useCatalogue } from '@tresjs/core'
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
+import { extend } from '@tresjs/core'
+import { OrbitControls } from 'three/addons/controls/OrbitControls'
 
-const { extend } = useCatalogue()
 extend({ OrbitControls })
 
 const { state } = useThree()

docs/examples/text-3d.md

@@ -4,29 +4,27 @@
 
 <StackBlitzEmbed projectId="tresjs-text3d-cientos" />
 
-However, it is not part of the core of ThreeJS. So to use it you would need to import it from the `three/examples/jsm/controls/TextGeometry` module.
+However, it is not part of the core of ThreeJS. So to use it you would need to import it from the `three/addons/controls/TextGeometry` module.
 
 This creates a problem because **TresJS** automatically creates a catalog of the core of Three so you can use them as components.
 
-Fortunately, **TresJS** provides a way to extend the catalog of components. You can do it by using the `extend` method using the [useCatalogue](/api/composables#usecatalog) composable.
+Fortunately, **TresJS** provides a way to extend the catalog of components. You can do it by using the `extend` method from the core library.
 
 For more information about extending your TresJS catalog, refer to the [extending](/advanced/extending.md) section.
 
 ## Using TextGeometry
 
-To use `TextGeometry` you need to import it from the `three/examples/jsm/geometries/TextGeometry` module.
+To use `TextGeometry` you need to import it from the `three/addons/geometries/TextGeometry` module.
 
 ```js
-import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry'
+import { TextGeometry } from 'three/addons/geometries/TextGeometry'
 ```
 
-Then you need to extend the catalogue of components using the `extend` method of the [useCatalogue](/api/composables#usecatalog) composable.
+Then you need to extend the catalogue of components using the `extend` method.
 
 ```js
-import { useCatalogue } from '@tresjs/core'
-import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry'
-
-const { extend } = useCatalogue()
+import { extend } from '@tresjs/core'
+import { TextGeometry } from 'three/addons/geometries/TextGeometry'
 
 extend({ TextGeometry: TextGeometry })
 ```
@@ -91,10 +89,10 @@ So the final code would be something like this:
 
 ```vue
 <script setup lang="ts">
-import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry'
-import { FontLoader } from 'three/examples/jsm/loaders/FontLoader'
-import { useCatalogue, useTexture } from '/@/composables'
-const { extend } = useCatalogue()
+import { extend } from '@tresjs/core'
+import { TextGeometry } from 'three/addons/geometries/TextGeometry'
+import { FontLoader } from 'three/addons/loaders/FontLoader'
+import { useTexture } from '/@/composables'
 
 extend({ TextGeometry: TextGeometry })
 

docs/guide/migration-guide.md

@@ -83,3 +83,108 @@ You can now create a scene like this:
 ```
 
 To migrate your code, you can just remove the `<TresScene />` component and move the children to the `<TresCanvas />` component.
+
+### `useCatalog` is now deprecated
+
+The `useCatalog` function is now deprecated. You can now import the catalog directly from `@tresjs/core`
+
+You can read more about it here: [Extending](/advanced/extending.md)
+
+Change this:
+
+```ts {2,5,7}
+// Wrong ❌
+import { useCatalog } from '@tresjs/core'
+import { TextGeometry } from 'three/addons/geometries/TextGeometry'
+
+const { extend } = useCatalog()
+
+extend({ TextGeometry })
+```
+
+To this:
+
+```ts {2,6}
+// Correct ✅
+import { extend } from '@tresjs/core'
+import { TextGeometry } from 'three/addons/geometries/TextGeometry'
+
+// Add the element to the catalogue
+extend({ TextGeometry })
+```
+
+### Model's ref value `getModel` is now deprecated
+
+The `getModel` function is now deprecated. You can now use the `model` property directly.
+
+Change this:
+
+```vue {7,9-12}
+// Wrong ❌
+<script setup lang="ts">
+import { useGLTF } from '@tresjs/cientos'
+
+const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gltf', { draco: true })
+
+const modelRef = ref()
+
+watch(modelRef, ({ getModel }) => {
+  const model = getModel()
+  model.position.set(0, 0, 0)
+})
+</script>
+<template>
+  <primitive :object="nodes.MyModel" />
+</template>
+```
+
+To this:
+
+```vue {7,9-12}
+// Correct ✅
+<script setup lang="ts">
+import { useGLTF } from '@tresjs/cientos'
+
+const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gltf', { draco: true })
+
+const modelRef = ref()
+
+watch(modelRef, model => {
+  // Do something with the model
+  model.position.set(0, 0, 0)
+})
+</script>
+<template>
+  <primitive :object="nodes.MyModel" />
+</template>
+```
+
+### Cameras need to be before any control 🎥
+
+The `TresOrbitControls` component needs to be after the camera in the tree. This is because the controls need to know the camera to work.
+
+Read more about it here: [Troubleshooting](/guide/troubleshooting.md)
+
+Change this:
+
+```vue {3,5}
+// Wrong ❌
+<template>
+  <TresCanvas>
+    <TresOrbitControls />
+    <TresPerspectiveCamera />
+  </TresCanvas>
+</template>
+```
+
+To this:
+
+```vue {3,5}
+// Correct ✅
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera />
+    <TresOrbitControls />
+  </TresCanvas>
+</template>
+```