@tresjs/cientos 3.4.1 → 3.5.0

package/dist/core/abstractions/GlobalAudio.d.ts

@@ -0,0 +1,50 @@
+export interface AudioProps {
+    /**
+     * Path to your audio file.
+     * @type {string}
+     * @memberof AudioProps
+     *
+     */
+    src: string;
+    /**
+     * Id of the DOM element that trigger the play/pause state.
+     * @type {string}
+     * @memberof AudioProps
+     * @default renderer.domElement
+     *
+     */
+    playTrigger?: string;
+    /**
+     * Id of the DOM element that trigger the stop state.
+     * @type {string}
+     * @memberof AudioProps
+     * @default
+     *
+     */
+    stopTrigger?: string;
+    /**
+     * If the audio must be replayed when ends.
+     * @type {boolean}
+     * @memberof AudioProps
+     * @default false
+     *
+     */
+    loop?: boolean;
+    /**
+     * Volume of the audio.
+     * @type {number}
+     * @memberof AudioProps
+     * @default 0.5
+     *
+     */
+    volume?: number;
+    /**
+     * PlaybackRate of the audio.
+     * @type {number}
+     * @memberof AudioProps
+     * @default 1
+     *
+     */
+    playbackRate?: number;
+}
+export declare const GlobalAudio: import("vue").DefineComponent<AudioProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<AudioProps>, {}, {}>;

package/dist/core/abstractions/index.d.ts

@@ -2,6 +2,9 @@ import Text3D from './Text3D.vue';
 import { useAnimations } from './useAnimations';
 import Levioso from './Levioso.vue';
 import MouseParallax from './MouseParallax.vue';
+import { GlobalAudio } from './GlobalAudio';
 import Lensflare from './Lensflare/component.vue';
+import Fbo from './useFBO/component.vue';
+export * from './useFBO/';
 export * from '../staging/useEnvironment';
-export { Text3D, useAnimations, MouseParallax, Levioso, Lensflare, };
+export { Text3D, useAnimations, MouseParallax, Levioso, Lensflare, GlobalAudio, Fbo, };

package/dist/core/abstractions/useFBO/component.vue.d.ts

@@ -0,0 +1,37 @@
+declare const _default: import("vue").DefineComponent<{
+    width: {
+        type: import("vue").PropType<number>;
+    };
+    height: {
+        type: import("vue").PropType<number>;
+    };
+    settings: {
+        type: import("vue").PropType<import("three").WebGLRenderTargetOptions>;
+        default: undefined;
+    };
+    depth: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+}, {
+    value: import("vue").Ref<import("three").WebGLRenderTarget<import("three").Texture> | null>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    width: {
+        type: import("vue").PropType<number>;
+    };
+    height: {
+        type: import("vue").PropType<number>;
+    };
+    settings: {
+        type: import("vue").PropType<import("three").WebGLRenderTargetOptions>;
+        default: undefined;
+    };
+    depth: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+}>>, {
+    settings: import("three").WebGLRenderTargetOptions;
+    depth: boolean;
+}, {}>;
+export default _default;

package/dist/core/abstractions/useFBO/index.d.ts

@@ -0,0 +1,10 @@
+import type { WebGLRenderTargetOptions } from 'three';
+import { WebGLRenderTarget } from 'three';
+import type { Ref } from 'vue';
+export interface FboOptions {
+    width?: number;
+    height?: number;
+    depth?: boolean;
+    settings?: WebGLRenderTargetOptions;
+}
+export declare function useFBO(options: FboOptions): Ref<WebGLRenderTarget<import("three").Texture> | null>;

package/dist/core/directives/index.d.ts

@@ -1,4 +1,5 @@
 import { vLog } from './vLog';
 import { vLightHelper } from './vLightHelper';
 import { vAlwaysLookAt } from './vAlwaysLookAt';
-export { vLog, vLightHelper, vAlwaysLookAt };
+import { vDistanceTo } from './vDistanceTo';
+export { vLog, vLightHelper, vAlwaysLookAt, vDistanceTo };

package/dist/core/directives/vDistanceTo.d.ts

@@ -0,0 +1,4 @@
+export declare const vDistanceTo: {
+    updated: (el: any, binding: any) => void;
+    unmounted: (el: any) => void;
+};

package/dist/core/directives/vLog.d.ts

@@ -1,3 +1,3 @@
 export declare const vLog: {
-    updated: (el: any, binding: any) => void;
+    mounted: (el: any, binding: any) => void;
 };

package/dist/core/loaders/SVG/component.vue.d.ts

@@ -1,6 +1,10 @@
 import type { TresOptions } from '@tresjs/core';
 import type { MeshBasicMaterialParameters } from 'three';
 declare const _default: import("vue").DefineComponent<{
+    depth: {
+        type: import("vue").PropType<number | "flat" | "renderOrder" | "offsetZ">;
+        default: string;
+    };
     src: {
         type: import("vue").PropType<string>;
         required: true;
@@ -25,13 +29,13 @@ declare const _default: import("vue").DefineComponent<{
     strokeMeshProps: {
         type: import("vue").PropType<TresOptions>;
     };
+}, {
+    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<{
     depth: {
         type: import("vue").PropType<number | "flat" | "renderOrder" | "offsetZ">;
         default: string;
     };
-}, {
-    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<{
     src: {
         type: import("vue").PropType<string>;
         required: true;
@@ -56,13 +60,9 @@ declare const _default: import("vue").DefineComponent<{
     strokeMeshProps: {
         type: import("vue").PropType<TresOptions>;
     };
-    depth: {
-        type: import("vue").PropType<number | "flat" | "renderOrder" | "offsetZ">;
-        default: string;
-    };
 }>>, {
+    depth: number | "flat" | "renderOrder" | "offsetZ";
     skipStrokes: boolean;
     skipFills: boolean;
-    depth: number | "flat" | "renderOrder" | "offsetZ";
 }, {}>;
 export default _default;

package/dist/core/misc/Stats.d.ts

@@ -1 +1,13 @@
-export declare const Stats: (showPanel?: number) => null;
+export declare const Stats: import("vue").DefineComponent<{
+    showPanel: {
+        type: NumberConstructor;
+        default: number;
+    };
+}, null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    showPanel: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>>, {
+    showPanel: number;
+}, {}>;

package/dist/core/misc/html/HTML.vue.d.ts

@@ -0,0 +1,133 @@
+import type { Ref } from 'vue';
+import { PlaneGeometry } from 'three';
+import type { TresObject3D } from '@tresjs/core';
+import type { Mutable } from '@vueuse/core';
+export interface HTMLProps {
+    geometry?: any;
+    material?: any;
+    as?: string;
+    transform?: boolean;
+    portal?: Mutable<HTMLElement>;
+    wrapperClass?: string;
+    eps?: number;
+    distanceFactor?: number;
+    fullscreen?: boolean;
+    center?: boolean;
+    pointerEvents?: PointerEventsProperties;
+    sprite?: boolean;
+    zIndexRange?: Array<number>;
+    occlude?: Ref<TresObject3D>[] | boolean | 'raycast' | 'blending';
+}
+type PointerEventsProperties = 'auto' | 'none' | 'visiblePainted' | 'visibleFill' | 'visibleStroke' | 'visible' | 'painted' | 'fill' | 'stroke' | 'all' | 'inherit';
+declare const _default: import("vue").DefineComponent<{
+    material: {
+        type: import("vue").PropType<any>;
+    };
+    sprite: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    center: {
+        type: import("vue").PropType<boolean>;
+    };
+    geometry: {
+        type: import("vue").PropType<any>;
+        default: PlaneGeometry;
+    };
+    as: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    transform: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    portal: {
+        type: import("vue").PropType<Mutable<HTMLElement>>;
+    };
+    wrapperClass: {
+        type: import("vue").PropType<string>;
+    };
+    eps: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    distanceFactor: {
+        type: import("vue").PropType<number>;
+    };
+    fullscreen: {
+        type: import("vue").PropType<boolean>;
+    };
+    pointerEvents: {
+        type: import("vue").PropType<PointerEventsProperties>;
+        default: string;
+    };
+    zIndexRange: {
+        type: import("vue").PropType<number[]>;
+        default: () => number[];
+    };
+    occlude: {
+        type: import("vue").PropType<boolean | "raycast" | "blending" | Ref<TresObject3D>[]>;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "onOcclude"[], "onOcclude", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    material: {
+        type: import("vue").PropType<any>;
+    };
+    sprite: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    center: {
+        type: import("vue").PropType<boolean>;
+    };
+    geometry: {
+        type: import("vue").PropType<any>;
+        default: PlaneGeometry;
+    };
+    as: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    transform: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    portal: {
+        type: import("vue").PropType<Mutable<HTMLElement>>;
+    };
+    wrapperClass: {
+        type: import("vue").PropType<string>;
+    };
+    eps: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    distanceFactor: {
+        type: import("vue").PropType<number>;
+    };
+    fullscreen: {
+        type: import("vue").PropType<boolean>;
+    };
+    pointerEvents: {
+        type: import("vue").PropType<PointerEventsProperties>;
+        default: string;
+    };
+    zIndexRange: {
+        type: import("vue").PropType<number[]>;
+        default: () => number[];
+    };
+    occlude: {
+        type: import("vue").PropType<boolean | "raycast" | "blending" | Ref<TresObject3D>[]>;
+    };
+}>> & {
+    onOnOcclude?: ((...args: any[]) => any) | undefined;
+}, {
+    sprite: boolean;
+    geometry: any;
+    as: string;
+    transform: boolean;
+    eps: number;
+    pointerEvents: PointerEventsProperties;
+    zIndexRange: number[];
+}, {}>;
+export default _default;

package/dist/core/misc/html/utils.d.ts

@@ -0,0 +1,18 @@
+import type { TresCamera, TresObject3D } from '@tresjs/core';
+import type { Matrix4, Raycaster } from 'three';
+import { Vector3 } from 'three';
+export declare const v1: Vector3;
+export declare const v2: Vector3;
+export declare const v3: Vector3;
+export declare function calculatePosition(instance: TresObject3D, camera: TresCamera, size: {
+    width: number;
+    height: number;
+}): number[];
+export declare function isObjectBehindCamera(el: TresObject3D, camera: TresCamera): boolean;
+export declare function isObjectVisible(el: TresObject3D, camera: TresCamera, raycaster: Raycaster, occlude: any): boolean;
+export declare function objectScale(el: TresObject3D, camera: TresCamera): number;
+export declare function objectZIndex(el: TresObject3D, camera: TresCamera, zIndexRange: Array<number>): number | undefined;
+export declare const epsilon: (value: number) => number;
+export declare function getCSSMatrix(matrix: Matrix4, multipliers: number[], prepend?: string): string;
+export declare const getCameraCSSMatrix: (matrix: Matrix4) => string;
+export declare const getObjectCSSMatrix: (matrix: Matrix4, factor: number) => string;

package/dist/core/misc/index.d.ts

@@ -1,4 +1,5 @@
 import { useTweakPane } from './useTweakPane';
 import { Stats } from './Stats';
 import { StatsGl } from './StatsGl';
-export { useTweakPane, Stats, StatsGl };
+import Html from './html/HTML.vue';
+export { useTweakPane, Html, Stats, StatsGl };

package/dist/core/shapes/CatmullRomCurve3.vue.d.ts

@@ -0,0 +1,112 @@
+import { Vector3 } from 'three';
+type CurveType = 'centripetal' | 'chordal' | 'catmullrom';
+type Points = Array<Vector3 | [number, number, number]>;
+declare const _default: import("vue").DefineComponent<{
+    color: {
+        type: import("vue").PropType<import("three").ColorRepresentation | [r: number, g: number, b: number]>;
+    };
+    points: {
+        type: import("vue").PropType<Points>;
+        required: true;
+    };
+    alphaToCoverage: {
+        type: import("vue").PropType<boolean>;
+    };
+    vertexColors: {
+        type: import("vue").PropType<(import("three").ColorRepresentation | [r: number, g: number, b: number])[]>;
+    };
+    lineWidth: {
+        type: import("vue").PropType<number>;
+    };
+    worldUnits: {
+        type: import("vue").PropType<boolean>;
+    };
+    dashed: {
+        type: import("vue").PropType<boolean>;
+    };
+    dashSize: {
+        type: import("vue").PropType<number>;
+    };
+    gapSize: {
+        type: import("vue").PropType<number>;
+    };
+    dashScale: {
+        type: import("vue").PropType<number>;
+    };
+    dashOffset: {
+        type: import("vue").PropType<number>;
+    };
+    segments: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    closed: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    curveType: {
+        type: import("vue").PropType<CurveType>;
+        default: string;
+    };
+    tension: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    color: {
+        type: import("vue").PropType<import("three").ColorRepresentation | [r: number, g: number, b: number]>;
+    };
+    points: {
+        type: import("vue").PropType<Points>;
+        required: true;
+    };
+    alphaToCoverage: {
+        type: import("vue").PropType<boolean>;
+    };
+    vertexColors: {
+        type: import("vue").PropType<(import("three").ColorRepresentation | [r: number, g: number, b: number])[]>;
+    };
+    lineWidth: {
+        type: import("vue").PropType<number>;
+    };
+    worldUnits: {
+        type: import("vue").PropType<boolean>;
+    };
+    dashed: {
+        type: import("vue").PropType<boolean>;
+    };
+    dashSize: {
+        type: import("vue").PropType<number>;
+    };
+    gapSize: {
+        type: import("vue").PropType<number>;
+    };
+    dashScale: {
+        type: import("vue").PropType<number>;
+    };
+    dashOffset: {
+        type: import("vue").PropType<number>;
+    };
+    segments: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    closed: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    curveType: {
+        type: import("vue").PropType<CurveType>;
+        default: string;
+    };
+    tension: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+}>>, {
+    segments: number;
+    closed: boolean;
+    curveType: CurveType;
+    tension: number;
+}, {}>;
+export default _default;

package/dist/core/shapes/Line2.vue.d.ts

@@ -0,0 +1,120 @@
+import { Vector2, Vector3 } from 'three';
+import type { TresColor } from '@tresjs/core';
+type Points = (Vector3 | Vector2 | [number, number, number] | [number, number] | number)[];
+type VertexColors = Array<TresColor>;
+export interface LineProps {
+    points: Points;
+    vertexColors?: VertexColors | null;
+    color?: TresColor;
+    lineWidth?: number;
+    worldUnits?: boolean;
+    alphaToCoverage?: boolean;
+    dashed?: boolean;
+    dashSize?: number;
+    gapSize?: number;
+    dashScale?: number;
+    dashOffset?: number;
+}
+declare const _default: import("vue").DefineComponent<{
+    color: {
+        type: import("vue").PropType<import("three").ColorRepresentation | [r: number, g: number, b: number]>;
+        default: string;
+    };
+    points: {
+        type: import("vue").PropType<Points>;
+        required: true;
+    };
+    alphaToCoverage: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    vertexColors: {
+        type: import("vue").PropType<VertexColors | null>;
+        default: null;
+    };
+    lineWidth: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    worldUnits: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    dashed: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    dashSize: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    gapSize: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    dashScale: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    dashOffset: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    color: {
+        type: import("vue").PropType<import("three").ColorRepresentation | [r: number, g: number, b: number]>;
+        default: string;
+    };
+    points: {
+        type: import("vue").PropType<Points>;
+        required: true;
+    };
+    alphaToCoverage: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    vertexColors: {
+        type: import("vue").PropType<VertexColors | null>;
+        default: null;
+    };
+    lineWidth: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    worldUnits: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    dashed: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    dashSize: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    gapSize: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    dashScale: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    dashOffset: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+}>>, {
+    color: import("three").ColorRepresentation | [r: number, g: number, b: number];
+    alphaToCoverage: boolean;
+    vertexColors: VertexColors | null;
+    lineWidth: number;
+    worldUnits: boolean;
+    dashed: boolean;
+    dashSize: number;
+    gapSize: number;
+    dashScale: number;
+    dashOffset: number;
+}, {}>;
+export default _default;

package/dist/core/shapes/index.d.ts

@@ -1,8 +1,10 @@
 import Box from './Box.vue';
+import CatmullRomCurve3 from './CatmullRomCurve3.vue';
 import Circle from './Circle.vue';
 import Cone from './Cone.vue';
 import Dodecahedron from './Dodecahedron.vue';
 import Icosahedron from './Icosahedron.vue';
+import Line2 from './Line2.vue';
 import Octahedron from './Octahedron.vue';
 import Plane from './Plane.vue';
 import Ring from './Ring.vue';
@@ -11,4 +13,4 @@ import Tetrahedron from './Tetrahedron.vue';
 import Torus from './Torus.vue';
 import TorusKnot from './TorusKnot.vue';
 import Tube from './Tube.vue';
-export { Box, Circle, Cone, Dodecahedron, Icosahedron, Octahedron, Plane, Ring, Sphere, Tetrahedron, Torus, TorusKnot, Tube, };
+export { Box, CatmullRomCurve3, Circle, Cone, Dodecahedron, Icosahedron, Line2, Octahedron, Plane, Ring, Sphere, Tetrahedron, Torus, TorusKnot, Tube, };

package/dist/core/staging/index.d.ts

@@ -1,4 +1,4 @@
-import { Environment } from './useEnvironment/component';
+import Environment from './useEnvironment/component.vue';
 import Backdrop from './Backdrop.vue';
 import ContactShadows from './ContactShadows.vue';
 import Stars from './Stars.vue';

package/dist/core/staging/useEnvironment/const.d.ts

@@ -0,0 +1,51 @@
+export interface EnvironmentOptions {
+    /**
+     * If true, the environment will be set as the scene's background.
+     *
+     * @type {boolean}
+     * @default false
+     */
+    background?: boolean | string;
+    /**
+     * The blur radius of the environment.
+     *
+     * @type {number}
+     * @default 0
+     */
+    blur?: number;
+    /**
+     * The files to load. If a string is provided, it will be loaded as an equirectangular texture.
+     * If an array is provided, it will be loaded as a cube texture.
+     *
+     * @type {(string | string[])}
+     */
+    files?: string | string[];
+    /**
+     * The path to the files.
+     *
+     * @type {string}
+     * @default '/'
+     */
+    path?: string;
+    /**
+     * The preset to use. If provided, the files and path props will be ignored.
+     *
+     * @type {EnvironmentPresetsType}
+     */
+    preset?: EnvironmentPresetsType;
+}
+export declare const environmentPresets: {
+    sunset: string;
+    studio: string;
+    city: string;
+    umbrellas: string;
+    night: string;
+    forest: string;
+    snow: string;
+    dawn: string;
+    hangar: string;
+    urban: string;
+    modern: string;
+    shangai: string;
+};
+export type EnvironmentPresetsType = keyof typeof environmentPresets;

package/dist/core/staging/useEnvironment/index.d.ts

@@ -1,17 +1,3 @@
 import type { CubeTexture, Texture } from 'three';
 import type { EnvironmentOptions } from './const';
-/**
- * Component that loads an environment map and sets it as the scene's background and environment.
- *
- * @export
- * @param {Partial<EnvironmentOptions>} {
- *   files = ['/px.png', '/nx.png', '/py.png', '/ny.png', '/pz.png', '/nz.png'],
- *   blur = 0,
- *   background = false,
- *   path = undefined,
- *   preset = undefined,
- *   colorSpace = undefined,
- * }
- * @return {*}  {(Promise<Texture | CubeTexture>)}
- */
-export declare function useEnvironment({ files, blur, background, path, preset, }: Partial<EnvironmentOptions>): Promise<Texture | CubeTexture>;
+export declare function useEnvironment(options: Partial<EnvironmentOptions>): Promise<Texture | CubeTexture>;