@tresjs/core 5.0.0-next.0 → 5.0.0-next.1

package/dist/src/composables/useLoader/index.d.ts

@@ -14,6 +14,7 @@ export type LoaderProto<T> = new (manager?: LoadingManager) => TresLoader<T>;
 export interface TresLoaderOptions<T, Shallow extends boolean> {
     manager?: LoadingManager;
     extensions?: (loader: TresLoader<T>) => void;
+    initialValue?: T;
     asyncOptions?: UseAsyncStateOptions<Shallow, any | null>;
 }
 /**

package/dist/src/composables/useRaycaster/index.d.ts

@@ -1,6 +1,6 @@
-import { TresEvent, TresInstance } from 'src/types';
 import { Intersection, Object3D, Object3DEventMap } from 'three';
 import { ShallowRef } from 'vue';
+import { TresEvent, TresInstance } from '../../types';
 import { TresContext } from '../useTresContextProvider';
 export declare const useRaycaster: (objectsWithEvents: ShallowRef<TresInstance[]>, ctx: TresContext) => {
     intersects: ShallowRef<Intersection<Object3D<Object3DEventMap>>[]>;

package/dist/src/composables/useRenderer/{index.d.ts → useRendererManager.d.ts}

@@ -1,5 +1,5 @@
 import { ColorSpace, Scene, ShadowMapType, ToneMapping, WebGLRendererParameters, WebGLRenderer } from 'three';
-import { EmitEventFn, TresColor } from '../../types';
+import { TresColor } from '../../types';
 import { TresContext } from '../useTresContextProvider';
 import { RendererPresetsType } from './const';
 import { MaybeRefOrGetter } from '@vueuse/core';
@@ -7,6 +7,12 @@ import { MaybeRef } from 'vue';
 type TransformToMaybeRefOrGetter<T> = {
     [K in keyof T]: MaybeRefOrGetter<T[K]> | MaybeRefOrGetter<T[K]>;
 };
+/**
+ * If set to 'on-demand', the scene will only be rendered when the current frame is invalidated
+ * If set to 'manual', the scene will only be rendered when advance() is called
+ * If set to 'always', the scene will be rendered every frame
+ */
+export type RenderMode = 'always' | 'on-demand' | 'manual';
 export interface UseRendererOptions extends TransformToMaybeRefOrGetter<WebGLRendererParameters> {
     /**
      * Enable shadows in the Renderer
@@ -68,24 +74,26 @@ export interface UseRendererOptions extends TransformToMaybeRefOrGetter<WebGLRen
     clearColor?: MaybeRefOrGetter<TresColor>;
     windowSize?: MaybeRefOrGetter<boolean | string>;
     preset?: MaybeRefOrGetter<RendererPresetsType>;
-    renderMode?: MaybeRefOrGetter<'always' | 'on-demand' | 'manual'>;
+    renderMode?: MaybeRef<RenderMode>;
     /**
      * A `number` sets the renderer's device pixel ratio.
      * `[number, number]` clamp's the renderer's device pixel ratio.
      */
     dpr?: MaybeRefOrGetter<number | [number, number]>;
 }
-export declare function useRenderer({ canvas, options, contextParts: { sizes, render, invalidate, advance }, }: {
-    canvas: MaybeRef<HTMLCanvasElement>;
+export declare function useRendererManager({ scene, canvas, options, contextParts: { sizes, loop, camera }, }: {
     scene: Scene;
+    canvas: MaybeRef<HTMLCanvasElement>;
     options: UseRendererOptions;
-    emit: EmitEventFn;
-    contextParts: Pick<TresContext, 'sizes' | 'camera' | 'render'> & {
-        invalidate: () => void;
-        advance: () => void;
-    };
+    contextParts: Pick<TresContext, 'sizes' | 'camera' | 'loop'>;
 }): {
-    renderer: import('vue').ShallowRef<WebGLRenderer, WebGLRenderer>;
+    instance: import('vue').ShallowRef<WebGLRenderer, WebGLRenderer>;
+    isReady: Readonly<import('vue').Ref<boolean, boolean>>;
+    advance: () => void;
+    onRender: import('@vueuse/core').EventHook<WebGLRenderer>;
+    invalidate: (amountOfFramesToInvalidate?: number) => void;
+    canBeInvalidated: import('vue').ComputedRef<boolean>;
+    amountOfFramesToRender: import('vue').Ref<number, number>;
 };
-export type UseRendererReturn = ReturnType<typeof useRenderer>;
+export type UseRendererManagerReturn = ReturnType<typeof useRendererManager>;
 export {};

package/dist/src/composables/useTres/index.d.ts

@@ -0,0 +1,36 @@
+import { ComputedRef } from 'vue';
+import { TresContext } from '../useTresContextProvider';
+import { Camera, WebGLRenderer } from 'three';
+export interface TresPartialContext extends Omit<TresContext, 'renderer' | 'camera'> {
+    /**
+     * The renderer instance
+     *
+     * @type {WebGLRenderer}
+     * @memberof TresPartialContext
+     */
+    renderer: WebGLRenderer;
+    /**
+     * The current active camera
+     *
+     * @type {ComputedRef<Camera | undefined>}
+     * @memberof TresPartialContext
+     */
+    camera: ComputedRef<Camera | undefined>;
+    /**
+     * Marks the scene as needing an update in the next frame.
+     * This is used in on-demand rendering mode to schedule a render.
+     *
+     * @type {() => void}
+     * @memberof TresPartialContext
+     */
+    invalidate: () => void;
+    /**
+     * Manually advances the render loop by one frame.
+     * This is particularly useful in manual rendering mode where you want explicit control over when frames are rendered.
+     *
+     * @type {() => void}
+     * @memberof TresPartialContext
+     */
+    advance: () => void;
+}
+export declare function useTres(): TresPartialContext;

package/dist/src/composables/useTresContextProvider/index.d.ts

@@ -1,74 +1,30 @@
-import { Camera, WebGLRenderer, Raycaster } from 'three';
-import { ComputedRef, DeepReadonly, MaybeRef, MaybeRefOrGetter, Ref, ShallowRef } from 'vue';
+import { Raycaster } from 'three';
+import { MaybeRef, MaybeRefOrGetter, Ref, ShallowRef } from 'vue';
 import { RendererLoop } from '../../core/loop';
-import { EmitEventFn, TresControl, TresObject, TresScene } from '../../types';
-import { UseRendererOptions } from '../useRenderer';
+import { TresControl, TresObject, TresScene } from '../../types';
+import { UseRendererManagerReturn, UseRendererOptions } from '../useRenderer/useRendererManager';
+import { UseCameraReturn } from '../useCamera/';
 import { SizesType } from '../useSizes';
 import { TresEventManager } from '../useTresEventManager';
-export interface InternalState {
-    priority: Ref<number>;
-    frames: Ref<number>;
-    maxFrames: number;
-}
-export interface RenderState {
-    /**
-     * If set to 'on-demand', the scene will only be rendered when the current frame is invalidated
-     * If set to 'manual', the scene will only be rendered when advance() is called
-     * If set to 'always', the scene will be rendered every frame
-     */
-    mode: Ref<'always' | 'on-demand' | 'manual'>;
-    priority: Ref<number>;
-    frames: Ref<number>;
-    maxFrames: number;
-    canBeInvalidated: ComputedRef<boolean>;
-}
-export interface PerformanceState {
-    maxFrames: number;
-    fps: {
-        value: number;
-        accumulator: number[];
-    };
-    memory: {
-        currentMem: number;
-        allocatedMem: number;
-        accumulator: number[];
-    };
-}
 export interface TresContext {
     scene: ShallowRef<TresScene>;
     sizes: SizesType;
     extend: (objects: any) => void;
-    camera: ComputedRef<Camera | undefined>;
-    cameras: DeepReadonly<Ref<Camera[]>>;
+    camera: UseCameraReturn;
     controls: Ref<TresControl | null>;
-    renderer: ShallowRef<WebGLRenderer>;
+    renderer: UseRendererManagerReturn;
     raycaster: ShallowRef<Raycaster>;
-    perf: PerformanceState;
-    render: RenderState;
     loop: RendererLoop;
-    /**
-     * Invalidates the current frame when renderMode === 'on-demand'
-     */
-    invalidate: () => void;
-    /**
-     * Advance one frame when renderMode === 'manual'
-     */
-    advance: () => void;
-    registerCamera: (maybeCamera: unknown) => void;
-    setCameraActive: (cameraOrUuid: Camera | string) => void;
-    deregisterCamera: (maybeCamera: unknown) => void;
     eventManager?: TresEventManager;
     registerObjectAtPointerEventHandler?: (object: TresObject) => void;
     deregisterObjectAtPointerEventHandler?: (object: TresObject) => void;
     registerBlockingObjectAtPointerEventHandler?: (object: TresObject) => void;
     deregisterBlockingObjectAtPointerEventHandler?: (object: TresObject) => void;
 }
-export declare function useTresContextProvider({ scene, canvas, windowSize, rendererOptions, emit, }: {
+export declare function useTresContextProvider({ scene, canvas, windowSize, rendererOptions, }: {
     scene: TresScene;
     canvas: MaybeRef<HTMLCanvasElement>;
     windowSize: MaybeRefOrGetter<boolean>;
     rendererOptions: UseRendererOptions;
-    emit: EmitEventFn;
 }): TresContext;
 export declare function useTresContext(): TresContext;
-export declare const useTres: typeof useTresContext;

package/dist/src/composables/useTresEventManager/index.d.ts

@@ -1,7 +1,9 @@
-import { EmitEventFn } from 'src/types';
+import { TresPointerEvent } from 'src/types';
 import { Scene } from 'three';
 import { TresContext } from '../useTresContextProvider';
+import { EventHookOff } from '@vueuse/core';
 export interface TresEventManager {
+    onEvent: EventHookOff<TresPointerEvent>;
     /**
      * Forces the event system to refire events with the previous mouse event
      */
@@ -16,7 +18,8 @@ export interface TresEventManager {
     registerPointerMissedObject: (object: unknown) => void;
     deregisterPointerMissedObject: (object: unknown) => void;
 }
-export declare function useTresEventManager(scene: Scene, context: TresContext, emit: EmitEventFn): {
+export declare function useTresEventManager(scene: Scene, context: TresContext): {
+    onEvent: import('@vueuse/core').EventHookOn<TresPointerEvent>;
     forceUpdate: () => void;
     registerObject: (maybeTresObject: unknown) => void;
     deregisterObject: (maybeTresObject: unknown) => void;

package/dist/src/core/loop.d.ts

@@ -15,8 +15,6 @@ export interface LoopCallbackWithCtx extends LoopCallback {
     controls: Ref<(EventDispatcher<object> & {
         enabled: boolean;
     }) | null>;
-    invalidate: Fn;
-    advance: Fn;
 }
 export type LoopCallbackFn = (params: LoopCallbackWithCtx) => void;
 export interface RendererLoop {

package/dist/src/devtools/inspectorHandlers.d.ts

@@ -0,0 +1,60 @@
+import { Mesh } from 'three';
+import { TresObject } from '../types';
+import { SceneGraphObject } from './types';
+import { TresContext } from '../composables/useTresContextProvider';
+/**
+ * Creates a node representation of a Three.js object for the inspector tree
+ * @param object - The Three.js object to create a node for
+ * @returns A SceneGraphObject representing the Three.js object with relevant metadata
+ */
+export declare const createNode: (object: TresObject) => SceneGraphObject;
+/**
+ * Creates a context node for the inspector tree
+ * @param key - The key identifier for the context node
+ * @param uuid - The unique identifier for the context
+ * @param parentKey - Optional parent key for nested context nodes
+ * @returns A SceneGraphObject representing the context node
+ */
+export declare function createContextNode(key: string, uuid: string, parentKey?: string): SceneGraphObject;
+/**
+ * Recursively builds a graph representation of Three.js objects for the inspector
+ * @param object - The root Three.js object to build the graph from
+ * @param node - The current node in the graph being built
+ * @param filter - Optional filter string to filter objects by type or name
+ */
+export declare function buildGraph(object: TresObject, node: SceneGraphObject, filter?: string): void;
+/**
+ * Recursively builds a graph representation of context objects for the inspector
+ * @param object - The root object to build the context graph from
+ * @param node - The current node in the graph being built
+ * @param visited - WeakSet to track visited objects and prevent circular references
+ * @param depth - Current depth in the object tree
+ * @param maxDepth - Maximum depth to traverse
+ * @param contextUuid - Optional UUID for the context
+ * @param parentKey - Optional parent key for nested objects
+ */
+export declare function buildContextGraph(object: any, node: SceneGraphObject, visited?: WeakSet<WeakKey>, depth?: number, maxDepth?: number, contextUuid?: string, parentKey?: string): void;
+/**
+ * Handler for inspector tree updates
+ * @param tres - The TresContext instance
+ * @returns A function that handles inspector tree payload updates
+ */
+export declare const inspectorTreeHandler: (tres: TresContext) => (payload: any) => void;
+/**
+ * Handler for inspector state updates
+ * @param tres - The TresContext instance
+ * @param options - Options for the handler
+ * @param options.highlightMesh - The currently highlighted mesh
+ * @param options.prevInstance - The previously selected instance
+ * @returns A function that handles inspector state payload updates
+ */
+export declare const inspectorStateHandler: (tres: TresContext, { highlightMesh, prevInstance }: {
+    highlightMesh: Mesh | null;
+    prevInstance: TresObject | null;
+}) => (payload: any) => void;
+/**
+ * Handler for inspector state edits
+ * @param tres - The TresContext instance
+ * @returns A function that handles inspector state edit payload updates
+ */
+export declare const inspectorEditStateHandler: (tres: TresContext) => (payload: any) => void;

package/dist/src/devtools/plugin.d.ts

@@ -1,14 +1,10 @@
 import { TresContext } from '../composables';
+import { App } from 'vue';
 export interface Tags {
     label: string;
     textColor: number;
     backgroundColor: number;
     tooltip?: string;
 }
-export interface SceneGraphObject {
-    id: string;
-    label: string;
-    children: SceneGraphObject[];
-    tags: Tags[];
-}
-export declare function registerTresDevtools(app: any, tres: TresContext): void;
+export declare const INSPECTOR_ID = "tres:inspector";
+export declare function registerTresDevtools(app: App, tres: TresContext): void;

package/dist/src/devtools/setupDevtools.d.ts

@@ -1,2 +1,14 @@
 import { TresContext } from '../composables';
-export declare function setupDevtools(ctx: TresContext): void;
+export interface PerformanceState {
+    maxFrames: number;
+    fps: {
+        value: number;
+        accumulator: number[];
+    };
+    memory: {
+        currentMem: number;
+        allocatedMem: number;
+        accumulator: number[];
+    };
+}
+export declare function setupTresDevtools(ctx: TresContext): void;

package/dist/src/devtools/types.d.ts

@@ -0,0 +1,90 @@
+/**
+ * Represents a tag that can be displayed in the inspector UI
+ * @interface Tags
+ */
+export interface Tags {
+    /** The text to display in the tag */
+    label: string;
+    /** The color of the text in hexadecimal format (e.g., 0xFFFFFF) */
+    textColor: number;
+    /** The background color of the tag in hexadecimal format (e.g., 0x000000) */
+    backgroundColor: number;
+    /** Optional tooltip text to show on hover */
+    tooltip?: string;
+}
+/**
+ * Represents a node in the scene graph that can be displayed in the inspector
+ * @interface SceneGraphObject
+ */
+export interface SceneGraphObject {
+    /** Unique identifier for the node */
+    id: string;
+    /** Display name of the node */
+    label: string;
+    /** Array of child nodes */
+    children: SceneGraphObject[];
+    /** Array of tags associated with the node */
+    tags: Tags[];
+}
+/**
+ * Represents memory usage statistics for Three.js resources
+ * @interface MemoryStats
+ */
+export interface MemoryStats {
+    /** Map of geometry names to their memory usage in bytes */
+    geometries: Map<string, number>;
+    /** Map of material names to their memory usage in bytes */
+    materials: Map<string, number>;
+    /** Map of texture names to their memory usage in bytes */
+    textures: Map<string, number>;
+}
+/**
+ * Represents a property in the inspector state
+ * @interface InspectorStateProperty
+ */
+export interface InspectorStateProperty {
+    /** The name of the property */
+    key: string;
+    /** The value of the property */
+    value: unknown;
+    /** Whether the property can be edited in the inspector */
+    editable: boolean;
+}
+/**
+ * Represents the state of an inspector panel
+ * @interface InspectorState
+ */
+export interface InspectorState {
+    /** Array of properties to display in the inspector */
+    object: InspectorStateProperty[];
+}
+/**
+ * Represents the internal state of the devtools
+ * @interface DevtoolsState
+ */
+export interface DevtoolsState {
+    /** The current scene graph representation */
+    sceneGraph: SceneGraphObject | null;
+    /** Timestamp of the last update */
+    lastUpdate: number;
+    /** Minimum time between updates in milliseconds */
+    updateThreshold: number;
+    /** Current memory usage statistics */
+    memoryStats: MemoryStats;
+}
+/**
+ * Represents a payload sent to or received from the devtools
+ * @interface DevtoolsPayload
+ */
+export interface DevtoolsPayload {
+    /** The ID of the inspector panel */
+    inspectorId: string;
+    /** The ID of the node being inspected */
+    nodeId: string;
+    /** Optional filter string for searching */
+    filter?: string;
+    /** Optional state to update */
+    state?: InspectorState;
+    /** Optional path to the property being edited */
+    path?: string[];
+}

package/dist/src/types/index.d.ts

@@ -17,8 +17,13 @@ export type Args<T> = T extends ConstructorRepresentation ? ConstructorParameter
 export interface TresCatalogue {
     [name: string]: ConstructorRepresentation;
 }
-export type EmitEventName = 'render' | 'ready' | 'click' | 'double-click' | 'context-menu' | 'pointer-move' | 'pointer-up' | 'pointer-down' | 'pointer-enter' | 'pointer-leave' | 'pointer-over' | 'pointer-out' | 'pointer-missed' | 'wheel';
-export type EmitEventFn = (event: EmitEventName, ...args: any[]) => void;
+export declare const pointerEventTypes: readonly ["click", "double-click", "context-menu", "pointer-move", "pointer-up", "pointer-down", "pointer-enter", "pointer-leave", "pointer-over", "pointer-out", "pointer-missed", "wheel"];
+export type PointerEventType = typeof pointerEventTypes[number];
+export interface TresPointerEvent {
+    type: PointerEventType;
+    event: TresEvent;
+    intersection?: Intersection;
+}
 export type TresCamera = THREE.OrthographicCamera | THREE.PerspectiveCamera;
 /**
  * Represents the properties of an instance.
@@ -90,7 +95,7 @@ export interface IntersectionEvent<TSourceEvent> extends Intersection {
     /** The ray that pierced it */
     ray: THREE.Ray;
     /** The camera that was used by the raycaster */
-    camera: TresCamera;
+    camera: THREE.Camera;
     /** stopPropagation will stop underlying handlers from firing */
     stopPropagation: () => void;
     /** The original host event */

package/dist/src/utils/createPriorityEventHook.d.ts

@@ -9,7 +9,7 @@ export type PriorityEventHookOff<T> = EventHookOff<T>;
 export type PriorityEventHookTrigger<T = any> = (param?: T) => void;
 export interface PriorityEventHook<T = any> {
     on: PriorityEventHookOn<T>;
-    off: EventHookOff<T>;
+    off: (fn: Callback<T>) => void;
     trigger: PriorityEventHookTrigger<T>;
     dispose: () => void;
     count: number;

package/dist/src/utils/is.d.ts

@@ -1,5 +1,5 @@
-import { TresObject, TresPrimitive } from 'src/types';
-import { BufferGeometry, Camera, Fog, Light, Material, Object3D, Scene } from 'three';
+import { TresCamera, TresInstance, TresObject, TresPrimitive } from 'src/types';
+import { BufferGeometry, Color, ColorRepresentation, Fog, Light, Material, Object3D, OrthographicCamera, PerspectiveCamera, Scene, Layers } from 'three';
 /**
  * Type guard to check if a value is undefined
  * @param value - The value to check
@@ -134,7 +134,36 @@ export declare function isObject3D(value: unknown): value is Object3D;
  * }
  * ```
  */
-export declare function isCamera(value: unknown): value is Camera;
+export declare function isCamera(value: unknown): value is TresCamera;
+export declare function isColor(value: unknown): value is Color;
+export declare function isColorRepresentation(value: unknown): value is ColorRepresentation;
+interface VectorLike {
+    set: (...args: any[]) => void;
+    constructor?: (...args: any[]) => any;
+}
+export declare function isVectorLike(value: unknown): value is VectorLike;
+interface Copyable {
+    copy: (...args: any[]) => void;
+    constructor?: (...args: any[]) => any;
+}
+export declare function isCopyable(value: unknown): value is Copyable;
+interface ClassInstance {
+    constructor?: (...args: any[]) => any;
+}
+export declare function isClassInstance(object: unknown): object is ClassInstance;
+export declare function isLayers(value: unknown): value is Layers;
+/**
+ * Type guard to check if a value is a Three.js OrthographicCamera
+ * @param value - The value to check
+ * @returns True if the value is a Three.js OrthographicCamera instance, false otherwise
+ */
+export declare function isOrthographicCamera(value: unknown): value is OrthographicCamera;
+/**
+ * Type guard to check if a value is a Three.js PerspectiveCamera
+ * @param value - The value to check
+ * @returns True if the value is a Three.js PerspectiveCamera instance, false otherwise
+ */
+export declare function isPerspectiveCamera(value: unknown): value is PerspectiveCamera;
 /**
  * Type guard to check if a value is a Three.js BufferGeometry
  * @param value - The value to check
@@ -249,3 +278,18 @@ export declare function isTresObject(value: unknown): value is TresObject;
  * that can be used directly in the scene without needing to be wrapped in a Three.js object.
  */
 export declare function isTresPrimitive(value: unknown): value is TresPrimitive;
+/**
+ * Type guard to check if a value is a TresInstance (has __tres property)
+ * @param value - The value to check
+ * @returns True if the value is a TresInstance (has __tres property), false otherwise
+ * @example
+ * ```ts
+ * const value = new THREE.Mesh()
+ * if (isTresInstance(value)) {
+ *   // TypeScript knows value is TresInstance here
+ *   // You can safely access value.__tres
+ * }
+ * ```
+ */
+export declare function isTresInstance(value: unknown): value is TresInstance;
+export {};