@tresjs/core 5.0.0-next.3 → 5.0.0-next.5

package/dist/src/components/TresCanvas.vue.d.ts

@@ -1,6 +1,6 @@
-import { TresCamera } from '../types/';
+import { TresCamera, TresContextWithClock } from '../types/';
 import { PointerEvent } from '@pmndrs/pointer-events';
-import { RendererOptions, TresContext, TresRenderer } from '../composables';
+import { RendererOptions, TresContext } from '../composables';
 import * as THREE from 'three';
 export interface TresCanvasProps extends RendererOptions {
     /**
@@ -25,7 +25,6 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<Tr
     context: import('vue').ShallowRef<TresContext | null, TresContext | null>;
     dispose: () => void;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    render: (renderer: TresRenderer) => any;
     click: (event: PointerEvent<MouseEvent>) => any;
     contextmenu: (event: PointerEvent<MouseEvent>) => any;
     pointermove: (event: PointerEvent<MouseEvent>) => any;
@@ -39,10 +38,12 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<Tr
     pointercancel: (event: PointerEvent<MouseEvent>) => any;
     lostpointercapture: (event: PointerEvent<MouseEvent>) => any;
     wheel: (event: PointerEvent<MouseEvent>) => any;
+    render: (context: TresContext) => any;
+    loop: (context: TresContextWithClock) => any;
     ready: (context: TresContext) => any;
     pointermissed: (event: PointerEvent<MouseEvent>) => any;
+    beforeLoop: (context: TresContextWithClock) => any;
 }, string, import('vue').PublicProps, Readonly<TresCanvasProps> & Readonly<{
-    onRender?: ((renderer: TresRenderer) => any) | undefined;
     onClick?: ((event: PointerEvent<MouseEvent>) => any) | undefined;
     onContextmenu?: ((event: PointerEvent<MouseEvent>) => any) | undefined;
     onPointermove?: ((event: PointerEvent<MouseEvent>) => any) | undefined;
@@ -56,25 +57,28 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<Tr
     onPointercancel?: ((event: PointerEvent<MouseEvent>) => any) | undefined;
     onLostpointercapture?: ((event: PointerEvent<MouseEvent>) => any) | undefined;
     onWheel?: ((event: PointerEvent<MouseEvent>) => any) | undefined;
+    onRender?: ((context: TresContext) => any) | undefined;
+    onLoop?: ((context: TresContextWithClock) => any) | undefined;
     onReady?: ((context: TresContext) => any) | undefined;
     onPointermissed?: ((event: PointerEvent<MouseEvent>) => any) | undefined;
+    onBeforeLoop?: ((context: TresContextWithClock) => any) | undefined;
 }>, {
-    toneMapping: THREE.ToneMapping;
-    alpha: boolean;
-    logarithmicDepthBuffer: boolean;
-    depth: boolean;
-    stencil: boolean;
-    windowSize: boolean;
-    clearColor: THREE.ColorRepresentation;
-    shadowMapType: THREE.ShadowMapType;
-    enableProvideBridge: boolean;
     antialias: boolean;
+    stencil: boolean;
+    depth: boolean;
+    logarithmicDepthBuffer: boolean;
     preserveDrawingBuffer: boolean;
+    alpha: boolean;
     failIfMajorPerformanceCaveat: boolean;
+    clearColor: THREE.ColorRepresentation;
     clearAlpha: number;
     shadows: boolean;
+    toneMapping: THREE.ToneMapping;
+    shadowMapType: THREE.ShadowMapType;
     useLegacyLights: boolean;
     renderMode: "always" | "on-demand" | "manual";
+    windowSize: boolean;
+    enableProvideBridge: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     canvasRef: HTMLCanvasElement;
 }, HTMLCanvasElement>, Readonly<{

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

@@ -4,7 +4,6 @@ export * from './useGraph';
 export * from './useLoader';
 export * from './useLoop';
 export * from './useRenderer/useRendererManager';
-export * from './useRenderLoop';
 export * from './useTres';
 export * from './useTresContextProvider';
 export { UseLoader };

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

@@ -0,0 +1,18 @@
+export interface RafLoopContext {
+    delta: number;
+    elapsed: number;
+}
+type LoopFunction = (notifySuccess: () => void) => void;
+/**
+ * @param defaultFunction the default function that is called before after the after event hook is triggered and after the before is triggered.
+ * @param notifySuccess a callback that should be called to indicate a successfull cycle.
+ */
+export declare const useCreateRafLoop: (defaultFunction: LoopFunction, notifySuccess: () => void) => {
+    start: () => void;
+    stop: () => void;
+    isActive: Readonly<import('vue').ShallowRef<boolean>>;
+    onBeforeLoop: import('@vueuse/core').EventHookOn<RafLoopContext>;
+    onLoop: import('@vueuse/core').EventHookOn<RafLoopContext>;
+    replaceLoopFunction: (fn: LoopFunction) => void;
+};
+export {};

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

@@ -2,9 +2,9 @@ import { PointerEvent, PointerEventsMap } from '@pmndrs/pointer-events';
 import { Event, Object3D, Object3DEventMap } from 'three';
 import { MaybeRef } from 'vue';
 import { TresContext } from '../useTresContextProvider';
-export declare function useEventManager({ canvas, contextParts: { scene, camera, loop }, }: {
+export declare function useEventManager({ canvas, contextParts: { scene, camera, renderer }, }: {
     canvas: MaybeRef<HTMLCanvasElement>;
-    contextParts: Pick<TresContext, 'scene' | 'camera' | 'loop'>;
+    contextParts: Pick<TresContext, 'scene' | 'camera' | 'renderer'>;
 }): {
     onPointerMissed: import('@vueuse/core').EventHookOn<PointerEvent<MouseEvent> & Event<"click", Object3D<Object3DEventMap & PointerEventsMap>>>;
 };

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

@@ -1,4 +1,3 @@
-import { Object3D } from 'three';
 import { MaybeRef } from '@vueuse/core';
 import { TresObject } from '../../types';
-export declare function useGraph(object: MaybeRef<Object3D | TresObject>): import('vue').ComputedRef<import('../..').TresObjectMap>;
+export declare function useGraph(object: MaybeRef<TresObject>): import('vue').ComputedRef<import('../..').TresObjectMap>;

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

@@ -1,17 +1,14 @@
-import { LoopCallbackFn } from './../../core/loop';
-export declare function useLoop(): {
-    pause: import('@vueuse/core').Fn;
-    resume: import('@vueuse/core').Fn;
-    pauseRender: import('@vueuse/core').Fn;
-    resumeRender: import('@vueuse/core').Fn;
-    isActive: import('vue').Ref<boolean, boolean>;
-    onBeforeRender: (cb: LoopCallbackFn, index?: number) => {
-        off: import('@vueuse/core').Fn;
-    };
-    render: (cb: LoopCallbackFn) => {
-        off: import('@vueuse/core').Fn;
-    };
-    onAfterRender: (cb: LoopCallbackFn, index?: number) => {
-        off: import('@vueuse/core').Fn;
-    };
+import { RafLoopContext } from '../useCreateRafLoop';
+import { TresPartialContext } from '../useTres';
+export type LoopContext = RafLoopContext & TresPartialContext;
+/**
+ * Composable that provides control over the render loop and animation lifecycle.
+ */
+export declare const useLoop: () => {
+    stop: () => void;
+    start: () => void;
+    isActive: Readonly<import('vue').ShallowRef<boolean>>;
+    onBeforeRender: import('../../utils/createPriorityEventHook').PriorityEventHookOn<LoopContext>;
+    onRender: import('../../utils/createPriorityEventHook').PriorityEventHookOn<LoopContext>;
+    render: (fn: (notifySuccess: () => void) => void) => void;
 };

package/dist/src/composables/useRenderer/useRendererManager.d.ts

@@ -1,7 +1,6 @@
-import { RendererLoop } from './../../core/loop';
 import { ColorRepresentation, ColorSpace, ShadowMapType, ToneMapping, WebGLRenderer } from 'three';
 import { TresContext } from '../useTresContextProvider';
-import { MaybeRef, ShallowRef } from 'vue';
+import { MaybeRef, Reactive, ShallowRef } from 'vue';
 import { Renderer } from 'three/webgpu';
 import { SizesType } from '../useSizes';
 import { UseCameraReturn } from '../useCamera';
@@ -166,23 +165,29 @@ export interface TresRendererSetupContext {
     sizes: SizesType;
     scene: ShallowRef<TresScene>;
     camera: UseCameraReturn;
-    loop: RendererLoop;
     canvas: MaybeRef<HTMLCanvasElement>;
 }
 export interface UseRendererOptions {
     scene: ShallowRef<TresScene>;
     canvas: MaybeRef<HTMLCanvasElement>;
-    options: RendererOptions;
-    contextParts: Pick<TresContext, 'sizes' | 'camera' | 'loop'>;
+    options: Reactive<RendererOptions>;
+    contextParts: Pick<TresContext, 'sizes' | 'camera'>;
 }
-export declare function useRendererManager({ scene, canvas, options, contextParts: { sizes, loop, camera }, }: UseRendererOptions): {
+export declare function useRendererManager({ scene, canvas, options, contextParts: { sizes, camera }, }: UseRendererOptions): {
+    loop: {
+        start: () => void;
+        stop: () => void;
+        isActive: Readonly<ShallowRef<boolean>>;
+        onBeforeLoop: import('@vueuse/core').EventHookOn<import('../useCreateRafLoop').RafLoopContext>;
+        onLoop: import('@vueuse/core').EventHookOn<import('../useCreateRafLoop').RafLoopContext>;
+        replaceLoopFunction: (fn: (notifySuccess: () => void) => void) => void;
+    };
     instance: TresRenderer;
     advance: () => void;
-    onRender: import('@vueuse/core').EventHookOn<TresRenderer>;
     onReady: import('@vueuse/core').EventHookOn<TresRenderer>;
+    onRender: import('@vueuse/core').EventHookOn<TresRenderer>;
     invalidate: (amountOfFramesToInvalidate?: number) => void;
     canBeInvalidated: import('vue').ComputedRef<boolean>;
-    frames: import('vue').Ref<number, number>;
     mode: "always" | "on-demand" | "manual" | undefined;
 };
 export type UseRendererManagerReturn = ReturnType<typeof useRendererManager>;

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

@@ -1,5 +1,4 @@
 import { MaybeRef, MaybeRefOrGetter, Ref, ShallowRef } from 'vue';
-import { RendererLoop } from '../../core/loop';
 import { TresControl, TresScene } from '../../types';
 import { RendererOptions, UseRendererManagerReturn } from '../useRenderer/useRendererManager';
 import { UseCameraReturn } from '../useCamera/';
@@ -12,7 +11,6 @@ export interface TresContext {
     camera: UseCameraReturn;
     controls: Ref<TresControl | null>;
     renderer: UseRendererManagerReturn;
-    loop: RendererLoop;
     events: ReturnType<typeof useEventManager>;
 }
 export declare function useTresContextProvider({ scene, canvas, windowSize, rendererOptions, }: {

package/dist/src/index.d.ts

@@ -5,7 +5,6 @@ import { default as templateCompilerOptions } from './utils/template-compiler-op
 export * from './components';
 export * from './composables';
 export * from './core/catalogue';
-export * from './core/loop';
 export * from './directives';
 export * from './types';
 export * from './utils/graph';

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

@@ -57,6 +57,12 @@ export interface TresObject3D extends THREE.Object3D<THREE.Object3DEventMap> {
 export type TresObject = TresBaseObject & (TresObject3D | THREE.BufferGeometry | THREE.Material | THREE.Fog) & {
     __tres?: LocalState;
 };
+/**
+ * Union type covering all common Three.js material types
+ * This provides better TypeScript intellisense and type checking
+ * when accessing specific material properties
+ */
+export type TresMaterial = THREE.MeshBasicMaterial | THREE.MeshStandardMaterial | THREE.MeshPhysicalMaterial | THREE.MeshLambertMaterial | THREE.MeshPhongMaterial | THREE.MeshToonMaterial | THREE.MeshNormalMaterial | THREE.MeshMatcapMaterial | THREE.MeshDepthMaterial | THREE.MeshDistanceMaterial | THREE.LineBasicMaterial | THREE.LineDashedMaterial | THREE.PointsMaterial | THREE.SpriteMaterial | THREE.ShaderMaterial | THREE.RawShaderMaterial | THREE.ShadowMaterial | THREE.Material;
 export type TresInstance = TresObject & {
     __tres: LocalState;
 };
@@ -93,6 +99,10 @@ export type TresEuler = THREE.Euler;
 export type TresControl = THREE.EventDispatcher & {
     enabled: boolean;
 };
+export type TresContextWithClock = TresContext & {
+    delta: number;
+    elapsed: number;
+};
 export type WithMathProps<P> = {
     [K in keyof P]: P[K] extends MathRepresentation | THREE.Euler ? MathType<P[K]> : P[K];
 };

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

@@ -1,12 +1,10 @@
-import { EventHookOff, IsAny } from '@vueuse/core';
-export type Callback<T> = IsAny<T> extends true ? (param: any) => void : ([
-    T
-] extends [void] ? () => void : (param: T) => void);
+import { EventHookOff, EventHookTrigger } from '@vueuse/core';
+export type Callback<T> = Parameters<EventHookOff<T>>[0];
 export type PriorityEventHookOn<T> = (fn: Callback<T>, priority?: number) => {
     off: () => void;
 };
 export type PriorityEventHookOff<T> = EventHookOff<T>;
-export type PriorityEventHookTrigger<T = any> = (param?: T) => void;
+export type PriorityEventHookTrigger<T> = EventHookTrigger<T>;
 export interface PriorityEventHook<T = any> {
     on: PriorityEventHookOn<T>;
     off: (fn: Callback<T>) => void;

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

@@ -1,14 +1,15 @@
-import { Material, Mesh, Object3D, Scene } from 'three';
+import { Mesh, Scene } from 'three';
+import { TresMaterial, TresObject } from '../types';
 export interface TresObjectMap {
     nodes: {
-        [name: string]: Object3D;
+        [name: string]: TresObject;
     };
     materials: {
-        [name: string]: Material;
+        [name: string]: TresMaterial;
     };
     meshes: {
         [name: string]: Mesh;
     };
     scene?: Scene;
 }
-export declare function buildGraph(object: Object3D): TresObjectMap;
+export declare function buildGraph(object: TresObject): TresObjectMap;