@tresjs/core - npm Package Compare versions

Comparing version 2.0.0-alpha.6 to 2.0.0-beta.0

dist/components/TresCanvas.d.ts

@@ -18,3 +18,6 @@ import { ShadowMapType, TextureEncoding, ToneMapping } from 'three';
 }
+/**
+ * Vue component for rendering a Tres component.
+ */
 export declare const TresCanvas: import("vue").DefineComponent<TresCanvasProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<TresCanvasProps>, {}>;
 export default TresCanvas;

dist/composables/useRenderer/index.d.ts

@@ -1,2 +0,2 @@
-import { MaybeComputedRef, MaybeElementRef } from '@vueuse/core';
+import { MaybeComputedRef } from '@vueuse/core';
 import { WebGLRendererParameters, WebGLRenderer, ShadowMapType } from 'three';
@@ -88,6 +88,5 @@ import type { TextureEncoding, ToneMapping } from 'three';
  * @param canvas
- * @param container
  * @param {UseRendererOptions} [options]
  */
-export declare function useRenderer(canvas: MaybeElementRef, container: MaybeElementRef, options: UseRendererOptions): {
+export declare function useRenderer(options: UseRendererOptions): {
     renderer: import("vue").ShallowRef<WebGLRenderer | undefined>;
@@ -94,0 +93,0 @@ isReady: import("vue").Ref<boolean>;

dist/composables/useTres/index.d.ts

@@ -92,2 +92,8 @@ import { Clock, EventDispatcher, Raycaster, Scene, Vector2, WebGLRenderer } from 'three';
 }
+export type UseTresReturn = {
+    state: TresState;
+    getState: (key: string) => void;
+    setState: (key: string, value: any) => void;
+    aspectRatio: ComputedRef<number>;
+};
 /**
@@ -101,3 +107,3 @@ * The Tres state.
  */
-export declare function useTres(): {
+export declare function useTresProvider(): {
     getState: (key: string) => any;
@@ -119,1 +125,2 @@ setState: (key: string, value: any) => void;
 };
+export declare const useTres: () => UseTresReturn;

dist/tres.js

 /**
  * name: @tresjs/core
- * version: v2.0.0-alpha.6
+ * version: v2.0.0-beta.0
  * (c) 2023
@@ -8,23 +8,23 @@ * description: Declarative ThreeJS using Vue Components
  */
-import { ref as M, watchEffect as xe, toRef as Pe, shallowRef as re, toRefs as oe, computed as ie, watch as O, shallowReactive as Te, createRenderer as Re, defineComponent as ke, onUnmounted as Ae, h as P } from "vue";
-import * as se from "three";
-import { MathUtils as Oe, PerspectiveCamera as z, OrthographicCamera as je, Clock as ue, Color as D, sRGBEncoding as Be, ACESFilmicToneMapping as We, PCFSoftShadowMap as _e, PCFShadowMap as ze, LinearEncoding as Z, NoToneMapping as ee, WebGLRenderer as De, LoadingManager as Fe, TextureLoader as Ie, Raycaster as He, Vector2 as $e, Mesh as Ge, BufferAttribute as Ne } from "three";
-import { createEventHook as G, useRafFn as Ue, resolveUnref as c, useWindowSize as Ve, useElementSize as qe, useDevicePixelRatio as Ye, unrefElement as F, useEventListener as Je, isFunction as te } from "@vueuse/core";
-const $ = M({ uuid: Oe.generateUUID() }), ce = (e) => void Object.assign($.value, e);
-var Ke = /* @__PURE__ */ ((e) => (e.Perspective = "Perspective", e.Orthographic = "Orthographic", e))(Ke || {});
-const Xe = 45;
-let y;
-function le() {
-  const { state: e, setState: t, aspectRatio: o } = L();
-  function r(a = "Perspective", s) {
-    var f, l, p;
-    if (a === "Perspective") {
-      const { near: m, far: w, fov: v } = s || {
+import { ref as M, watchEffect as oe, toRef as Re, shallowRef as ie, toRefs as se, computed as ce, watch as z, shallowReactive as ke, provide as Ae, inject as Oe, createRenderer as je, defineComponent as ue, onMounted as _e, onUnmounted as Be, h as E } from "vue";
+import * as fe from "three";
+import { MathUtils as De, PerspectiveCamera as O, OrthographicCamera as ze, Clock as le, Color as W, sRGBEncoding as We, ACESFilmicToneMapping as Fe, PCFSoftShadowMap as Ie, PCFShadowMap as He, LinearEncoding as ee, NoToneMapping as te, WebGLRenderer as Ue, LoadingManager as $e, TextureLoader as Ge, Raycaster as Ne, Vector2 as Ve, Mesh as qe, BufferAttribute as Ye } from "three";
+import { createEventHook as $, useRafFn as Ke, resolveUnref as f, useWindowSize as Xe, useElementSize as Je, useDevicePixelRatio as Qe, unrefElement as F, useEventListener as Ze, isFunction as ne } from "@vueuse/core";
+const H = M({ uuid: De.generateUUID() }), de = (e) => void Object.assign(H.value, e);
+var et = /* @__PURE__ */ ((e) => (e.Perspective = "Perspective", e.Orthographic = "Orthographic", e))(et || {});
+const tt = 45;
+let x;
+function U() {
+  const { state: e, setState: t, aspectRatio: r } = T();
+  function a(o = "Perspective", c) {
+    var u, l, p;
+    if (o === "Perspective") {
+      const { near: d, far: w, fov: v } = c || {
         near: 0.1,
         far: 1e3,
-        fov: Xe
+        fov: tt
       };
-      y = new z(v, ((f = e.aspectRatio) == null ? void 0 : f.value) || window.innerWidth / window.innerHeight, m, w), (l = e.cameras) == null || l.push(y);
+      x = new O(v, ((u = e.aspectRatio) == null ? void 0 : u.value) || window.innerWidth / window.innerHeight, d, w), (l = e.cameras) == null || l.push(x);
     } else {
-      const { left: m, right: w, top: v, bottom: g, near: S, far: x } = s || {
+      const { left: d, right: w, top: v, bottom: b, near: g, far: P } = c || {
         left: -100,
@@ -37,186 +37,185 @@ right: 100,
       };
-      y = new je(m, w, v, g, S, x), (p = e.cameras) == null || p.push(y);
+      x = new ze(d, w, v, b, g, P), (p = e.cameras) == null || p.push(x);
     }
-    return e.camera = y, t("camera", e.camera), y;
+    return e.camera = x, t("camera", e.camera), x;
   }
   function n() {
-    var a;
-    e.camera instanceof z && e.aspectRatio && (e.camera.aspect = e.aspectRatio.value), (a = e.camera) == null || a.updateProjectionMatrix();
+    var o;
+    e.camera instanceof O && e.aspectRatio && (e.camera.aspect = e.aspectRatio.value), (o = e.camera) == null || o.updateProjectionMatrix();
   }
-  function i(a) {
-    var s;
-    (s = e.cameras) == null || s.push(a), a instanceof z && e.aspectRatio && (a.aspect = e.aspectRatio.value), a.updateProjectionMatrix(), t("camera", a);
+  function i(o) {
+    var c;
+    (c = e.cameras) == null || c.push(o), o instanceof O && e.aspectRatio && (o.aspect = e.aspectRatio.value), o.updateProjectionMatrix(), t("camera", o);
   }
-  function u() {
+  function s() {
     e.cameras = [];
   }
-  return xe(() => {
-    o != null && o.value && n();
+  return oe(() => {
+    r != null && r.value && n();
   }), {
-    activeCamera: Pe(e, "camera"),
-    createCamera: r,
+    activeCamera: Re(e, "camera"),
+    createCamera: a,
     updateCamera: n,
     pushCamera: i,
-    clearCameras: u
+    clearCameras: s
   };
 }
-const fe = G(), pe = G(), N = G(), b = new ue();
-let j = 0, B = 0;
-const { pause: Qe, resume: Ze, isActive: et } = Ue(
+const pe = $(), me = $(), G = $(), S = new le();
+let j = 0, _ = 0;
+const { pause: nt, resume: at, isActive: rt } = Ke(
   () => {
-    fe.trigger({ delta: j, elapsed: B, clock: b }), pe.trigger({ delta: j, elapsed: B, clock: b }), N.trigger({ delta: j, elapsed: B, clock: b });
+    pe.trigger({ delta: j, elapsed: _, clock: S }), me.trigger({ delta: j, elapsed: _, clock: S }), G.trigger({ delta: j, elapsed: _, clock: S });
   },
   { immediate: !1 }
 );
-N.on(() => {
-  j = b.getDelta(), B = b.getElapsedTime();
+G.on(() => {
+  j = S.getDelta(), _ = S.getElapsedTime();
 });
-function U() {
+function N() {
   return {
-    onBeforeLoop: fe.on,
-    onLoop: pe.on,
-    onAfterLoop: N.on,
-    pause: Qe,
-    resume: Ze,
-    isActive: et
+    onBeforeLoop: pe.on,
+    onLoop: me.on,
+    onAfterLoop: G.on,
+    pause: nt,
+    resume: at,
+    isActive: rt
   };
 }
-function tt(e) {
-  return e instanceof D ? e : Array.isArray(e) ? new D(...e) : new D(e);
+function ot(e) {
+  return e instanceof W ? e : Array.isArray(e) ? new W(...e) : new W(e);
 }
 const I = {
   realistic: {
-    outputEncoding: Be,
-    toneMapping: We,
+    outputEncoding: We,
+    toneMapping: Fe,
     toneMappingExposure: 3,
     shadowMap: {
       enabled: !0,
-      type: _e
+      type: Ie
     }
   }
-}, de = (e, t) => {
-  for (const o of Object.keys(t))
-    t[o] instanceof Object && Object.assign(t[o], de(e[o], t[o]));
+}, ve = (e, t) => {
+  for (const r of Object.keys(t))
+    t[r] instanceof Object && Object.assign(t[r], ve(e[r], t[r]));
   return Object.assign(e || {}, t), e;
-}, 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", at = /* @__PURE__ */ rt(nt);
-function T(e) {
-  return e.replace(/-([a-z])/g, (t, o) => o.toUpperCase());
+}, it = "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", st = /* @__PURE__ */ ct(it);
+function R(e) {
+  return e.replace(/-([a-z])/g, (t, r) => r.toUpperCase());
 }
-function rt(e, t) {
-  const o = /* @__PURE__ */ Object.create(null), r = e.split(",");
-  for (let n = 0; n < r.length; n++)
-    o[r[n]] = !0;
-  return t ? (n) => !!o[n.toLowerCase()] : (n) => !!o[n];
+function ct(e, t) {
+  const r = /* @__PURE__ */ Object.create(null), a = e.split(",");
+  for (let n = 0; n < a.length; n++)
+    r[a[n]] = !0;
+  return t ? (n) => !!r[n.toLowerCase()] : (n) => !!r[n];
 }
-const d = re(), H = M(!1);
-function ot(e, t, o) {
-  var Q;
-  const {
-    alpha: r = !0,
+function ut(e) {
+  var Q, Z;
+  const t = ie(), r = M(!1), {
+    alpha: a = !0,
     antialias: n = !0,
     depth: i,
-    logarithmicDepthBuffer: u,
-    failIfMajorPerformanceCaveat: a,
-    precision: s,
-    premultipliedAlpha: f,
+    logarithmicDepthBuffer: s,
+    failIfMajorPerformanceCaveat: o,
+    precision: c,
+    premultipliedAlpha: u,
     stencil: l,
     shadows: p = !1,
-    shadowMapType: m = ze,
+    shadowMapType: d = He,
     physicallyCorrectLights: w = !1,
     useLegacyLights: v = !1,
-    outputEncoding: g = Z,
-    toneMapping: S = ee,
-    toneMappingExposure: x = 1,
-    context: ge = void 0,
-    powerPreference: we = "default",
-    preserveDrawingBuffer: he = !1,
-    clearColor: C,
+    outputEncoding: b = ee,
+    toneMapping: g = te,
+    toneMappingExposure: P = 1,
+    context: be = void 0,
+    powerPreference: ye = "default",
+    preserveDrawingBuffer: xe = !1,
+    clearColor: L,
     windowSize: V = !1,
-    preset: ye = void 0
-  } = oe(o), { setState: W } = L(), { width: q, height: Y } = c(V) ? Ve() : qe(t), { logError: Me, logWarning: Ce } = E(), { pixelRatio: J } = Ye(), { pause: be, resume: Le } = U(), _ = ie(() => q.value / Y.value);
-  !c(V) && ((Q = t == null ? void 0 : t.value) == null ? void 0 : Q.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.
+    preset: Me = void 0
+  } = se(e), { state: h, setState: B } = T(), { width: q, height: Y } = f(V) ? Xe() : Je(h.container), { logError: Ce, logWarning: Le } = C(), { pixelRatio: K } = Qe(), { pause: Ee, resume: Se } = N(), D = ce(() => q.value / Y.value);
+  !f(V) && ((Z = (Q = h.container) == null ? void 0 : Q.value) == null ? void 0 : Z.offsetHeight) === 0 && Le(`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 K = () => {
-    d.value && (d.value.setSize(q.value, Y.value), d.value.setPixelRatio(Math.min(J.value, 2)));
-  }, X = () => {
-    if (!d.value)
+  const X = () => {
+    t.value && (t.value.setSize(q.value, Y.value), t.value.setPixelRatio(Math.min(K.value, 2)));
+  }, J = () => {
+    if (!t.value)
       return;
-    const h = c(ye);
-    if (h) {
-      h in I || Me("Renderer Preset must be one of these: " + Object.keys(I).join(", ")), de(d.value, I[h]);
+    const y = f(Me);
+    if (y) {
+      y in I || Ce("Renderer Preset must be one of these: " + Object.keys(I).join(", ")), ve(t.value, I[y]);
       return;
     }
-    d.value.shadowMap.enabled = c(p), d.value.shadowMap.type = c(m), d.value.toneMapping = c(S) || ee, d.value.toneMappingExposure = c(x), d.value.outputEncoding = c(g) || Z, C != null && C.value && d.value.setClearColor(tt(c(C))), d.value.useLegacyLights = c(v);
-  }, Ee = () => {
-    const h = F(e);
-    h && (d.value = new De({
-      canvas: h,
-      alpha: c(r),
-      antialias: c(n),
-      context: c(ge),
-      depth: c(i),
-      failIfMajorPerformanceCaveat: c(a),
-      logarithmicDepthBuffer: c(u),
-      powerPreference: c(we),
-      precision: c(s),
-      stencil: c(l),
-      preserveDrawingBuffer: c(he),
-      premultipliedAlpha: c(f)
-    }), W("renderer", d.value), W("clock", new ue()), W("aspectRatio", _), X(), K(), Le(), H.value = !0);
-  }, Se = () => {
-    d.value && (d.value.dispose(), d.value = void 0, H.value = !1, be());
+    t.value.shadowMap.enabled = f(p), t.value.shadowMap.type = f(d), t.value.toneMapping = f(g) || te, t.value.toneMappingExposure = f(P), t.value.outputEncoding = f(b) || ee, L != null && L.value && t.value.setClearColor(ot(f(L))), t.value.useLegacyLights = f(v);
+  }, Te = () => {
+    const y = F(h.canvas);
+    y && (t.value = new Ue({
+      canvas: y,
+      alpha: f(a),
+      antialias: f(n),
+      context: f(be),
+      depth: f(i),
+      failIfMajorPerformanceCaveat: f(o),
+      logarithmicDepthBuffer: f(s),
+      powerPreference: f(ye),
+      precision: f(c),
+      stencil: f(l),
+      preserveDrawingBuffer: f(xe),
+      premultipliedAlpha: f(u)
+    }), B("renderer", t.value), B("clock", new le()), B("aspectRatio", D), J(), X(), Se(), r.value = !0);
+  }, Pe = () => {
+    t.value && (t.value.dispose(), t.value = void 0, r.value = !1, Ee());
   };
-  return O([_, J], K), O(
-    [p, m, g, v, S, x, C],
-    X
-  ), O(
-    () => [e, t],
+  return z([D, K], X), z(
+    [p, d, b, v, g, P, L],
+    J
+  ), z(
+    () => [h.canvas, h.container],
     () => {
-      F(e) && F(t) && Ee();
+      F(h.canvas) && F(h.container) && Te();
     },
     { immediate: !0, deep: !0 }
   ), {
-    renderer: d,
-    isReady: H,
-    dispose: Se,
-    aspectRatio: _
+    renderer: t,
+    isReady: r,
+    dispose: Pe,
+    aspectRatio: D
   };
 }
-const me = (e) => !!e && e.constructor === Array;
-function it(e) {
+const ge = (e) => !!e && e.constructor === Array;
+function ft(e) {
   const t = { nodes: {}, materials: {} };
-  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);
+  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);
   }), t;
 }
-async function yt(e, t, o, r, n) {
-  const { logError: i } = E(), u = new e();
-  n && n(u), o && o(u);
-  const s = (Array.isArray(t) ? t : [t]).map(
-    (f) => new Promise((l, p) => {
-      u.load(
-        f,
-        (m) => {
-          m.scene && Object.assign(m, it(m.scene)), l(m);
+async function Et(e, t, r, a, n) {
+  const { logError: i } = C(), s = new e();
+  n && n(s), r && r(s);
+  const c = (Array.isArray(t) ? t : [t]).map(
+    (u) => new Promise((l, p) => {
+      s.load(
+        u,
+        (d) => {
+          d.scene && Object.assign(d, ft(d.scene)), l(d);
         },
-        r,
-        (m) => p(i("[useLoader] - Failed to load resource", m))
+        a,
+        (d) => p(i("[useLoader] - Failed to load resource", d))
       );
     })
   );
-  return me(t) ? await Promise.all(s) : await s[0];
+  return ge(t) ? await Promise.all(c) : await c[0];
 }
-async function Mt(e) {
-  const t = new Fe(), o = new Ie(t), r = (n) => new Promise((i, u) => {
-    o.load(
+async function St(e) {
+  const t = new $e(), r = new Ge(t), a = (n) => new Promise((i, s) => {
+    r.load(
       n,
-      (a) => i(a),
+      (o) => i(o),
       () => null,
       () => {
-        u(new Error("[useTextures] - Failed to load texture"));
+        s(new Error("[useTextures] - Failed to load texture"));
       }
     );
   });
-  if (me(e)) {
-    const n = await Promise.all(e.map((i) => r(i)));
+  if (ge(e)) {
+    const n = await Promise.all(e.map((i) => a(i)));
     return e.length > 1 ? n : n[0];
@@ -227,6 +226,6 @@ } else {
       displacementMap: i,
-      normalMap: u,
-      roughnessMap: a,
-      metalnessMap: s,
-      aoMap: f,
+      normalMap: s,
+      roughnessMap: o,
+      metalnessMap: c,
+      aoMap: u,
       alphaMap: l,
@@ -236,55 +235,66 @@ matcap: p
     return {
-      map: n ? await r(n) : null,
-      displacementMap: i ? await r(i) : null,
-      normalMap: u ? await r(u) : null,
-      roughnessMap: a ? await r(a) : null,
-      metalnessMap: s ? await r(s) : null,
-      aoMap: f ? await r(f) : null,
-      alphaMap: l ? await r(l) : null,
-      matcap: p ? await r(p) : null
+      map: n ? await a(n) : null,
+      displacementMap: i ? await a(i) : null,
+      normalMap: s ? await a(s) : null,
+      roughnessMap: o ? await a(o) : null,
+      metalnessMap: c ? await a(c) : null,
+      aoMap: u ? await a(u) : null,
+      alphaMap: l ? await a(l) : null,
+      matcap: p ? await a(p) : null
     };
   }
 }
-const st = {
-  camera: void 0,
-  cameras: [],
-  scene: void 0,
-  renderer: void 0,
-  aspectRatio: ie(() => window.innerWidth / window.innerHeight)
-}, R = Te(st);
-function L() {
-  function e(o) {
-    return R[o];
+const 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 lt() {
+  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();
+}
+const he = Symbol();
+function dt() {
+  const e = ke({
+    uuid: lt(),
+    camera: void 0,
+    cameras: [],
+    scene: void 0,
+    renderer: void 0,
+    aspectRatio: ce(() => window.innerWidth / window.innerHeight)
+  });
+  function t(n) {
+    return e[n];
   }
-  function t(o, r) {
-    R[o] = r;
+  function r(n, i) {
+    e[n] = i;
   }
-  return {
-    state: R,
-    ...oe(R),
-    getState: e,
-    setState: t
+  const a = {
+    state: e,
+    ...se(e),
+    getState: t,
+    setState: r
   };
+  return Ae(he, a), a;
 }
-const ne = re(new He()), k = M(new $e()), ut = M(null);
-function ve() {
-  const { setState: e } = L();
-  e("raycaster", ne.value), e("pointer", k), e("currentInstance", ut);
-  function t(o) {
-    k.value.x = o.clientX / window.innerWidth * 2 - 1, k.value.y = -(o.clientY / window.innerHeight) * 2 + 1;
+const T = () => {
+  const e = Oe(he), { logError: t } = C();
+  return e || t("useTres must be used together with useTresProvider"), e;
+}, ae = ie(new Ne()), k = M(new Ve()), pt = M(null);
+function we() {
+  const { setState: e } = T();
+  e("raycaster", ae.value), e("pointer", k), e("currentInstance", pt);
+  function t(r) {
+    k.value.x = r.clientX / window.innerWidth * 2 - 1, k.value.y = -(r.clientY / window.innerHeight) * 2 + 1;
   }
   return window.addEventListener("pointermove", t), {
-    raycaster: ne,
+    raycaster: ae,
     pointer: k
   };
 }
-const Ct = !0, ae = "[TresJS ▲ ■ ●] ";
-function E() {
-  function e(r, n) {
-    console.error(`${ae} ${r}`, n || "");
+const Tt = !0, re = "[TresJS ▲ ■ ●] ";
+function C() {
+  function e(a, n) {
+    console.error(`${re} ${a}`, n || "");
   }
-  function t(r) {
-    console.warn(`${ae} ${r}`);
+  function t(a) {
+    console.warn(`${re} ${a}`);
   }
-  function o(r, n) {
+  function r(a, n) {
   }
@@ -294,23 +304,23 @@ return {
     logWarning: t,
-    logMessage: o
+    logMessage: r
   };
 }
-function bt() {
-  const { logWarning: e } = E();
-  function t(r, n, i) {
-    let u = null;
-    return r.traverse((a) => {
-      a[n] === i && (u = a);
-    }), u || e(`Child with ${n} '${i}' not found.`), u;
+function Pt() {
+  const { logWarning: e } = C();
+  function t(a, n, i) {
+    let s = null;
+    return a.traverse((o) => {
+      o[n] === i && (s = o);
+    }), s || e(`Child with ${n} '${i}' not found.`), s;
   }
-  function o(r, n) {
-    return t(r, "name", n);
+  function r(a, n) {
+    return t(a, "name", n);
   }
   return {
     seek: t,
-    seekByName: o
+    seekByName: r
   };
 }
-const { logWarning: ct } = E();
-function lt(e) {
+const { logWarning: mt } = C();
+function vt(e) {
   for (const t in e)
@@ -322,36 +332,38 @@ if (t.indexOf("on") === 0)
 let A = null;
-const ft = {
-  createElement(e, t, o, r) {
-    if (e === "template" || at(e))
+const gt = {
+  createElement(e, t, r, a) {
+    if (e === "template" || st(e))
       return null;
     let n;
-    if (r === null && (r = {}), r != null && r.args ? n = new $.value[e.replace("Tres", "")](...r.args) : n = new $.value[e.replace("Tres", "")](), n.isCamera) {
-      (!(r != null && r.position) || r != null && r.position.every((u) => u == 0)) && ct(
+    if (a === null && (a = {}), a != null && a.args ? n = new H.value[e.replace("Tres", "")](...a.args) : n = new H.value[e.replace("Tres", "")](), n.isCamera) {
+      (!(a != null && a.position) || a != null && a.position.every((s) => s == 0)) && mt(
         // 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 } = le();
+      const { pushCamera: i } = U();
       i(n);
     }
-    return (r == null ? void 0 : r.attach) === void 0 && (n.isMaterial ? n.attach = "material" : n.isBufferGeometry && (n.attach = "geometry")), n;
+    return (a == null ? void 0 : a.attach) === void 0 && (n.isMaterial ? n.attach = "material" : n.isBufferGeometry && (n.attach = "geometry")), n;
   },
-  insert(e, t, o) {
+  insert(e, t, r) {
     if (A === null && t.isScene && (A = t), t === null && (t = A), t != null && t.isObject3D && (e != null && e.isObject3D)) {
-      const a = o ? t.children.indexOf(o) : 0;
-      e.parent = t, t.children.splice(a, 0, e), e.dispatchEvent({ type: "added" });
+      const s = r ? t.children.indexOf(r) : 0;
+      e.parent = t, t.children.splice(s, 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));
-    const { onLoop: r } = U();
+    const { onLoop: a } = N();
     let n = null, i = null;
-    const { raycaster: u } = ve();
-    e && e instanceof Ge && lt(e) && (r(() => {
-      var a, s, f;
-      if (t != null && t.children && e && u) {
-        const l = u.value.intersectObjects(t.children);
-        l.length > 0 && l[0].object.uuid === e.uuid ? (i = l[0], (n === null || n.object.uuid !== (i == null ? void 0 : i.object.uuid)) && ((a = e.onPointerEnter) == null || a.call(e, i)), (s = e.onPointerMove) == null || s.call(e, i)) : (i = null, n !== null && ((f = e.onPointerLeave) == null || f.call(e, n))), n = i;
-      }
-    }), Je(window, "click", () => {
-      var a;
-      i !== null && ((a = e.onClick) == null || a.call(e, i));
-    }));
+    if (e && e instanceof qe && vt(e)) {
+      const { raycaster: s } = we();
+      a(() => {
+        var o, c, u;
+        if (t != null && t.children && e && s) {
+          const l = s.value.intersectObjects(t.children);
+          l.length > 0 && l[0].object.uuid === e.uuid ? (i = l[0], (n === null || n.object.uuid !== (i == null ? void 0 : i.object.uuid)) && ((o = e.onPointerEnter) == null || o.call(e, i)), (c = e.onPointerMove) == null || c.call(e, i)) : (i = null, n !== null && ((u = e.onPointerLeave) == null || u.call(e, n))), n = i;
+        }
+      }), Ze(window, "click", () => {
+        var o;
+        i !== null && ((o = e.onClick) == null || o.call(e, i));
+      });
+    }
   },
@@ -364,24 +376,24 @@ remove(e) {
   },
-  patchProp(e, t, o, r) {
+  patchProp(e, t, r, a) {
     if (e) {
       let n = e, i = t;
-      const u = T(i);
-      let a = n == null ? void 0 : n[u];
+      const s = R(i);
+      let o = n == null ? void 0 : n[s];
       if (e.parent || (e.parent = A), n.type === "BufferGeometry") {
         n.setAttribute(
-          T(i),
-          new Ne(...r)
+          R(i),
+          new Ye(...a)
         );
         return;
       }
-      if (i.includes("-") && a === void 0) {
-        const f = i.split("-");
-        a = f.reduce((l, p) => l[T(p)], n), i = f.pop(), a != null && a.set || (n = f.reduce((l, p) => l[T(p)], n));
+      if (i.includes("-") && o === void 0) {
+        const u = i.split("-");
+        o = u.reduce((l, p) => l[R(p)], n), i = u.pop(), o != null && o.set || (n = u.reduce((l, p) => l[R(p)], n));
       }
-      let s = r;
-      if (s === "" && (s = !0), te(a)) {
-        Array.isArray(s) ? e[u](...s) : e[u](s);
+      let c = a;
+      if (c === "" && (c = !0), ne(o)) {
+        Array.isArray(c) ? e[s](...c) : e[s](c);
         return;
       }
-      !(a != null && a.set) && !te(a) ? n[u] = s : a.constructor === s.constructor && (a != null && a.copy) ? a == null || a.copy(s) : Array.isArray(s) ? a.set(...s) : !a.isColor && a.setScalar ? a.setScalar(s) : a.set(s);
+      !(o != null && o.set) && !ne(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);
     }
@@ -401,5 +413,5 @@ },
   insertStaticContent: () => void 0
-}, { createApp: pt } = Re(ft), dt = (e) => {
-  const t = pt(o);
-  function o() {
+}, { createApp: ht } = je(gt), wt = (e) => {
+  const t = ht(r);
+  function r() {
     return e && e.default ? e.default() : [];
@@ -409,5 +421,5 @@ }
 };
-ce(se);
-const { logWarning: mt } = E(), vt = ke({
-  name: "TresCanvas",
+de(fe);
+const { logWarning: bt } = C(), yt = ue({
+  name: "TresScene",
   props: [
@@ -428,27 +440,32 @@ "shadows",
   ],
-  setup(e, { slots: t, expose: o }) {
-    e.physicallyCorrectLights === !0 && mt("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");
-    const r = M(), n = M(), i = new se.Scene(), { setState: u } = L();
-    u("scene", i), Ae(() => {
-      u("renderer", null);
+  setup(e, { slots: t, expose: r }) {
+    e.physicallyCorrectLights === !0 && bt("physicallyCorrectLights is deprecated, useLegacyLights is now false by default");
+    const a = M(), n = M(), i = new fe.Scene(), { setState: s } = T();
+    s("scene", i), s("canvas", n), s("container", a);
+    const { pushCamera: o } = U();
+    o(new O()), _e(() => {
+      c();
+    }), Be(() => {
+      s("renderer", null);
     });
-    function a() {
-      const { renderer: l } = ot(n, r, e), { activeCamera: p } = le(), { onLoop: m } = U(), { raycaster: w, pointer: v } = ve();
-      m(() => {
+    function c() {
+      const { renderer: p } = ut(e), { activeCamera: d } = U(), { onLoop: w } = N(), { raycaster: v, pointer: b } = we();
+      oe(() => {
+        d.value && v.value.setFromCamera(b.value, d.value);
+      }), w(() => {
         var g;
-        p.value && (w.value.setFromCamera(v.value, p.value), (g = l.value) == null || g.render(i, p.value));
+        d.value && ((g = p.value) == null || g.render(i, d.value));
       });
     }
-    O(n, a);
-    let s;
-    function f() {
-      s = dt(t), s.provide("useTres", L()), s.provide("extend", ce), s.mount(i);
+    let u;
+    function l() {
+      u = wt(t), u.provide("useTres", T()), u.provide("extend", de), u.mount(i);
     }
-    return f(), o({
+    return l(), r({
       scene: i
-    }), () => P(
-      P(
+    }), () => E(
+      E(
         "div",
         {
-          ref: r,
+          ref: a,
           "data-scene": i.uuid,
@@ -465,3 +482,3 @@ key: i.uuid,
         [
-          P(
+          E(
             "div",
@@ -475,3 +492,3 @@ {
             [
-              P("canvas", {
+              E("canvas", {
                 ref: n,
@@ -494,24 +511,45 @@ "data-scene": i.uuid,
   }
-}), Lt = {
+}), xt = ue({
+  name: "TresCanvas",
+  props: [
+    "shadows",
+    "shadowMapType",
+    "physicallyCorrectLights",
+    "useLegacyLights",
+    "outputEncoding",
+    "toneMapping",
+    "toneMappingExposure",
+    "context",
+    "powerPreference",
+    "preserveDrawingBuffer",
+    "clearColor",
+    "windowSize",
+    "preset"
+  ],
+  setup(e, { slots: t }) {
+    return dt(), () => E(yt, e, t);
+  }
+}), Rt = {
   install(e) {
-    e.component("TresCanvas", vt);
+    e.component("TresCanvas", xt);
   }
 };
 export {
-  Ke as CameraType,
-  vt as TresCanvas,
-  $ as catalogue,
-  Lt as default,
-  ce as extend,
-  Ct as isProd,
-  it as trasverseObjects,
-  le as useCamera,
-  yt as useLoader,
-  E as useLogger,
-  ve as useRaycaster,
-  U as useRenderLoop,
-  ot as useRenderer,
-  bt as useSeek,
-  Mt as useTexture,
-  L as useTres
+  et as CameraType,
+  xt as TresCanvas,
+  H as catalogue,
+  Rt as default,
+  de as extend,
+  Tt as isProd,
+  ft as trasverseObjects,
+  U as useCamera,
+  Et as useLoader,
+  C as useLogger,
+  we as useRaycaster,
+  N as useRenderLoop,
+  ut as useRenderer,
+  Pt as useSeek,
+  St as useTexture,
+  T as useTres,
+  dt as useTresProvider
 };

dist/utils/normalize.d.ts

@@ -1,2 +0,2 @@
-import { Vector3, Color } from 'three';
+import { Vector3, Color, ColorRepresentation } from 'three';
 export type SizeFlexibleParams = number[] | {
@@ -17,2 +17,2 @@ width: number;
 export declare function normalizeVectorFlexibleParam(value: VectorFlexibleParams): Array<number>;
-export declare function normalizeColor(value: Color | Array<number> | string | number): Color;
+export declare function normalizeColor(value: Color | Array<number> | string | number | ColorRepresentation): Color;

package.json

 {
   "name": "@tresjs/core",
   "description": "Declarative ThreeJS using Vue Components",
-  "version": "2.0.0-alpha.6",
+  "version": "2.0.0-beta.0",
   "type": "module",
@@ -43,3 +43,3 @@ "author": "Alvaro Saburido <[e-mail]> (https://github.com/alvarosabu/)",
     "preview": "vite preview",
-    "playground": "cd playground && nr dev",
+    "playground": "cd playground && npm run dev",
     "test": "vitest",
@@ -60,2 +60,3 @@ "test:ci": "vitest run",
   "dependencies": {
+    "-": "^0.0.1",
     "@alvarosabu/utils": "^2.3.0",
@@ -66,2 +67,3 @@ "@vueuse/core": "^9.13.0"
     "@alvarosabu/prettier-config": "^1.2.0",
+    "@huntersofbook/plausible-vue": "^1.0.0",
     "@release-it/conventional-changelog": "^5.1.1",
@@ -93,2 +95,3 @@ "@stackblitz/sdk": "^1.8.1",
     "unplugin": "^1.3.1",
+    "unplugin-vue-components": "^0.24.1",
     "vite": "^4.1.4",
@@ -95,0 +98,0 @@ "vite-plugin-banner": "^0.7.0",

README.md

@@ -20,2 +20,9 @@ # @tresjs/core ▲ ■ ●
 
+## Ecosystem
+
+| Package                     | Version                                                                                           |
+| --------------------------- | :------------------------------------------------------------------------------------------------ |
+| [Tres](packages/tres)       | ![tres version](https://img.shields.io/npm/v/@tresjs/core/alpha.svg?label=%20&color=%2382DBCA)    |
+| [Cientos](packages/cientos) | ![tres version](https://img.shields.io/npm/v/@tresjs/cientos/alpha.svg?label=%20&color=%23f19b00) |
+
 ## Contribution
@@ -25,3 +32,2 @@
 
-
 ### Setup
@@ -69,2 +75,2 @@
 
-Be the first to support this project [here](https://github.com/sponsors/alvarosabu) ☺️
+Be the first to support this project [here](https://github.com/sponsors/alvarosabu) ☺️

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

78983

increased by9.97%

Number of package files

27

increased by3.85%

Lines of code

1546

increased by5.53%

Number of lines in readme file

74

increased by10.45%

Worsened metrics

Dependency count

5

increased by25%

Dev dependency count

38

increased by5.56%

Dependency changes

• + Added-@^0.0.1

• + Added-@0.0.1(transitive)