@tresjs/cientos 1.7.0 → 2.0.0-alpha.0

package/README.md

@@ -0,0 +1,44 @@
+![repository-banner.png](https://tresjs.org/cientos-banner.png)
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@tresjs/core"><img src="https://img.shields.io/npm/v/@tresjs/core?color=%2382DBCA" alt="npm package"></a>
+  <a href="https://nodejs.org/en/about/releases/"><img src="https://img.shields.io/node/v/@tresjs/core.svg" alt="node compatibility"></a>
+  <a href="https://discord.gg/tfY9aSNT"><img src="https://img.shields.io/badge/chat-discord-purple?style=flat&logo=discord" alt="discord chat"></a>
+</p>
+<br/>
+
+# Cientos 
+
+> Collection of useful helpers and fully functional, ready-made abstractions for Tres
+
+- 💡 Build a 3D scene working only with Vue components.
+- ⚡️ Powered by Vite
+- 🥰 It brings all the updated features of ThreeJS right awayregardless the version
+- 🦾 Fully Typed
+
+Cientos (Spanish word for "hundreds", pronounced /θjentos/ ) is is a collection of useful ready-to-go helpers and components that are not part of the core package. The name uses the word uses in spanish to multiply by 100, to refer to the potential reach of the package to hold a amazing abstractions.
+
+The cientos package uses three-stdlib module under the hood instead of the three/examples/jsm module. This means that you don't need to extend the catalogue of components using the extend method of the useCatalogue composable, cientos does it for you.
+
+It just works. 💯
+
+
+## Docs
+
+Checkout the [docs](https://tresjs.org/cientos/)
+
+## Demos
+
+- [Stackblitz Collection](https://stackblitz.com/@alvarosabu/collections/tresjs)
+
+## Contribution
+
+We are open to contributions, please read the [contributing guide](/CONTRIBUTING.md) to get started.
+
+## License
+
+[MIT](/LICENSE)
+
+## Sponsors
+
+Be the first to support this project [here](https://github.com/sponsors/alvarosabu) ☺️

package/dist/core/Box.vue.d.ts

@@ -1,5 +1,24 @@
 import type { PropType as __PropType } from 'vue';
-import { TresColor } from '@tresjs/core/dist/types';
+import { TresColor, TresObject } from '@tresjs/core';
+export interface BoxProps extends TresObject {
+    /**
+     * The width, height and depth of the box.
+     * @default [1, 1, 1]
+     * @type {number[]}
+     * @memberof BoxProps
+     * @see https://threejs.org/docs/#api/en/geometries/BoxGeometry
+     *
+     */
+    args?: number[];
+    /**
+     * The color of the box.
+     * @default 0xffffff
+     * @type {TresColor}
+     * @memberof BoxProps
+     * @see https://threejs.org/docs/#api/en/materials/MeshBasicMaterial
+     */
+    color?: TresColor;
+}
 declare const _sfc_main: import("vue").DefineComponent<{
     args: {
         type: __PropType<number[] | undefined>;

package/dist/core/Circle.vue.d.ts

@@ -1,5 +1,23 @@
 import type { PropType as __PropType } from 'vue';
-import { TresColor } from '@tresjs/core/dist/types';
+import { TresColor, TresObject } from '@tresjs/core';
+export interface CircleProps extends TresObject {
+    /**
+     * The radius, segment, thetaStart, thetaLength of the circle.
+     * @default [1, 32, 0, Math.PI * 2]
+     * @type {number[]}
+     * @memberof CircleProps
+     * @see https://threejs.org/docs/#api/en/geometries/CircleGeometry
+     */
+    args?: number[];
+    /**
+     * The color of the circle.
+     * @default 0xffffff
+     * @type {TresColor}
+     * @memberof CircleProps
+     * @see https://threejs.org/docs/#api/en/materials/MeshBasicMaterial
+     */
+    color?: TresColor;
+}
 declare const _sfc_main: import("vue").DefineComponent<{
     args: {
         type: __PropType<number[] | undefined>;

package/dist/core/Cone.vue.d.ts

@@ -1,10 +1,28 @@
 import type { PropType as __PropType } from 'vue';
-import { TresColor } from '@tresjs/core/dist/types';
+import { TresColor, TresObject } from '@tresjs/core';
+export interface ConeProps extends TresObject {
+    /**
+     * The radius, height, radialSegments, heightSegments, openEnded, thetaStart, thetaLength of the cone.
+     * @default [1, 1, 12, false, 0, Math.PI * 2]
+     * @type {any[]}
+     * @memberof ConeProps
+     * @see https://threejs.org/docs/#api/en/geometries/ConeGeometry
+     */
+    args?: [number, number, number, boolean?, number?, number?];
+    /**
+     * The color of the cone.
+     * @default 0xffffff
+     * @type {TresColor}
+     * @memberof ConeProps
+     * @see https://threejs.org/docs/#api/en/materials/MeshBasicMaterial
+     */
+    color?: TresColor;
+}
 declare const _sfc_main: import("vue").DefineComponent<{
     args: {
-        type: __PropType<number[] | undefined>;
+        type: __PropType<[number, number, number, (boolean | undefined)?, (number | undefined)?, (number | undefined)?] | undefined>;
         required: false;
-        default: () => number[];
+        default: () => (number | boolean)[];
     };
     color: {
         type: __PropType<TresColor | undefined>;
@@ -15,9 +33,9 @@ declare const _sfc_main: import("vue").DefineComponent<{
     value: import("vue").ShallowRef<any>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     args: {
-        type: __PropType<number[] | undefined>;
+        type: __PropType<[number, number, number, (boolean | undefined)?, (number | undefined)?, (number | undefined)?] | undefined>;
         required: false;
-        default: () => number[];
+        default: () => (number | boolean)[];
     };
     color: {
         type: __PropType<TresColor | undefined>;
@@ -25,7 +43,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
         default: string;
     };
 }>>, {
-    args: number[] | undefined;
+    args: [number, number, number, (boolean | undefined)?, (number | undefined)?, (number | undefined)?] | undefined;
     color: TresColor | undefined;
 }>;
 export default _sfc_main;

package/dist/core/Dodecahedron.vue.d.ts

@@ -1,5 +1,23 @@
 import type { PropType as __PropType } from 'vue';
-import { TresColor } from '@tresjs/core/dist/types';
+import { TresColor, TresObject } from '@tresjs/core';
+export interface DodecahedronProps extends TresObject {
+    /**
+     * The radius and detail of the dodecahedron.
+     * @default [1, 0]
+     * @type {number[]}
+     * @memberof DodecahedronProps
+     * @see https://threejs.org/docs/#api/en/geometries/DodecahedronGeometry
+     */
+    args?: number[];
+    /**
+     * The color of the dodecahedron.
+     * @default 0xffffff
+     * @type {TresColor}
+     * @memberof DodecahedronProps
+     * @see https://threejs.org/docs/#api/en/materials/MeshBasicMaterial
+     */
+    color?: TresColor;
+}
 declare const _sfc_main: import("vue").DefineComponent<{
     args: {
         type: __PropType<number[] | undefined>;

package/dist/core/Icosahedron.vue.d.ts

@@ -1,5 +1,23 @@
 import type { PropType as __PropType } from 'vue';
-import { TresColor } from '@tresjs/core/dist/types';
+import { TresColor, TresObject } from '@tresjs/core';
+export interface IcosahedronProps extends TresObject {
+    /**
+     * The radius and detail of the icosahedron.
+     * @default [1, 0]
+     * @type {number[]}
+     * @memberof IcosahedronProps
+     * @see https://threejs.org/docs/#api/en/geometries/IcosahedronGeometry
+     */
+    args?: number[];
+    /**
+     * The color of the icosahedron.
+     * @default 0xffffff
+     * @type {TresColor}
+     * @memberof IcosahedronProps
+     * @see https://threejs.org/docs/#api/en/materials/MeshBasicMaterial
+     */
+    color?: TresColor;
+}
 declare const _sfc_main: import("vue").DefineComponent<{
     args: {
         type: __PropType<number[] | undefined>;

package/dist/core/Octahedron.vue.d.ts

@@ -1,5 +1,23 @@
 import type { PropType as __PropType } from 'vue';
-import { TresColor } from '@tresjs/core/dist/types';
+import { TresColor, TresObject } from '@tresjs/core';
+export interface OctahedronProps extends TresObject {
+    /**
+     * The radius and detail of the octahedron.
+     * @default [1, 0]
+     * @type {number[]}
+     * @memberof OctahedronProps
+     * @see https://threejs.org/docs/#api/en/geometries/OctahedronGeometry
+     */
+    args?: number[];
+    /**
+     * The color of the octahedron.
+     * @default 0xffffff
+     * @type {TresColor}
+     * @memberof OctahedronProps
+     * @see https://threejs.org/docs/#api/en/materials/MeshBasicMaterial
+     */
+    color?: TresColor;
+}
 declare const _sfc_main: import("vue").DefineComponent<{
     args: {
         type: __PropType<number[] | undefined>;

package/dist/core/OrbitControls.vue.d.ts

@@ -1,6 +1,50 @@
 import type { PropType as __PropType } from 'vue';
 import { Camera, Vector3 } from 'three';
 import { type Ref } from 'vue';
+export interface OrbitControlsProps {
+    /**
+     * Whether to make this the default controls.
+     *
+     * @default false
+     * @type {boolean}
+     * @memberof OrbitControlsProps
+     * @see https://threejs.org/docs/#examples/en/controls/OrbitControls
+     */
+    makeDefault?: boolean;
+    /**
+     * The camera to control.
+     *
+     * @type {Camera}
+     * @memberof OrbitControlsProps
+     * @see https://threejs.org/docs/#examples/en/controls/OrbitControls
+     */
+    camera?: Camera;
+    /**
+     * The dom element to listen to.
+     *
+     * @type {HTMLElement}
+     * @memberof OrbitControlsProps
+     * @see https://threejs.org/docs/#examples/en/controls/OrbitControls
+     */
+    domElement?: HTMLElement;
+    /**
+     * The target to orbit around.
+     *
+     * @type {Ref<Vector3>}
+     * @memberof OrbitControlsProps
+     * @see https://threejs.org/docs/#examples/en/controls/OrbitControls
+     */
+    target?: Ref<Vector3>;
+    /**
+     * Whether to enable damping.
+     *
+     * @default false
+     * @type {boolean}
+     * @memberof OrbitControlsProps
+     * @see https://threejs.org/docs/#examples/en/controls/OrbitControls
+     */
+    enableDamping?: boolean;
+}
 declare const _sfc_main: import("vue").DefineComponent<{
     makeDefault: {
         type: __PropType<boolean | undefined>;

package/dist/core/Plane.vue.d.ts

@@ -1,5 +1,23 @@
 import type { PropType as __PropType } from 'vue';
-import { TresColor } from '@tresjs/core/dist/types';
+import { TresColor, TresObject } from '@tresjs/core';
+export interface PlaneProps extends TresObject {
+    /**
+     * The width and height, widthSegments, heightSegments of the plane.
+     * @default [1, 1, 1, 1]
+     * @type {number[]}
+     * @memberof PlaneProps
+     * @see https://threejs.org/docs/#api/en/geometries/PlaneGeometry
+     */
+    args?: number[];
+    /**
+     * The color of the plane.
+     * @default 0xffffff
+     * @type {TresColor}
+     * @memberof PlaneProps
+     * @see https://threejs.org/docs/#api/en/materials/MeshBasicMaterial
+     */
+    color?: TresColor;
+}
 declare const _sfc_main: import("vue").DefineComponent<{
     args: {
         type: __PropType<number[] | undefined>;

package/dist/core/Ring.vue.d.ts

@@ -1,5 +1,23 @@
 import type { PropType as __PropType } from 'vue';
-import { TresColor } from '@tresjs/core/dist/types';
+import { TresColor, TresObject } from '@tresjs/core';
+export interface RingProps extends TresObject {
+    /**
+     * The innerRadius, outerRadius, thetaSegments, phiSegments, tethaStart, thetaLength of the ring.
+     * @default [0.5, 1, 32, 1, 0, Math.PI * 2]
+     * @type {number[]}
+     * @memberof RingProps
+     * @see https://threejs.org/docs/#api/en/geometries/RingGeometry
+     */
+    args?: number[];
+    /**
+     * The color of the ring.
+     * @default 0xffffff
+     * @type {TresColor}
+     * @memberof RingProps
+     * @see https://threejs.org/docs/#api/en/materials/MeshBasicMaterial
+     */
+    color?: TresColor;
+}
 declare const _sfc_main: import("vue").DefineComponent<{
     args: {
         type: __PropType<number[] | undefined>;

package/dist/core/Sphere.vue.d.ts

@@ -1,5 +1,24 @@
 import type { PropType as __PropType } from 'vue';
-import { TresColor } from '@tresjs/core/dist/types';
+import { TresColor, TresObject } from '@tresjs/core';
+export interface SphereProps extends TresObject {
+    /**
+     * The radius, widthSegments, heightSegments, phiStart phiLength,
+     * thetaStart and thetaLength of the sphere.
+     * @default [2, 32, 16, 0, Math.PI * 2, 0, Math.PI]
+     * @type {number[]}
+     * @memberof SphereProps
+     * @see https://threejs.org/docs/#api/en/geometries/SphereGeometry
+     */
+    args?: number[];
+    /**
+     * The color of the sphere.
+     * @default 0xffffff
+     * @type {TresColor}
+     * @memberof SphereProps
+     * @see https://threejs.org/docs/#api/en/materials/MeshBasicMaterial
+     */
+    color?: TresColor;
+}
 declare const _sfc_main: import("vue").DefineComponent<{
     args: {
         type: __PropType<number[] | undefined>;

package/dist/core/Tetrahedron.vue.d.ts

@@ -1,5 +1,23 @@
 import type { PropType as __PropType } from 'vue';
-import { TresColor } from '@tresjs/core/dist/types';
+import { TresColor, TresObject } from '@tresjs/core';
+export interface TetrahedronProps extends TresObject {
+    /**
+     * The radius and detail of the tetrahedron.
+     * @default [1, 0]
+     * @type {number[]}
+     * @memberof TetrahedronProps
+     * @see https://threejs.org/docs/#api/en/geometries/TetrahedronGeometry
+     */
+    args?: number[];
+    /**
+     * The color of the tetrahedron.
+     * @default 0xffffff
+     * @type {TresColor}
+     * @memberof TetrahedronProps
+     * @see https://threejs.org/docs/#api/en/materials/MeshBasicMaterial
+     */
+    color?: TresColor;
+}
 declare const _sfc_main: import("vue").DefineComponent<{
     args: {
         type: __PropType<number[] | undefined>;

package/dist/core/Text3D.vue.d.ts

@@ -1,10 +1,10 @@
 import type { PropType as __PropType } from 'vue';
-type Glyph = {
+export type Glyph = {
     _cachedOutline: string[];
     ha: number;
     o: string;
 };
-type FontData = {
+export type FontData = {
     boundingBox: {
         yMax: number;
         yMin: number;
@@ -16,6 +16,97 @@ type FontData = {
     resolution: number;
     underlineThickness: number;
 };
+export interface Text3DProps {
+    /**
+     *
+     *  The JSON font to use for the text.
+     *  Text3D requires fonts in JSON format generated through [typeface.json](http://gero3.github.io/facetype.js)
+     *
+     * @type {(FontData | string)}
+     * @memberof Text3DProps
+     * @see https://threejs.org/docs/index.html?q=TEXT#examples/en/geometries/TextGeometry
+     */
+    font: FontData | string;
+    /**
+     * The text to display.
+     *
+     * @type {string}
+     * @memberof Text3DProps
+     */
+    text?: string;
+    /**
+     * The size of the text.
+     *
+     * @type {number}
+     * @memberof Text3DProps
+     * @default 0.5
+     */
+    size?: number;
+    /**
+     * The height of the text.
+     *
+     * @type {number}
+     * @memberof Text3DProps
+     * @default 0.2
+     */
+    height?: number;
+    /**
+     * The curve segments of the text.
+     *
+     * @type {number}
+     * @memberof Text3DProps
+     * @default 5
+     */
+    curveSegments?: number;
+    /**
+     * Turn on bevel
+     *
+     * @type {boolean}
+     * @memberof Text3DProps
+     * @default true
+     */
+    bevelEnabled?: boolean;
+    /**
+     * How deep into text bevel goes.
+     *
+     * @type {number}
+     * @memberof Text3DProps
+     * @default 0.05
+     */
+    bevelThickness?: number;
+    /**
+     * How far from text outline is bevel.
+     *
+     * @type {number}
+     * @memberof Text3DProps
+     * @default 0.02
+     */
+    bevelSize?: number;
+    /**
+     * How far from text outline is bevel.
+     *
+     * @type {number}
+     * @memberof Text3DProps
+     * @default 0
+     */
+    bevelOffset?: number;
+    /**
+     * How many bevel segments.
+     *
+     * @type {number}
+     * @memberof Text3DProps
+     * @default 4
+     */
+    bevelSegments?: number;
+    /**
+     * Whether to center the text.
+     *
+     * @type {boolean}
+     * @memberof Text3DProps
+     * @default false
+     */
+    center?: boolean;
+}
 declare const _sfc_main: import("vue").DefineComponent<{
     font: {
         type: __PropType<string | FontData>;

package/dist/core/Torus.vue.d.ts

@@ -1,5 +1,23 @@
 import type { PropType as __PropType } from 'vue';
-import { TresColor } from '@tresjs/core/dist/types';
+import { TresColor, TresObject } from '@tresjs/core';
+export interface TorusProps extends TresObject {
+    /**
+     * The radius, tube, radialSegments, tubularSegments, arc of the torus.
+     * @default [1, 1, 16, 80, Math.PI * 2]
+     * @type {number[]}
+     * @memberof TorusProps
+     * @see https://threejs.org/docs/#api/en/geometries/TorusGeometry
+     */
+    args?: number[];
+    /**
+     * The color of the torus.
+     * @default 0xffffff
+     * @type {TresColor}
+     * @memberof TorusProps
+     * @see https://threejs.org/docs/#api/en/materials/MeshBasicMaterial
+     */
+    color?: TresColor;
+}
 declare const _sfc_main: import("vue").DefineComponent<{
     args: {
         type: __PropType<number[] | undefined>;

package/dist/core/TorusKnot.vue.d.ts

@@ -1,5 +1,23 @@
 import type { PropType as __PropType } from 'vue';
-import { TresColor } from '@tresjs/core/dist/types';
+import { TresColor, TresObject } from '@tresjs/core';
+export interface TorusKnotProps extends TresObject {
+    /**
+     * The radius, tube, radialSegments, tubularSegments and p, q of the torus knot.
+     * @default [1, 0.4, 64, 8, 2, 3]
+     * @type {number[]}
+     * @memberof TorusKnotProps
+     * @see https://threejs.org/docs/#api/en/geometries/TorusKnotGeometry
+     */
+    args?: number[];
+    /**
+     * The color of the torus knot.
+     * @default 0xffffff
+     * @type {TresColor}
+     * @memberof TorusKnotProps
+     * @see https://threejs.org/docs/#api/en/materials/MeshBasicMaterial
+     */
+    color?: TresColor;
+}
 declare const _sfc_main: import("vue").DefineComponent<{
     args: {
         type: __PropType<number[] | undefined>;

package/dist/core/Tube.vue.d.ts

@@ -1,8 +1,26 @@
 import type { PropType as __PropType } from 'vue';
-import { TresColor } from '@tresjs/core/dist/types';
+import { TresColor, TresObject } from '@tresjs/core';
 import { CatmullRomCurve3, CubicBezierCurve3, LineCurve3, QuadraticBezierCurve3 } from 'three';
-type CurveType = QuadraticBezierCurve3 | CubicBezierCurve3 | CatmullRomCurve3 | LineCurve3;
-type TubeGeometryParams = [CurveType, number, number, number, boolean];
+export type CurveType = QuadraticBezierCurve3 | CubicBezierCurve3 | CatmullRomCurve3 | LineCurve3;
+export type TubeGeometryParams = [CurveType, number, number, number, boolean];
+export interface TubeProps extends TresObject {
+    /**
+     * The curve, segments, radius, radialSegments, closed.
+     * @default [new QuadraticBezierCurve3(new Vector3(-1, 0, 0), new Vector3(0, 1, 0), new Vector3(1, 0, 0)), 20, 0.2, 8, false]
+     * @type {TubeGeometryParams}
+     * @memberof TubeProps
+     * @see https://threejs.org/docs/#api/en/geometries/TubeGeometry
+     */
+    args?: TubeGeometryParams;
+    /**
+     * The color of the tube.
+     * @default 0xffffff
+     * @type {TresColor}
+     * @memberof TubeProps
+     * @see https://threejs.org/docs/#api/en/materials/MeshBasicMaterial
+     */
+    color?: TresColor;
+}
 declare const _sfc_main: import("vue").DefineComponent<{
     args: {
         type: __PropType<TubeGeometryParams | undefined>;

package/dist/core/useAnimations.d.ts

@@ -1,5 +1,14 @@
 import { AnimationAction, AnimationClip, AnimationMixer, Object3D, Scene } from 'three';
 import { Ref } from 'vue';
+/**
+ * Creates an AnimationMixer and returns it.
+ *
+ * @export
+ * @template T
+ * @param {T[]} animations
+ * @param {(Scene | Ref<Object3D | undefined | null>)} [modelRef]
+ * @return {*}
+ */
 export declare function useAnimations<T extends AnimationClip>(animations: T[], modelRef?: Scene | Ref<Object3D | undefined | null>): {
     actions: import("vue").ShallowReactive<{
         [key: string]: AnimationAction;

package/dist/core/useCientos.d.ts

@@ -1,3 +1,9 @@
+/**
+ * Allows to use and extend the state of the core package.
+ *
+ * @export
+ * @return {*}
+ */
 export declare function useCientos(): {
     state: import("@tresjs/core").TresState;
     setState: (key: string, value: any) => void;

package/dist/core/useEnvironment/component.d.ts

@@ -1,36 +1,2 @@
-import { TextureEncoding } from 'three';
-import { PropType } from 'vue';
-export declare const Environment: import("vue").DefineComponent<{
-    background: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    blur: {
-        type: NumberConstructor;
-        default: number;
-    };
-    files: {
-        type: (StringConstructor | ArrayConstructor)[];
-    };
-    encoding: PropType<TextureEncoding>;
-    path: StringConstructor;
-    preset: PropType<"sunset">;
-}, () => void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    background: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    blur: {
-        type: NumberConstructor;
-        default: number;
-    };
-    files: {
-        type: (StringConstructor | ArrayConstructor)[];
-    };
-    encoding: PropType<TextureEncoding>;
-    path: StringConstructor;
-    preset: PropType<"sunset">;
-}>>, {
-    background: boolean;
-    blur: number;
-}>;
+import { EnvironmentOptions } from './const';
+export declare const Environment: import("vue").DefineComponent<EnvironmentOptions, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<EnvironmentOptions>, {}>;