@tresjs/core
Advanced tools
Comparing version 1.7.0 to 1.8.0
import { PerspectiveCamera, OrthographicCamera } from 'three'; | ||
import { ComputedRef } from 'vue'; | ||
import { Ref } from 'vue'; | ||
export declare enum CameraType { | ||
@@ -8,25 +8,90 @@ Perspective = "Perspective", | ||
export type Camera = PerspectiveCamera | OrthographicCamera; | ||
export type CameraState = { | ||
cameras: Array<Camera>; | ||
}; | ||
export interface PerspectiveCameraOptions { | ||
/** | ||
* Camera frustum vertical field of view, from bottom to top of view, in degrees. | ||
* | ||
* @type {number} | ||
* @memberof PerspectiveCameraOptions | ||
*/ | ||
fov?: number; | ||
/** | ||
* Camera frustum near plane. | ||
* | ||
* @type {number} | ||
* @memberof PerspectiveCameraOptions | ||
*/ | ||
near?: number; | ||
/** | ||
* Camera frustum far plane. | ||
* | ||
* @type {number} | ||
* @memberof PerspectiveCameraOptions | ||
*/ | ||
far?: number; | ||
} | ||
export interface OrthographicCameraOptions { | ||
/** | ||
* Camera frustum left plane. | ||
* | ||
* @type {number} | ||
* @memberof OrthographicCameraOptions | ||
*/ | ||
left?: number; | ||
/** | ||
* Camera frustum right plane. | ||
* | ||
* @type {number} | ||
* @memberof OrthographicCameraOptions | ||
*/ | ||
right?: number; | ||
/** | ||
* Camera frustum top plane. | ||
* | ||
* @type {number} | ||
* @memberof OrthographicCameraOptions | ||
*/ | ||
top?: number; | ||
/** | ||
* Camera frustum bottom plane. | ||
* | ||
* @type {number} | ||
* @memberof OrthographicCameraOptions | ||
*/ | ||
bottom?: number; | ||
/** | ||
* Camera frustum near plane. | ||
* | ||
* @type {number} | ||
* @memberof OrthographicCameraOptions | ||
*/ | ||
near?: number; | ||
/** | ||
* Camera frustum far plane. | ||
* | ||
* @type {number} | ||
* @memberof OrthographicCameraOptions | ||
*/ | ||
far?: number; | ||
} | ||
interface UseCameraReturn { | ||
activeCamera: ComputedRef<Camera>; | ||
activeCamera: Ref<Camera | undefined>; | ||
createCamera: (cameraType?: CameraType, options?: PerspectiveCameraOptions | OrthographicCameraOptions) => Camera; | ||
updateCamera: () => void; | ||
pushCamera: (camera: Camera) => void; | ||
clearCameras: () => void; | ||
} | ||
/** | ||
* Create and update cameras | ||
* | ||
* ```ts | ||
* import { useCamera } from '@tresjs/core' | ||
* const { createCamera, updateCamera } = useCamera() | ||
* const camera = createCamera(new PerspectiveCamera(45, 1, 0.1, 1000)) | ||
* updateCamera() | ||
* ``` | ||
* | ||
* @export | ||
* @return {*} {UseCameraReturn} | ||
*/ | ||
export declare function useCamera(): UseCameraReturn; | ||
export {}; |
import { App, Ref } from 'vue'; | ||
import { TresCatalogue } from '../../types'; | ||
/** | ||
* State for the catalogue of THREE objects | ||
* | ||
* ```ts | ||
* const { catalogue } = useCatalogue() | ||
* | ||
* console.log(catalogue.value.Mesh) // Mesh | ||
* ``` | ||
* | ||
* @export | ||
* @param {App} [app] | ||
* @param {string} [prefix='Tres'] | ||
* @return {*} | ||
*/ | ||
export declare function useCatalogue(app?: App, prefix?: string): { | ||
@@ -4,0 +18,0 @@ extend: (objects: any) => void; |
import { Ref } from 'vue'; | ||
import { TresCatalogue, TresInstance, TresVNode } from '../../types'; | ||
/** | ||
* Composable responsible for creating instances out of Three.js objects. | ||
* | ||
* @export | ||
* @param {string} prefix | ||
* @return {*} | ||
*/ | ||
export declare function useInstanceCreator(prefix: string): { | ||
@@ -4,0 +11,0 @@ createComponentInstances: (catalogue: Ref<TresCatalogue>) => (string | import("vue").DefineComponent<{}, () => void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>)[][]; |
@@ -8,2 +8,9 @@ import { Object3D } from 'three'; | ||
export type LoaderReturnType<T, L extends LoaderProto<T>> = T extends unknown ? Awaited<ReturnType<InstanceType<L>['loadAsync']>> : T; | ||
/** | ||
* Traverse an object and return all the nodes and materials | ||
* | ||
* @export | ||
* @param {Object3D} object | ||
* @return { [key: string]: any } | ||
*/ | ||
export declare function trasverseObjects(object: Object3D): { | ||
@@ -15,2 +22,25 @@ [key: string]: any; | ||
}> = (loader: T['prototype']) => void; | ||
/** | ||
* Load resources using THREE loaders and return the result as a promise | ||
* | ||
* @see https://tresjs.org/api/composables.html#useloader | ||
* @see https://threejs.org/docs/index.html?q=loader#api/en/loaders/Loader | ||
* | ||
* ```ts | ||
* import { useLoader } from '@tresjs/core' | ||
* import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader' | ||
* | ||
* const { scene } = await useLoader(THREE.GLTFLoader, 'path/to/asset.gltf') | ||
* ``` | ||
* | ||
* @export | ||
* @template T | ||
* @template U | ||
* @param {T} Loader | ||
* @param {U} url | ||
* @param {Extensions<T>} [extensions] | ||
* @param {(event: ProgressEvent<EventTarget>) => void} [onProgress] | ||
* @param {(proto: TresLoader<T>) => void} [cb] | ||
* @return {*} | ||
*/ | ||
export declare function useLoader<T extends LoaderProto<T>, U extends string | string[]>(Loader: T, url: U, extensions?: Extensions<T>, onProgress?: (event: ProgressEvent<EventTarget>) => void, cb?: (proto: TresLoader<T>) => void): Promise<U extends any[] ? LoaderReturnType<T, T>[] : LoaderReturnType<T, T>>; |
import { Raycaster, Vector2 } from 'three'; | ||
export declare function useRaycaster(): { | ||
raycaster: import("vue").ShallowRef<Raycaster>; | ||
pointer: import("vue").Ref<{ | ||
x: number; | ||
y: number; | ||
width: number; | ||
height: number; | ||
readonly isVector2: true; | ||
set: (x: number, y: number) => Vector2; | ||
setScalar: (scalar: number) => Vector2; | ||
setX: (x: number) => Vector2; | ||
setY: (y: number) => Vector2; | ||
setComponent: (index: number, value: number) => Vector2; | ||
getComponent: (index: number) => number; | ||
clone: () => Vector2; | ||
copy: (v: Vector2) => Vector2; | ||
add: (v: Vector2, w?: Vector2 | undefined) => Vector2; | ||
addScalar: (s: number) => Vector2; | ||
addVectors: (a: Vector2, b: Vector2) => Vector2; | ||
addScaledVector: (v: Vector2, s: number) => Vector2; | ||
sub: (v: Vector2) => Vector2; | ||
subScalar: (s: number) => Vector2; | ||
subVectors: (a: Vector2, b: Vector2) => Vector2; | ||
multiply: (v: Vector2) => Vector2; | ||
multiplyScalar: (scalar: number) => Vector2; | ||
divide: (v: Vector2) => Vector2; | ||
divideScalar: (s: number) => Vector2; | ||
applyMatrix3: (m: import("three").Matrix3) => Vector2; | ||
min: (v: Vector2) => Vector2; | ||
max: (v: Vector2) => Vector2; | ||
clamp: (min: Vector2, max: Vector2) => Vector2; | ||
clampScalar: (min: number, max: number) => Vector2; | ||
clampLength: (min: number, max: number) => Vector2; | ||
floor: () => Vector2; | ||
ceil: () => Vector2; | ||
round: () => Vector2; | ||
roundToZero: () => Vector2; | ||
negate: () => Vector2; | ||
dot: (v: Vector2) => number; | ||
cross: (v: Vector2) => number; | ||
lengthSq: () => number; | ||
length: () => number; | ||
lengthManhattan: () => number; | ||
manhattanLength: () => number; | ||
normalize: () => Vector2; | ||
angle: () => number; | ||
distanceTo: (v: Vector2) => number; | ||
distanceToSquared: (v: Vector2) => number; | ||
distanceToManhattan: (v: Vector2) => number; | ||
manhattanDistanceTo: (v: Vector2) => number; | ||
setLength: (length: number) => Vector2; | ||
lerp: (v: Vector2, alpha: number) => Vector2; | ||
lerpVectors: (v1: Vector2, v2: Vector2, alpha: number) => Vector2; | ||
equals: (v: Vector2) => boolean; | ||
fromArray: (array: number[] | ArrayLike<number>, offset?: number | undefined) => Vector2; | ||
toArray: { | ||
(array?: number[] | undefined, offset?: number | undefined): number[]; | ||
(array?: import("three").Vector2Tuple | undefined, offset?: 0 | undefined): import("three").Vector2Tuple; | ||
(array: ArrayLike<number>, offset?: number | undefined): ArrayLike<number>; | ||
}; | ||
fromBufferAttribute: (attribute: import("three").BufferAttribute, index: number) => Vector2; | ||
rotateAround: (center: Vector2, angle: number) => Vector2; | ||
random: () => Vector2; | ||
}>; | ||
}; | ||
import { Ref, ShallowRef } from 'vue'; | ||
/** | ||
* Raycaster composable return type | ||
* | ||
* @export | ||
* @interface UseRaycasterReturn | ||
*/ | ||
export interface UseRaycasterReturn { | ||
/** | ||
* Raycaster instance | ||
* | ||
* @type {ShallowRef<Raycaster>} | ||
* @memberof UseRaycasterReturn | ||
*/ | ||
raycaster: ShallowRef<Raycaster>; | ||
/** | ||
* Pointer position | ||
* | ||
* @type {Ref<Vector2>} | ||
* @memberof UseRaycasterReturn | ||
*/ | ||
pointer: Ref<Vector2>; | ||
} | ||
/** | ||
* Composable to provide raycaster support and pointer information | ||
* | ||
* @see https://threejs.org/docs/index.html?q=raycas#api/en/core/Raycaster | ||
* @export | ||
* @return {*} {UseRaycasterReturn} | ||
*/ | ||
export declare function useRaycaster(): UseRaycasterReturn; |
import { ShadowMapType, TextureEncoding, ToneMapping } from 'three'; | ||
import { PropType } from 'vue'; | ||
/** | ||
* Vue component for rendering a Tres component. | ||
*/ | ||
export declare const TresCanvas: import("vue").DefineComponent<{ | ||
shadows: BooleanConstructor; | ||
shadowMapType: PropType<ShadowMapType>; | ||
physicallyCorrectLights: BooleanConstructor; | ||
physicallyCorrectLights: { | ||
type: BooleanConstructor; | ||
default: boolean; | ||
validator: (value: boolean) => boolean; | ||
}; | ||
useLegacyLights: BooleanConstructor; | ||
outputEncoding: PropType<TextureEncoding>; | ||
@@ -27,3 +29,8 @@ toneMapping: PropType<ToneMapping>; | ||
shadowMapType: PropType<ShadowMapType>; | ||
physicallyCorrectLights: BooleanConstructor; | ||
physicallyCorrectLights: { | ||
type: BooleanConstructor; | ||
default: boolean; | ||
validator: (value: boolean) => boolean; | ||
}; | ||
useLegacyLights: BooleanConstructor; | ||
outputEncoding: PropType<TextureEncoding>; | ||
@@ -44,4 +51,5 @@ toneMapping: PropType<ToneMapping>; | ||
physicallyCorrectLights: boolean; | ||
useLegacyLights: boolean; | ||
preserveDrawingBuffer: boolean; | ||
windowSize: boolean; | ||
}>; |
export declare const rendererPresets: { | ||
realistic: { | ||
physicallyCorrectLights: boolean; | ||
outputEncoding: import("three").TextureEncoding; | ||
@@ -5,0 +4,0 @@ toneMapping: import("three").ToneMapping; |
@@ -26,5 +26,13 @@ import { MaybeComputedRef, MaybeElementRef } from '@vueuse/core'; | ||
* @default false | ||
* @deprecated Use {@link WebGLRenderer.useLegacyLights useLegacyLights} instead. | ||
*/ | ||
physicallyCorrectLights?: MaybeComputedRef<boolean>; | ||
/** | ||
* Whether to use legacy lighting mode. | ||
* | ||
* @type {MaybeComputedRef<boolean>} | ||
* @memberof UseRendererOptions | ||
*/ | ||
useLegacyLights?: MaybeComputedRef<boolean>; | ||
/** | ||
* Defines the output encoding of the renderer. | ||
@@ -81,3 +89,4 @@ * Can be LinearEncoding, sRGBEncoding | ||
* @param canvas | ||
* @param options | ||
* @param container | ||
* @param {UseRendererOptions} [options] | ||
*/ | ||
@@ -84,0 +93,0 @@ export declare function useRenderer(canvas: MaybeElementRef, container: MaybeElementRef, options: UseRendererOptions): { |
import { Scene } from 'three'; | ||
/** | ||
* Composable for accessing the scene. | ||
* | ||
* @export | ||
* @return {*} {ShallowRef<Scene>} | ||
*/ | ||
export declare function useScene(): { | ||
scene: import("vue").ShallowRef<Scene>; | ||
}; |
import { Texture } from 'three'; | ||
export interface PBRMaterialOptions { | ||
/** | ||
* List of texture maps to load. | ||
* | ||
* @type {string[]} | ||
* @memberof PBRMaterialOptions | ||
*/ | ||
maps: string[]; | ||
/** | ||
* Path to the texture maps. | ||
* | ||
* @type {('png' | 'jpg')} | ||
* @memberof PBRMaterialOptions | ||
*/ | ||
ext: 'png' | 'jpg'; | ||
@@ -9,4 +21,30 @@ } | ||
} | ||
/** | ||
* Composable for loading textures. | ||
* | ||
* @see https://tresjs.org/examples/load-textures.html | ||
* | ||
* ```ts | ||
* import { useTexture } from 'tres' | ||
* | ||
* const pbrTexture = await useTexture({ | ||
* map: 'path/to/texture.png', | ||
* displacementMap: 'path/to/displacement-map.png', | ||
* roughnessMap: 'path/to/roughness-map.png', | ||
* normalMap: 'path/to/normal-map.png', | ||
* ambientOcclusionMap: 'path/to/ambient-occlusion-map.png', | ||
* }) | ||
* ``` | ||
* Then you can use the texture in your material. | ||
* | ||
* ```vue | ||
* <TresMeshStandardMaterial v-bind="pbrTexture" /> | ||
* ``` | ||
* | ||
* @export | ||
* @param {(Array<string> | { [key: string]: string })} paths | ||
* @return {*} {(Promise<Texture | Array<Texture> | PBRTextureMaps>)} | ||
*/ | ||
export declare function useTexture(paths: Array<string> | { | ||
[key: string]: string; | ||
}): Promise<Texture | Array<Texture> | PBRTextureMaps>; |
@@ -5,10 +5,84 @@ import { Clock, EventDispatcher, Raycaster, Scene, Vector2, WebGLRenderer } from 'three'; | ||
export interface TresState { | ||
camera?: ComputedRef<Camera>; | ||
/** | ||
* The active camera used for rendering the scene. | ||
* | ||
* @see https://threejs.org/docs/index.html?q=camera#api/en/cameras/Camera | ||
* | ||
* @type {Camera} | ||
* @memberof TresState | ||
*/ | ||
camera?: Camera; | ||
/** | ||
* All cameras available in the scene. | ||
* | ||
* @see https://threejs.org/docs/index.html?q=camera#api/en/cameras/Camera | ||
* | ||
* @type {Camera[]} | ||
* @memberof TresState | ||
*/ | ||
cameras?: Camera[]; | ||
/** | ||
* The aspect ratio of the scene. | ||
* | ||
* @type {ComputedRef<number>} | ||
* @memberof TresState | ||
*/ | ||
aspectRatio?: ComputedRef<number>; | ||
/** | ||
* The WebGLRenderer used to display the scene using WebGL. | ||
* | ||
* @see https://threejs.org/docs/index.html?q=webglren#api/en/renderers/WebGLRenderer | ||
* | ||
* @type {WebGLRenderer} | ||
* @memberof TresState | ||
*/ | ||
renderer?: WebGLRenderer; | ||
/** | ||
* The scene. This is the place where you place objects, lights and cameras. | ||
* | ||
* @see https://threejs.org/docs/index.html?q=scene#api/en/scenes/Scene | ||
* | ||
* @type {Scene} | ||
* @memberof TresState | ||
*/ | ||
scene?: Scene; | ||
/** | ||
* The raycaster. | ||
* | ||
* @see https://threejs.org/docs/index.html?q=raycas#api/en/core/Raycaster | ||
* | ||
* @type {Raycaster} | ||
* @memberof TresState | ||
*/ | ||
raycaster?: Raycaster; | ||
/** | ||
* Object for keeping track of time. This uses `performance.now` if it is available, | ||
* otherwise it reverts to the less accurate `Date.now`. | ||
* | ||
* @see https://threejs.org/docs/index.html?q=clock#api/en/core/Clock | ||
* | ||
* @type {Clock} | ||
* @memberof TresState | ||
*/ | ||
clock?: Clock; | ||
/** | ||
* The current mouse position. | ||
* | ||
* @type {Vector2} | ||
* @memberof TresState | ||
*/ | ||
pointer?: Vector2; | ||
/** | ||
* The current instance of the component. | ||
* | ||
* @type {*} | ||
* @memberof TresState | ||
*/ | ||
currentInstance?: any; | ||
/** | ||
* The current active scene control | ||
* | ||
* @type {((EventDispatcher & { enabled: boolean }) | null)} | ||
* @memberof TresState | ||
*/ | ||
controls?: (EventDispatcher & { | ||
@@ -19,6 +93,15 @@ enabled: boolean; | ||
} | ||
/** | ||
* The Tres state. | ||
* | ||
* @see https://threejs.org/docs/index.html?q=scene#api/en/scenes/Scene | ||
* | ||
* @export | ||
* @return {*} {TresState, getState, setState} | ||
*/ | ||
export declare function useTres(): { | ||
getState: (key: string) => any; | ||
setState: (key: string, value: any) => void; | ||
camera?: import("vue").Ref<ComputedRef<Camera> | undefined> | undefined; | ||
camera?: import("vue").Ref<Camera | undefined> | undefined; | ||
cameras?: import("vue").Ref<Camera[] | undefined> | undefined; | ||
aspectRatio?: import("vue").Ref<ComputedRef<number> | undefined> | undefined; | ||
@@ -25,0 +108,0 @@ renderer?: import("vue").Ref<WebGLRenderer | undefined> | undefined; |
602
dist/tres.js
/** | ||
* name: @tresjs/core | ||
* version: v1.7.0 | ||
* version: v1.8.0 | ||
* (c) 2023 | ||
@@ -8,24 +8,22 @@ * description: Declarative ThreeJS using Vue Components | ||
*/ | ||
import { computed as me, watch as U, ref as R, inject as de, defineComponent as Z, onUnmounted as ge, shallowRef as ee, shallowReactive as be, toRefs as we, provide as L, onBeforeUnmount as Be, h as ie } from "vue"; | ||
import { useEventListener as Oe, createEventHook as te, useRafFn as Ae, resolveUnref as m, useWindowSize as Ie, useElementSize as Fe, useDevicePixelRatio as $e, unrefElement as J } from "@vueuse/core"; | ||
import * as ce from "three"; | ||
import { PerspectiveCamera as _, OrthographicCamera as he, Vector3 as je, Color as X, Mesh as ke, Fog as ze, BufferAttribute as De, Clock as ve, Scene as Ue, LoadingManager as _e, TextureLoader as Ne, Raycaster as Ve, Vector2 as We, sRGBEncoding as Ge, ACESFilmicToneMapping as He, PCFSoftShadowMap as Ke, PCFShadowMap as Je, LinearEncoding as ue, NoToneMapping as le, WebGLRenderer as Xe } from "three"; | ||
var Ye = /* @__PURE__ */ ((e) => (e.Perspective = "Perspective", e.Orthographic = "Orthographic", e))(Ye || {}); | ||
const B = { | ||
cameras: [] | ||
}, qe = 45; | ||
import { watch as j, toRef as Oe, ref as M, inject as de, defineComponent as Q, onUnmounted as ge, shallowRef as ee, shallowReactive as Ae, computed as he, toRefs as we, provide as b, onBeforeUnmount as Be, h as K } from "vue"; | ||
import { useEventListener as Ie, createEventHook as te, useRafFn as Fe, resolveUnref as h, useWindowSize as _e, useElementSize as Ue, useDevicePixelRatio as je, unrefElement as X } from "@vueuse/core"; | ||
import * as se from "three"; | ||
import { PerspectiveCamera as z, OrthographicCamera as ye, Vector3 as ze, Color as Y, Mesh as De, Fog as We, BufferAttribute as ke, Clock as ve, Scene as Ne, LoadingManager as Ve, TextureLoader as He, Raycaster as Ge, Vector2 as Ke, sRGBEncoding as Xe, ACESFilmicToneMapping as Ye, PCFSoftShadowMap as Je, PCFShadowMap as Ze, LinearEncoding as ce, NoToneMapping as le, WebGLRenderer as qe } from "three"; | ||
var Qe = /* @__PURE__ */ ((e) => (e.Perspective = "Perspective", e.Orthographic = "Orthographic", e))(Qe || {}); | ||
const et = 45; | ||
let P; | ||
function ye() { | ||
function Se() { | ||
const { state: e, setState: n } = T(); | ||
function o(p = "Perspective", t) { | ||
var s; | ||
if (p === "Perspective") { | ||
const { near: c, far: a, fov: u } = t || { | ||
function o(u = "Perspective", t) { | ||
var r, l, s; | ||
if (u === "Perspective") { | ||
const { near: i, far: f, fov: g } = t || { | ||
near: 0.1, | ||
far: 1e3, | ||
fov: qe | ||
fov: et | ||
}; | ||
P = new _(u, ((s = e.aspectRatio) == null ? void 0 : s.value) || 1, c, a), B.cameras.push(P); | ||
P = new z(g, ((r = e.aspectRatio) == null ? void 0 : r.value) || window.innerWidth / window.innerHeight, i, f), (l = e.cameras) == null || l.push(P); | ||
} else { | ||
const { left: c, right: a, top: u, bottom: f, near: S, far: g } = t || { | ||
const { left: i, right: f, top: g, bottom: v, near: p, far: m } = t || { | ||
left: -100, | ||
@@ -38,30 +36,34 @@ right: 100, | ||
}; | ||
P = new he(c, a, u, f, S, g), B.cameras.push(P); | ||
P = new ye(i, f, g, v, p, m), (s = e.cameras) == null || s.push(P); | ||
} | ||
return B.cameras.push(P), P; | ||
return e.camera = P, n("camera", e.camera), P; | ||
} | ||
const r = me(() => B.cameras[0]); | ||
n("camera", r); | ||
function i() { | ||
r.value instanceof _ && e.aspectRatio && (r.value.aspect = e.aspectRatio.value), r.value.updateProjectionMatrix(); | ||
function a() { | ||
var u; | ||
e.camera instanceof z && e.aspectRatio && (e.camera.aspect = e.aspectRatio.value), (u = e.camera) == null || u.updateProjectionMatrix(); | ||
} | ||
function l(p) { | ||
B.cameras.push(p), p instanceof _ && e.aspectRatio && (p.aspect = e.aspectRatio.value), p.updateProjectionMatrix(); | ||
function c(u) { | ||
var t; | ||
(t = e.cameras) == null || t.push(u), u instanceof z && e.aspectRatio && (u.aspect = e.aspectRatio.value), u.updateProjectionMatrix(), n("camera", u); | ||
} | ||
return e.aspectRatio && U(e.aspectRatio, i), { | ||
activeCamera: r, | ||
function d() { | ||
e.cameras = []; | ||
} | ||
return e.aspectRatio && j(e.aspectRatio, a), { | ||
activeCamera: Oe(e, "camera"), | ||
createCamera: o, | ||
updateCamera: i, | ||
pushCamera: l | ||
updateCamera: a, | ||
pushCamera: c, | ||
clearCameras: d | ||
}; | ||
} | ||
const fe = "[TresJS ▲ ■ ●] "; | ||
function $() { | ||
function e(r, i) { | ||
console.error(`${fe} ${r}`, i || ""); | ||
const ue = "[TresJS ▲ ■ ●] "; | ||
function I() { | ||
function e(a, c) { | ||
console.error(`${ue} ${a}`, c || ""); | ||
} | ||
function n(r) { | ||
console.warn(`${fe} ${r}`); | ||
function n(a) { | ||
console.warn(`${ue} ${a}`); | ||
} | ||
function o(r, i) { | ||
function o(a, c) { | ||
} | ||
@@ -74,62 +76,80 @@ return { | ||
} | ||
const N = R({ ...ce, uuid: ce.MathUtils.generateUUID() }); | ||
delete N.value.Scene; | ||
const D = M({ ...se, uuid: se.MathUtils.generateUUID() }); | ||
delete D.value.Scene; | ||
let O; | ||
function Se(e, n = "Tres") { | ||
const { logError: o } = $(); | ||
function Ce(e, n = "Tres") { | ||
const { logError: o } = I(); | ||
!O && e && (O = e); | ||
const { createComponentInstances: r } = Me(n); | ||
const { createComponentInstances: a } = Ee(n); | ||
return { | ||
extend: (l) => { | ||
if (!l) { | ||
extend: (d) => { | ||
if (!d) { | ||
o("No objects provided to extend catalogue"); | ||
return; | ||
} | ||
N.value = Object.assign(N.value, l); | ||
const p = r(R(l)); | ||
O && p.forEach(([t, s]) => { | ||
O._context.components[t] || O.component(t, s); | ||
D.value = Object.assign(D.value, d); | ||
const u = a(M(d)); | ||
O && u.forEach(([t, r]) => { | ||
O._context.components[t] || O.component(t, r); | ||
}); | ||
}, | ||
catalogue: N | ||
catalogue: D | ||
}; | ||
} | ||
const A = (e) => typeof e < "u", Qe = (e) => typeof e == "function", G = (e) => !!e && e.constructor === Array; | ||
function Ze(e) { | ||
return typeof e == "number" ? [e, e, e] : e instanceof je ? [e.x, e.y, e.z] : e; | ||
const R = (e) => typeof e < "u", tt = (e) => typeof e == "function", N = (e) => !!e && e.constructor === Array; | ||
function nt(e) { | ||
return typeof e == "number" ? [e, e, e] : e instanceof ze ? [e.x, e.y, e.z] : e; | ||
} | ||
function et(e) { | ||
return e instanceof X ? e : Array.isArray(e) ? new X(...e) : new X(e); | ||
function rt(e) { | ||
return e instanceof Y ? e : Array.isArray(e) ? new Y(...e) : new Y(e); | ||
} | ||
const tt = ["rotation", "scale", "position"]; | ||
function Me(e) { | ||
const fe = ["rotation", "scale", "position"], ot = ["X", "Y", "Z"], at = ["color"], it = ["r", "g", "b"]; | ||
function Ee(e) { | ||
const { | ||
/* logMessage, */ | ||
logError: n | ||
} = $(); | ||
function o(t, s) { | ||
A(t) && A(s) && Object.entries(t).forEach(([c, a]) => { | ||
const u = c.replace(/(-\w)/g, (f) => f[1].toUpperCase()); | ||
s.setAttribute(u, new De(...a)); | ||
} = I(); | ||
function o(t, r) { | ||
R(t) && R(r) && Object.entries(t).forEach(([l, s]) => { | ||
const i = l.replace(/(-\w)/g, (f) => f[1].toUpperCase()); | ||
r.setAttribute(i, new ke(...s)); | ||
}); | ||
} | ||
function r(t, s) { | ||
A(t) && A(s) && Object.entries(t).forEach(([c, a]) => { | ||
const u = c.replace(/(-\w)/g, (f) => f[1].toUpperCase()); | ||
if (!(u === "args" || a === void 0)) { | ||
tt.includes(u) && a && (a = Ze(a)), t.ref && (t.ref = s); | ||
function a(t, r) { | ||
R(t) && R(r) && Object.entries(t).forEach(([l, s]) => { | ||
const i = l.replace(/(-\w)/g, (m) => m[1].toUpperCase()); | ||
let f, g, v, p; | ||
if (!(i === "args" || s === void 0)) { | ||
fe.includes(i) && s ? s = nt(s) : fe.forEach((m) => { | ||
i.startsWith(m) && i.length === m.length + 1 && (f = m, g = i.substring(m.length), ot.includes(g) || n( | ||
// eslint-disable-next-line max-len | ||
`There was an error setting ${l} property, ${g} is not a valid axis for ${f}` | ||
)); | ||
}), at.forEach((m) => { | ||
i.startsWith(m) && i.length === m.length + 1 && (v = m, p = i.substring(m.length).toLowerCase(), it.includes(p) || n(`There was an error setting ${l} property , ${p} is not a valid axis for ${v}`)); | ||
}), t.ref && (t.ref = r); | ||
try { | ||
if (s[u] && A(s[u].set)) | ||
s[u].set(...G(a) ? a : [a]); | ||
if (r[i] && R(r[i].set)) | ||
r[i].set(...N(s) ? s : [s]); | ||
else if ( | ||
// Check if the property has a "setAxis" method | ||
f && r[f] | ||
) | ||
R(r[f][`set${g}`]) ? r[f][`set${g}`](s) : R(r[`rotate${g}`]) && r[`rotate${g}`](s); | ||
else if ( | ||
// Check if the instance has a "color" property | ||
v && p && r[v] && r[v][p] | ||
) | ||
r[v][p] = s; | ||
else { | ||
if (a === "" && (a = !0), Qe(s[u])) { | ||
if (c === "center" && !a) | ||
if (s === "" && (s = !0), tt(r[i])) { | ||
if (l === "center" && !s) | ||
return; | ||
s[u](...G(a) ? a : [a]); | ||
r[i](...N(s) ? s : [s]); | ||
return; | ||
} | ||
s[u] = a; | ||
r[i] = s; | ||
} | ||
} catch (f) { | ||
n(`There was an error setting ${u} property`, f); | ||
} catch (m) { | ||
n(`There was an error setting ${i} property`, m); | ||
} | ||
@@ -139,78 +159,78 @@ } | ||
} | ||
function i(t) { | ||
var a, u; | ||
const s = /^Symbol\(Fragment\)$/g, c = /^Symbol\(Text\)$/g; | ||
if (s.test(t.type.toString())) | ||
return t.children.map((f) => i(f)); | ||
if (c.test(t.type.toString())) | ||
function c(t) { | ||
var i, f; | ||
const r = /^Symbol\(Fragment\)$/g, l = /^Symbol\(Text\)$/g, s = /^Symbol\(Comment\)$/g; | ||
if (r.test(t.type.toString())) | ||
return t.children.map((g) => c(g)); | ||
if (l.test(t.type.toString()) || s.test(t.type.toString())) | ||
return; | ||
{ | ||
const f = t.type.name.replace(e, ""), { catalogue: S } = Se(), g = de("catalogue") || S; | ||
let w; | ||
if (g) | ||
if ((a = t.children) != null && a.default) { | ||
const C = t.children.default().map((b) => i(b)); | ||
w = new g.value[f](...C.flat().filter(Boolean)); | ||
const g = t.type.name.replace(e, ""), { catalogue: v } = Ce(), p = de("catalogue") || v; | ||
let m; | ||
if (p) | ||
if ((i = t.children) != null && i.default) { | ||
const L = t.children.default().map((S) => c(S)); | ||
m = new p.value[g](...L.flat().filter(Boolean)); | ||
} else | ||
(u = t == null ? void 0 : t.props) != null && u.args ? g != null && g.value[f] ? w = new g.value[f](...t.props.args) : n(`There is no ${f} in the catalogue`, g == null ? void 0 : g.value.uuid) : w = new g.value[f](); | ||
return t != null && t.props && (f === "BufferGeometry" ? o(t.props, w) : r(t.props, w)), w; | ||
(f = t == null ? void 0 : t.props) != null && f.args ? p != null && p.value[g] ? m = new p.value[g](...t.props.args) : n(`There is no ${g} in the catalogue`, p == null ? void 0 : p.value.uuid) : m = new p.value[g](); | ||
return t != null && t.props && (g === "BufferGeometry" ? o(t.props, m) : a(t.props, m)), m; | ||
} | ||
} | ||
function l(t, s, c) { | ||
if (c.default && (c != null && c.default())) { | ||
const a = c.default().map((u) => i(u)); | ||
function d(t, r, l) { | ||
if (l.default && (l != null && l.default())) { | ||
const s = l.default().map((i) => c(i)); | ||
if (t.name === "Group") { | ||
const u = new t(); | ||
return a.forEach((f) => { | ||
u.add(f); | ||
}), u; | ||
const i = new t(); | ||
return s.forEach((f) => { | ||
i.add(f); | ||
}), i; | ||
} else | ||
return new t(...a.flat().filter(Boolean)); | ||
return new t(...s.flat().filter(Boolean)); | ||
} else | ||
return s.args ? new t(...s.args) : new t(); | ||
return r.args ? new t(...r.args) : new t(); | ||
} | ||
function p(t) { | ||
return Object.entries(t.value).filter(([s, c]) => { | ||
var a, u; | ||
return (u = (a = c == null ? void 0 : c.prototype) == null ? void 0 : a.constructor) == null ? void 0 : u.toString().includes("class"); | ||
}).map(([s, c]) => { | ||
const a = `${e}${s}`, u = Z({ | ||
name: a, | ||
setup(f, { slots: S, attrs: g, ...w }) { | ||
const { state: C } = T(), { onLoop: b } = re(), h = C.scene, j = C.raycaster, { pushCamera: E } = ye(); | ||
let v = l(c, g, S); | ||
r(g, v), (v instanceof _ || v instanceof he) && E(v), v.isObject3D && (h == null || h.add(v)); | ||
let M = null, y = null; | ||
if (v instanceof ke) { | ||
b(() => { | ||
if (v && j && (h != null && h.children)) { | ||
const z = j.intersectObjects(h == null ? void 0 : h.children); | ||
z.length > 0 ? (y = z[0], (M === null || M.object.uuid !== (y == null ? void 0 : y.object.uuid)) && w.emit("pointer-enter", y), w.emit("pointer-move", y)) : (y = null, M !== null && w.emit("pointer-leave", M)), M = y; | ||
function u(t) { | ||
return Object.entries(t.value).filter(([r, l]) => { | ||
var s, i; | ||
return (i = (s = l == null ? void 0 : l.prototype) == null ? void 0 : s.constructor) == null ? void 0 : i.toString().includes("class"); | ||
}).map(([r, l]) => { | ||
const s = `${e}${r}`, i = Q({ | ||
name: s, | ||
setup(f, { slots: g, attrs: v, ...p }) { | ||
const { state: m } = T(), { onLoop: L } = re(), S = m.scene, F = m.raycaster, { pushCamera: V } = Se(); | ||
let y = d(l, v, g); | ||
a(v, y), (y instanceof z || y instanceof ye) && V(y), y.isObject3D && (S == null || S.add(y)); | ||
let E = null, C = null; | ||
if (y instanceof De) { | ||
L(() => { | ||
if (y && F && (S != null && S.children)) { | ||
const $ = F.intersectObjects(S == null ? void 0 : S.children); | ||
$.length > 0 ? (C = $[0], (E === null || E.object.uuid !== (C == null ? void 0 : C.object.uuid)) && p.emit("pointer-enter", C), p.emit("pointer-move", C)) : (C = null, E !== null && p.emit("pointer-leave", E)), E = C; | ||
} | ||
}); | ||
const k = Oe(window, "click", () => { | ||
w.emit("click", M); | ||
const _ = Ie(window, "click", () => { | ||
p.emit("click", E); | ||
}); | ||
ge(() => { | ||
k(); | ||
_(); | ||
}); | ||
} | ||
return h && v instanceof ze && (h.fog = v), w.expose(v), () => { | ||
return S && y instanceof We && (S.fog = y), p.expose(y), () => { | ||
}; | ||
} | ||
}); | ||
return [a, u]; | ||
return [s, i]; | ||
}); | ||
} | ||
return { | ||
createComponentInstances: p, | ||
processProps: r, | ||
createInstanceFromVNode: i | ||
createComponentInstances: u, | ||
processProps: a, | ||
createInstanceFromVNode: c | ||
}; | ||
} | ||
const Ce = te(), Ee = te(), ne = te(), F = new ve(); | ||
let V = 0, W = 0; | ||
const { pause: nt, resume: rt, isActive: ot } = Ae( | ||
const Re = te(), Me = te(), ne = te(), B = new ve(); | ||
let W = 0, k = 0; | ||
const { pause: st, resume: ct, isActive: lt } = Fe( | ||
() => { | ||
Ce.trigger({ delta: V, elapsed: W, clock: F }), Ee.trigger({ delta: V, elapsed: W, clock: F }), ne.trigger({ delta: V, elapsed: W, clock: F }); | ||
Re.trigger({ delta: W, elapsed: k, clock: B }), Me.trigger({ delta: W, elapsed: k, clock: B }), ne.trigger({ delta: W, elapsed: k, clock: B }); | ||
}, | ||
@@ -220,21 +240,21 @@ { immediate: !1 } | ||
ne.on(() => { | ||
V = F.getDelta(), W = F.getElapsedTime(); | ||
W = B.getDelta(), k = B.getElapsedTime(); | ||
}); | ||
function re() { | ||
return { | ||
onBeforeLoop: Ce.on, | ||
onLoop: Ee.on, | ||
onBeforeLoop: Re.on, | ||
onLoop: Me.on, | ||
onAfterLoop: ne.on, | ||
pause: nt, | ||
resume: rt, | ||
isActive: ot | ||
pause: st, | ||
resume: ct, | ||
isActive: lt | ||
}; | ||
} | ||
const at = ee(new Ue()); | ||
function st() { | ||
const ut = ee(new Ne()); | ||
function ft() { | ||
return { | ||
scene: at | ||
scene: ut | ||
}; | ||
} | ||
function it(e) { | ||
function pt(e) { | ||
const n = { nodes: {}, materials: {} }; | ||
@@ -245,56 +265,60 @@ return e && e.traverse((o) => { | ||
} | ||
async function gt(e, n, o, r, i) { | ||
const { logError: l } = $(), p = new e(); | ||
i && i(p), o && o(p); | ||
const s = (Array.isArray(n) ? n : [n]).map( | ||
(c) => new Promise((a, u) => { | ||
p.load( | ||
c, | ||
async function Ct(e, n, o, a, c) { | ||
const { logError: d } = I(), u = new e(); | ||
c && c(u), o && o(u); | ||
const r = (Array.isArray(n) ? n : [n]).map( | ||
(l) => new Promise((s, i) => { | ||
u.load( | ||
l, | ||
(f) => { | ||
f.scene && Object.assign(f, it(f.scene)), a(f); | ||
f.scene && Object.assign(f, pt(f.scene)), s(f); | ||
}, | ||
r, | ||
(f) => u(l("[useLoader] - Failed to load resource", f)) | ||
a, | ||
(f) => i(d("[useLoader] - Failed to load resource", f)) | ||
); | ||
}) | ||
); | ||
return G(n) ? await Promise.all(s) : await s[0]; | ||
return N(n) ? await Promise.all(r) : await r[0]; | ||
} | ||
async function wt(e) { | ||
const n = new _e(), o = new Ne(n), r = (i) => new Promise((l, p) => { | ||
async function Et(e) { | ||
const n = new Ve(), o = new He(n), a = (c) => new Promise((d, u) => { | ||
o.load( | ||
i, | ||
(t) => l(t), | ||
c, | ||
(t) => d(t), | ||
() => null, | ||
() => { | ||
p(new Error("[useTextures] - Failed to load texture")); | ||
u(new Error("[useTextures] - Failed to load texture")); | ||
} | ||
); | ||
}); | ||
if (G(e)) { | ||
const i = await Promise.all(e.map((l) => r(l))); | ||
return e.length > 1 ? i : i[0]; | ||
if (N(e)) { | ||
const c = await Promise.all(e.map((d) => a(d))); | ||
return e.length > 1 ? c : c[0]; | ||
} else { | ||
const { map: i, displacementMap: l, normalMap: p, roughnessMap: t, metalnessMap: s, aoMap: c } = e; | ||
const { map: c, displacementMap: d, normalMap: u, roughnessMap: t, metalnessMap: r, aoMap: l } = e; | ||
return { | ||
map: i ? await r(i) : null, | ||
displacementMap: l ? await r(l) : null, | ||
normalMap: p ? await r(p) : null, | ||
roughnessMap: t ? await r(t) : null, | ||
metalnessMap: s ? await r(s) : null, | ||
aoMap: c ? await r(c) : null | ||
map: c ? await a(c) : null, | ||
displacementMap: d ? await a(d) : null, | ||
normalMap: u ? await a(u) : null, | ||
roughnessMap: t ? await a(t) : null, | ||
metalnessMap: r ? await a(r) : null, | ||
aoMap: l ? await a(l) : null | ||
}; | ||
} | ||
} | ||
const D = be({}); | ||
const U = Ae({ | ||
camera: void 0, | ||
cameras: [], | ||
aspectRatio: he(() => window.innerWidth / window.innerHeight) | ||
}); | ||
function T() { | ||
function e(o) { | ||
return D[o]; | ||
return U[o]; | ||
} | ||
function n(o, r) { | ||
D[o] = r; | ||
function n(o, a) { | ||
U[o] = a; | ||
} | ||
return { | ||
state: D, | ||
...we(D), | ||
state: U, | ||
...we(U), | ||
getState: e, | ||
@@ -304,8 +328,8 @@ setState: n | ||
} | ||
const Y = ee(new Ve()), I = R(new We()), pe = R(null); | ||
function ct() { | ||
const J = ee(new Ge()), A = M(new Ke()), pe = M(null); | ||
function mt() { | ||
const { setState: e } = T(); | ||
e("raycaster", Y.value), e("pointer", I), e("currentInstance", pe), L("raycaster", Y), L("pointer", I), L("currentInstance", pe); | ||
e("raycaster", J.value), e("pointer", A), e("currentInstance", pe), b("raycaster", J), b("pointer", A), b("currentInstance", pe); | ||
function n(o) { | ||
I.value.x = o.clientX / window.innerWidth * 2 - 1, I.value.y = -(o.clientY / window.innerHeight) * 2 + 1; | ||
A.value.x = o.clientX / window.innerWidth * 2 - 1, A.value.y = -(o.clientY / window.innerHeight) * 2 + 1; | ||
} | ||
@@ -315,95 +339,95 @@ return window.addEventListener("pointermove", n), ge(() => { | ||
}), { | ||
raycaster: Y, | ||
pointer: I | ||
raycaster: J, | ||
pointer: A | ||
}; | ||
} | ||
const q = { | ||
const Z = { | ||
realistic: { | ||
physicallyCorrectLights: !0, | ||
outputEncoding: Ge, | ||
toneMapping: He, | ||
outputEncoding: Xe, | ||
toneMapping: Ye, | ||
toneMappingExposure: 3, | ||
shadowMap: { | ||
enabled: !0, | ||
type: Ke | ||
type: Je | ||
} | ||
} | ||
}, Re = (e, n) => { | ||
}, Le = (e, n) => { | ||
for (const o of Object.keys(n)) | ||
n[o] instanceof Object && Object.assign(n[o], Re(e[o], n[o])); | ||
n[o] instanceof Object && Object.assign(n[o], Le(e[o], n[o])); | ||
return Object.assign(e || {}, n), e; | ||
}, d = ee(), Q = R(!1); | ||
function ut(e, n, o) { | ||
}, w = ee(), q = M(!1); | ||
function dt(e, n, o) { | ||
const { | ||
alpha: r = !0, | ||
antialias: i = !0, | ||
depth: l, | ||
logarithmicDepthBuffer: p, | ||
alpha: a = !0, | ||
antialias: c = !0, | ||
depth: d, | ||
logarithmicDepthBuffer: u, | ||
failIfMajorPerformanceCaveat: t, | ||
precision: s, | ||
premultipliedAlpha: c, | ||
stencil: a, | ||
shadows: u = !1, | ||
shadowMapType: f = Je, | ||
physicallyCorrectLights: S = !1, | ||
outputEncoding: g = ue, | ||
toneMapping: w = le, | ||
toneMappingExposure: C = 1, | ||
context: b = void 0, | ||
powerPreference: h = "default", | ||
preserveDrawingBuffer: j = !1, | ||
clearColor: E, | ||
windowSize: v = !1, | ||
preset: M = void 0 | ||
} = we(o), { width: y, height: k } = m(v) ? Ie() : Fe(n), { logError: z } = $(), { pixelRatio: oe } = $e(), { pause: xe, resume: Pe } = re(), H = me(() => y.value / k.value), ae = () => { | ||
d.value && (d.value.setSize(y.value, k.value), d.value.setPixelRatio(Math.min(oe.value, 2))); | ||
}, se = () => { | ||
if (!d.value) | ||
precision: r, | ||
premultipliedAlpha: l, | ||
stencil: s, | ||
shadows: i = !1, | ||
shadowMapType: f = Ze, | ||
physicallyCorrectLights: g = !1, | ||
useLegacyLights: v = !1, | ||
outputEncoding: p = ce, | ||
toneMapping: m = le, | ||
toneMappingExposure: L = 1, | ||
context: S = void 0, | ||
powerPreference: F = "default", | ||
preserveDrawingBuffer: V = !1, | ||
clearColor: y, | ||
windowSize: E = !1, | ||
preset: C = void 0 | ||
} = we(o), { width: _, height: $ } = h(E) ? _e() : Ue(n), { logError: xe } = I(), { pixelRatio: oe } = je(), { pause: Pe, resume: be } = re(), H = he(() => _.value / $.value), ae = () => { | ||
w.value && (w.value.setSize(_.value, $.value), w.value.setPixelRatio(Math.min(oe.value, 2))); | ||
}, ie = () => { | ||
if (!w.value) | ||
return; | ||
const x = m(M); | ||
const x = h(C); | ||
if (x) { | ||
x in q || z("Renderer Preset must be one of these: " + Object.keys(q).join(", ")), Re(d.value, q[x]); | ||
x in Z || xe("Renderer Preset must be one of these: " + Object.keys(Z).join(", ")), Le(w.value, Z[x]); | ||
return; | ||
} | ||
d.value.shadowMap.enabled = m(u), d.value.shadowMap.type = m(f), d.value.toneMapping = m(w) || le, d.value.toneMappingExposure = m(C), d.value.outputEncoding = m(g) || ue, E != null && E.value && d.value.setClearColor(et(m(E))), d.value.physicallyCorrectLights = m(S); | ||
}, Le = () => { | ||
const x = J(e); | ||
if (d.value || !x) | ||
w.value.shadowMap.enabled = h(i), w.value.shadowMap.type = h(f), w.value.toneMapping = h(m) || le, w.value.toneMappingExposure = h(L), w.value.outputEncoding = h(p) || ce, y != null && y.value && w.value.setClearColor(rt(h(y))), w.value.useLegacyLights = h(v); | ||
}, Te = () => { | ||
const x = X(e); | ||
if (w.value || !x) | ||
return; | ||
d.value = new Xe({ | ||
w.value = new qe({ | ||
canvas: x, | ||
alpha: m(r), | ||
antialias: m(i), | ||
context: m(b), | ||
depth: m(l), | ||
failIfMajorPerformanceCaveat: m(t), | ||
logarithmicDepthBuffer: m(p), | ||
powerPreference: m(h), | ||
precision: m(s), | ||
stencil: m(a), | ||
preserveDrawingBuffer: m(j), | ||
premultipliedAlpha: m(c) | ||
alpha: h(a), | ||
antialias: h(c), | ||
context: h(S), | ||
depth: h(d), | ||
failIfMajorPerformanceCaveat: h(t), | ||
logarithmicDepthBuffer: h(u), | ||
powerPreference: h(F), | ||
precision: h(r), | ||
stencil: h(s), | ||
preserveDrawingBuffer: h(V), | ||
premultipliedAlpha: h(l) | ||
}); | ||
const { setState: K } = T(); | ||
K("renderer", d.value), K("clock", new ve()), K("aspectRatio", H), se(), ae(), Pe(), Q.value = !0; | ||
}, Te = () => { | ||
d.value && (d.value.dispose(), d.value = void 0, Q.value = !1, xe()); | ||
const { setState: G } = T(); | ||
G("renderer", w.value), G("clock", new ve()), G("aspectRatio", H), ie(), ae(), be(), q.value = !0; | ||
}, $e = () => { | ||
w.value && (w.value.dispose(), w.value = void 0, q.value = !1, Pe()); | ||
}; | ||
return U([H, oe], ae), U( | ||
[u, f, g, S, w, C, E], | ||
se | ||
), U( | ||
return j([H, oe], ae), j( | ||
[i, f, p, v, m, L, y], | ||
ie | ||
), j( | ||
() => [e, n], | ||
() => { | ||
J(e) && J(n) && Le(); | ||
X(e) && X(n) && Te(); | ||
}, | ||
{ immediate: !0, deep: !0 } | ||
), { | ||
renderer: d, | ||
isReady: Q, | ||
dispose: Te, | ||
renderer: w, | ||
isReady: q, | ||
dispose: $e, | ||
aspectRatio: H | ||
}; | ||
} | ||
const lt = Z({ | ||
const { logError: me, logWarning: gt } = I(), ht = Q({ | ||
name: "TresCanvas", | ||
@@ -413,3 +437,8 @@ props: { | ||
shadowMapType: Number, | ||
physicallyCorrectLights: Boolean, | ||
physicallyCorrectLights: { | ||
type: Boolean, | ||
default: !1, | ||
validator: (e) => (e && gt("physicallyCorrectLights is deprecated. Use useLegacyLights instead."), !0) | ||
}, | ||
useLegacyLights: Boolean, | ||
outputEncoding: Number, | ||
@@ -426,16 +455,19 @@ toneMapping: Number, | ||
setup(e, { slots: n, attrs: o }) { | ||
const { logError: r } = $(), i = R(), l = R(), { renderer: p, dispose: t, aspectRatio: s } = ut(i, l, e); | ||
return L("aspect-ratio", s), L("renderer", p), n.default && !n.default().some((c) => c.type.name === "Scene") && r("TresCanvas must contain a Scene component."), n.default && !n.default().some((c) => { | ||
var a; | ||
return (a = c.type.name) == null ? void 0 : a.includes("Camera"); | ||
}) && r("Scene must contain a Camera component."), Be(() => t()), () => { | ||
const a = M(), c = M(), { renderer: d, dispose: u, aspectRatio: t } = dt(a, c, e); | ||
return b("aspect-ratio", t), b("renderer", d), n.default && !n.default().some((r) => r.type.name === "Scene") && me("TresCanvas must contain a Scene component."), n.default && !n.default().some((r) => { | ||
var l; | ||
return (l = r.type.name) == null ? void 0 : l.includes("Camera"); | ||
}) && me("Scene must contain a Camera component."), Be(() => u()), () => { | ||
if (n.default) | ||
return ie( | ||
return K( | ||
"div", | ||
{ | ||
ref: l, | ||
ref: c, | ||
style: { | ||
position: "relative", | ||
width: "100%", | ||
height: "100vh", | ||
height: "100%", | ||
overflow: "hidden", | ||
pointerEvents: "auto", | ||
touchAction: "none", | ||
...o.style | ||
@@ -445,13 +477,25 @@ } | ||
[ | ||
ie("canvas", { | ||
ref: i, | ||
style: { | ||
width: "100%", | ||
height: "100%", | ||
position: e.windowSize ? "fixed" : "absolute", | ||
top: 0, | ||
left: 0 | ||
} | ||
}), | ||
n.default() | ||
K( | ||
"div", | ||
{ | ||
style: { | ||
width: "100%", | ||
height: "100%" | ||
} | ||
}, | ||
[ | ||
K("canvas", { | ||
ref: a, | ||
style: { | ||
display: "block", | ||
width: "100%", | ||
height: "100%", | ||
position: e.windowSize ? "fixed" : "absolute", | ||
top: 0, | ||
left: 0 | ||
} | ||
}), | ||
n.default() | ||
] | ||
) | ||
] | ||
@@ -461,8 +505,8 @@ ); | ||
} | ||
}), ft = Z({ | ||
}), wt = Q({ | ||
name: "Scene", | ||
setup(e, { slots: n }) { | ||
const { setState: o } = T(), { scene: r } = st(), i = de("renderer"), { activeCamera: l } = ye(), { raycaster: p, pointer: t } = ct(), { onLoop: s } = re(); | ||
return L("local-scene", r), o("scene", r.value), s(() => { | ||
p.value.setFromCamera(t.value, l.value), i != null && i.value && (l != null && l.value) && (r != null && r.value) && i.value.render(r == null ? void 0 : r.value, l.value); | ||
const { setState: o } = T(), { scene: a } = ft(), c = de("renderer"), { activeCamera: d } = Se(), { raycaster: u, pointer: t } = mt(), { onLoop: r } = re(); | ||
return b("local-scene", a), o("scene", a.value), r(() => { | ||
d.value && (u.value.setFromCamera(t.value, d.value), c != null && c.value && d && (a != null && a.value) && c.value.render(a == null ? void 0 : a.value, d.value)); | ||
}), () => { | ||
@@ -473,11 +517,11 @@ if (n.default) | ||
} | ||
}), ht = Symbol("UseTresState"), vt = { | ||
}), Rt = Symbol("UseTresState"), Mt = { | ||
install(e, n) { | ||
const o = (n == null ? void 0 : n.prefix) || "Tres"; | ||
e.component(`${o}Canvas`, lt), e.component(`${o}Scene`, ft); | ||
const { catalogue: r, extend: i } = Se(e, o); | ||
e.provide("catalogue", r), e.provide("extend", i), e.provide("useTres", T()); | ||
const { createComponentInstances: l } = Me(o); | ||
l(r).forEach(([t, s]) => { | ||
e.component(t, s); | ||
e.component(`${o}Canvas`, ht), e.component(`${o}Scene`, wt); | ||
const { catalogue: a, extend: c } = Ce(e, o); | ||
e.provide("catalogue", a), e.provide("extend", c), e.provide("useTres", T()); | ||
const { createComponentInstances: d } = Ee(o); | ||
d(a).forEach(([t, r]) => { | ||
e.component(t, r); | ||
}); | ||
@@ -487,16 +531,16 @@ } | ||
export { | ||
Ye as CameraType, | ||
ht as UseTresStateSymbol, | ||
vt as default, | ||
it as trasverseObjects, | ||
ye as useCamera, | ||
Se as useCatalogue, | ||
Me as useInstanceCreator, | ||
gt as useLoader, | ||
ct as useRaycaster, | ||
Qe as CameraType, | ||
Rt as UseTresStateSymbol, | ||
Mt as default, | ||
pt as trasverseObjects, | ||
Se as useCamera, | ||
Ce as useCatalogue, | ||
Ee as useInstanceCreator, | ||
Ct as useLoader, | ||
mt as useRaycaster, | ||
re as useRenderLoop, | ||
ut as useRenderer, | ||
st as useScene, | ||
wt as useTexture, | ||
dt as useRenderer, | ||
ft as useScene, | ||
Et as useTexture, | ||
T as useTres | ||
}; |
{ | ||
"name": "@tresjs/core", | ||
"description": "Declarative ThreeJS using Vue Components", | ||
"version": "1.7.0", | ||
"version": "1.8.0", | ||
"type": "module", | ||
@@ -45,9 +45,10 @@ "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)", | ||
"devDependencies": { | ||
"@tresjs/cientos": "^1.7.0", | ||
"@tresjs/cientos": "^1.8.0", | ||
"@types/three": "latest", | ||
"@vitejs/plugin-vue": "^4.0.0", | ||
"@vitest/coverage-c8": "^0.28.4", | ||
"@vitest/ui": "^0.28.4", | ||
"gl": "6.0.2", | ||
"happy-dom": "^8.2.6", | ||
"@vitest/coverage-c8": "^0.28.5", | ||
"@vitest/ui": "^0.28.5", | ||
"@vue/test-utils": "^2.3.0", | ||
"happy-dom": "^8.7.1", | ||
"jsdom": "^21.1.0", | ||
"kolorist": "^1.7.0", | ||
@@ -58,3 +59,3 @@ "pathe": "^1.1.0", | ||
"three": "latest", | ||
"vite": "^4.1.2", | ||
"vite": "^4.1.4", | ||
"vite-plugin-banner": "^0.7.0", | ||
@@ -65,3 +66,3 @@ "vite-plugin-dts": "2.0.0-beta.1", | ||
"vite-plugin-require-transform": "^1.0.9", | ||
"vitest": "^0.28.4", | ||
"vitest": "^0.28.5", | ||
"vue-demi": "^0.13.11" | ||
@@ -68,0 +69,0 @@ }, |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
68454
1305
21