@tresjs/cientos 5.5.0 → 5.7.0

package/dist/trescientos.js

@@ -1,14 +1,14 @@
 /**
   * name: @tresjs/cientos
-  * version: v5.5.0
+  * version: v5.7.0
   * (c) 2026
   * description: Collection of useful helpers and fully functional, ready-made abstractions for Tres
   * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
   */
 import { Fragment, Suspense, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, inject, isReactive, isRef, mergeDefaults, mergeProps, nextTick, normalizeProps, onBeforeUnmount, onMounted, onUnmounted, openBlock, provide, reactive, ref, render, renderList, renderSlot, shallowReactive, shallowRef, toRaw, toRefs, toValue, triggerRef, unref, useAttrs, useSlots, watch, watchEffect, withAsyncContext, withCtx } from "vue";
-import { buildGraph, extend, isObject3D, logError, logWarning, normalizeColor, normalizeVectorFlexibleParam, useLoader, useLoop, useTres, useTresContext } from "@tresjs/core";
+import { buildGraph, createTimer, extend, isObject3D, logError, logWarning, normalizeColor, normalizeVectorFlexibleParam, useLoader, useLoop, useTres, useTresContext } from "@tresjs/core";
 import * as THREE from "three";
-import { AdditiveBlending, AlwaysStencilFunc, AnimationMixer, Audio, AudioListener, AudioLoader, BackSide, Box2, Box3, BoxGeometry, BufferAttribute, BufferGeometry, Camera, CatmullRomCurve3, ClampToEdgeWrapping, Color, CubeCamera, CubeReflectionMapping, CubeTextureLoader, CubicBezierCurve3, DataTexture, DefaultLoadingManager, DepthTexture, DirectionalLight, DoubleSide, EdgesGeometry, EqualStencilFunc, EquirectangularReflectionMapping, Euler, FloatType, FramebufferTexture, FrontSide, Group, HalfFloatType, IcosahedronGeometry, InstancedMesh, InterleavedBuffer, InterleavedBufferAttribute, KeepStencilOp, LOD, LinearFilter, MOUSE, MathUtils, Matrix4, Mesh, MeshBasicMaterial, MeshDepthMaterial, MeshLambertMaterial, MeshStandardMaterial, NearestFilter, NoBlending, NotEqualStencilFunc, Object3D, OrthographicCamera, PerspectiveCamera, Plane, PlaneGeometry, Points, PointsMaterial, QuadraticBezierCurve3, Quaternion, REVISION, RGBAFormat, RawShaderMaterial, Raycaster, RepeatWrapping, ReplaceStencilOp, Scene, ShaderChunk, ShaderMaterial, ShapeGeometry, SkinnedMesh, Sphere, Spherical, TOUCH, TangentSpaceNormalMap, Texture, TextureLoader, Timer, UVMapping, Uniform, UniformsUtils, UnsignedByteType, Vector2, Vector3, Vector4, VideoTexture, WebGLCubeRenderTarget, WebGLRenderTarget, WebGLRenderer } from "three";
+import { AdditiveBlending, AlwaysStencilFunc, AnimationMixer, Audio, AudioListener, AudioLoader, BackSide, Box2, Box3, BoxGeometry, BufferAttribute, BufferGeometry, Camera, CatmullRomCurve3, ClampToEdgeWrapping, Color, CubeCamera, CubeReflectionMapping, CubeTextureLoader, CubicBezierCurve3, DataTexture, DefaultLoadingManager, DepthTexture, DirectionalLight, DoubleSide, EdgesGeometry, EqualStencilFunc, EquirectangularReflectionMapping, Euler, FloatType, FramebufferTexture, FrontSide, Group, HalfFloatType, IcosahedronGeometry, InstancedMesh, InterleavedBuffer, InterleavedBufferAttribute, KeepStencilOp, LOD, LinearFilter, MOUSE, MathUtils, Matrix4, Mesh, MeshBasicMaterial, MeshDepthMaterial, MeshLambertMaterial, MeshStandardMaterial, NearestFilter, NoBlending, NotEqualStencilFunc, Object3D, OrthographicCamera, PerspectiveCamera, Plane, PlaneGeometry, Points, PointsMaterial, QuadraticBezierCurve3, Quaternion, REVISION, RGBAFormat, RawShaderMaterial, Raycaster, RepeatWrapping, ReplaceStencilOp, Scene, ShaderChunk, ShaderMaterial, ShapeGeometry, SkinnedMesh, Sphere, Spherical, TOUCH, TangentSpaceNormalMap, Texture, TextureLoader, UVMapping, Uniform, UniformsUtils, UnsignedByteType, Vector2, Vector3, Vector4, VideoTexture, WebGLCubeRenderTarget, WebGLRenderTarget, WebGLRenderer } from "three";
 import { tryOnScopeDispose, useDebounceFn, useElementSize, useEventListener, useMagicKeys, useMouse, useScroll, useWindowScroll, useWindowSize, watchThrottled, whenever } from "@vueuse/core";
 import { DRACOLoader, FBXLoader, FontLoader, GLTFExporter, GLTFLoader, HorizontalBlurShader, Line2, LineGeometry, LineMaterial, MapControls, MarchingCubes, MeshSurfaceSampler, OrbitControls, PointerLockControls, PositionalAudioHelper, RGBELoader, Reflector, RoundedBoxGeometry, SVGLoader, SimplexNoise, Sky, TextGeometry, TransformControls, VerticalBlurShader, Water, toCreasedNormals } from "three-stdlib";
 import BaseCameraControls, { default as CameraControls } from "camera-controls";
@@ -1703,10 +1703,12 @@ const getSeededRandomProps = (seed = 0, seedProps = defaultSeedProps) => {
 * The precendence in creating the final elements' props is as follows:
 *
 * 1. `elements`
-* 2. `userDefaultElement` - `color`, `distance`, `size`, `texture` from component
+* 2. `userDefaultElement` - `color`, `texture` from component
 * 3. seeded random props - if `seed` and/or `seedProps` is not `undefined`
 * 4. system default
 *
+* Note: `scale` and `distance` are applied as multipliers at render time, not as defaults.
+*
 * @param elements - `undefined` or an array of (potentially) incomplete element props
 * @param userDefaultElement - values to "fill in" missing partial elements fields – or overwrite seeded props
 * @param seed - `undefined` or a number to seed random prop generation
@@ -1729,16 +1731,6 @@ const partialLensflarePropsArrayToLensflarePropsArray = (elements, userDefaultEl
 	const _seedProps = seedProps === void 0 || seedProps.length === 0 ? defaultSeedProps : seedProps;
 	return getSeededRandomProps(seed ?? 0, _seedProps).map((props) => Object.assign({}, props, userDefaultElement));
 };
-function filterLensflareElementProps(props) {
-	return filter(props, (v, k) => k in defaultLensflareElementProps && v !== void 0);
-}
-function filter(obj, predicate) {
-	const result = {};
-	Object.keys(obj).forEach((name) => {
-		if (predicate(obj[name], name)) result[name] = obj[name];
-	});
-	return result;
-}
 
 //#endregion
 //#region src/core/abstractions/Lensflare/component.vue?vue&type=script&setup=true&lang.ts
@@ -1750,6 +1742,11 @@ var component_vue_vue_type_script_setup_true_lang_default$15 = /* @__PURE__ */ d
 			required: false,
 			default: 1
 		},
+		distance: {
+			type: Number,
+			required: false,
+			default: 1
+		},
 		elements: {
 			type: Array,
 			required: false,
@@ -1770,16 +1767,6 @@ var component_vue_vue_type_script_setup_true_lang_default$15 = /* @__PURE__ */ d
 			required: false,
 			default: void 0
 		},
-		distance: {
-			type: Number,
-			required: false,
-			default: void 0
-		},
-		size: {
-			type: Number,
-			required: false,
-			default: void 0
-		},
 		texture: {
 			type: [Object, String],
 			required: false,
@@ -1788,9 +1775,17 @@ var component_vue_vue_type_script_setup_true_lang_default$15 = /* @__PURE__ */ d
 	},
 	setup(__props, { expose: __expose }) {
 		const props = __props;
+		function pickDefined(obj) {
+			const result = {};
+			for (const [k, v] of Object.entries(obj)) if (v !== void 0) result[k] = v;
+			return result;
+		}
 		const lensflareRef = shallowRef();
 		const lensflareElementPropsArrayRef = shallowRef([]);
-		const userDefaultLensflareElementPropsRef = shallowRef(filterLensflareElementProps(props));
+		const userDefaultLensflareElementPropsRef = shallowRef(pickDefined({
+			color: props.color,
+			texture: props.texture
+		}));
 		__expose({ instance: lensflareRef });
 		const textureLoader = new TextureLoader();
 		const threeLensflare = new Lensflare();
@@ -1812,10 +1807,11 @@ var component_vue_vue_type_script_setup_true_lang_default$15 = /* @__PURE__ */ d
 			p.color = normalizeColor(p.color);
 			return p;
 		};
-		const scaleThreeElements = () => {
+		const applyScaleAndDistance = () => {
 			for (let i = lensflareElementPropsArrayRef.value.length - 1; i < threeElements.length; i++) threeElements[i].size = 0;
 			lensflareElementPropsArrayRef.value.forEach((elementProps, i) => {
 				threeElements[i].size = elementProps.size * props.scale;
+				threeElements[i].distance = elementProps.distance * props.distance;
 			});
 		};
 		const updateThreeElements = () => {
@@ -1842,7 +1838,7 @@ var component_vue_vue_type_script_setup_true_lang_default$15 = /* @__PURE__ */ d
 				threeElement.distance = distance;
 				threeElement.color = normalizeColor(color);
 			});
-			scaleThreeElements();
+			applyScaleAndDistance();
 		};
 		onUnmounted(() => {
 			dispose();
@@ -1851,18 +1847,11 @@ var component_vue_vue_type_script_setup_true_lang_default$15 = /* @__PURE__ */ d
 			lensflareRef.value?.add(threeLensflare);
 			lensflareElementPropsArrayRef.value = partialLensflarePropsArrayToLensflarePropsArray(props.elements, userDefaultLensflareElementPropsRef.value, props.seed, props.seedProps);
 		});
-		watch(() => [
-			props.color,
-			props.distance,
-			props.size,
-			props.texture
-		], () => {
-			userDefaultLensflareElementPropsRef.value = {
+		watch(() => [props.color, props.texture], () => {
+			userDefaultLensflareElementPropsRef.value = pickDefined({
 				color: props.color,
-				distance: props.distance,
-				size: props.size,
 				texture: props.texture
-			};
+			});
 		});
 		watch(() => [
 			userDefaultLensflareElementPropsRef.value,
@@ -1872,8 +1861,8 @@ var component_vue_vue_type_script_setup_true_lang_default$15 = /* @__PURE__ */ d
 		], () => {
 			lensflareElementPropsArrayRef.value = partialLensflarePropsArrayToLensflarePropsArray(props.elements, userDefaultLensflareElementPropsRef.value, props.seed, props.seedProps);
 		});
-		watch(() => props.scale, () => {
-			scaleThreeElements();
+		watch(() => [props.scale, props.distance], () => {
+			applyScaleAndDistance();
 		});
 		watch(() => lensflareElementPropsArrayRef.value, () => {
 			updateThreeElements();
@@ -5417,8 +5406,8 @@ var HolographicMaterial = class extends ShaderMaterial {
 			blinkFresnelOnly: new Uniform(parameters.blinkFresnelOnly !== void 0 ? parameters.blinkFresnelOnly : true),
 			hologramOpacity: new Uniform(parameters.hologramOpacity !== void 0 ? parameters.hologramOpacity : 1)
 		};
-		this.clock = new Timer();
-		if (typeof document !== "undefined") this.clock.connect(document);
+		this.clock = createTimer();
+		this.clock.start();
 		this.setValues(parameters);
 		this.depthTest = parameters.depthTest !== void 0 ? parameters.depthTest : false;
 		this.blending = parameters.blendMode !== void 0 ? parameters.blendMode : AdditiveBlending;
@@ -9987,14 +9976,15 @@ var ContactShadows_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 			};
 		}
 		function setSize(ps, pool$1) {
-			const shadowCamera = pool$1.shadowCamera;
-			shadowCamera.left = -ps.width / 2;
-			shadowCamera.right = ps.width / 2;
-			shadowCamera.top = ps.height / 2;
-			shadowCamera.bottom = -ps.height / 2;
-			shadowCamera.far = ps.far;
 			const w = ps.width * (Array.isArray(ps.scale) ? ps.scale[0] : ps.scale || 1);
 			const h = ps.height * (Array.isArray(ps.scale) ? ps.scale[1] : ps.scale || 1);
+			const shadowCamera = pool$1.shadowCamera;
+			shadowCamera.left = -w / 2;
+			shadowCamera.right = w / 2;
+			shadowCamera.top = h / 2;
+			shadowCamera.bottom = -h / 2;
+			shadowCamera.far = ps.far;
+			shadowCamera.updateProjectionMatrix();
 			pool$1.shadowGroup.scale.set(w, ps.far, h);
 		}
 		function setResolution(resolution, pool$1) {
@@ -10440,15 +10430,41 @@ var Ocean_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 			type: null,
 			required: false,
 			default: FrontSide
+		},
+		speed: {
+			type: Number,
+			required: false,
+			default: 1
 		}
 	},
 	setup(__props, { expose: __expose }) {
-		const { textureWidth, textureHeight, waterNormals, sunDirection, sunColor, waterColor, distortionScale, size, clipBias, alpha, side } = toRefs(__props);
+		const props = __props;
+		const { waterNormals, sunColor, waterColor, distortionScale, size, alpha, speed } = toRefs(props);
 		const { extend: extend$1, scene } = useTresContext();
 		extend$1({ Water });
 		const waterRef = shallowRef();
 		const sunRef = shallowRef();
 		const _fog = scene.value.fog !== void 0;
+		function changeSunColor(val) {
+			if (waterRef.value) waterRef.value.material.uniforms.sunColor.value.set(val);
+		}
+		function changeWaterColor(val) {
+			if (waterRef.value) waterRef.value.material.uniforms.waterColor.value.set(val);
+		}
+		function changeDistortionScale(val) {
+			if (waterRef.value) waterRef.value.material.uniforms.distortionScale.value = val;
+		}
+		function changeSize(val) {
+			if (waterRef.value) waterRef.value.material.uniforms.size.value = val;
+		}
+		function changeAlpha(val) {
+			if (waterRef.value) waterRef.value.material.uniforms.alpha.value = val;
+		}
+		watch(sunColor, changeSunColor);
+		watch(waterColor, changeWaterColor);
+		watch(distortionScale, changeDistortionScale);
+		watch(size, changeSize);
+		watch(alpha, changeAlpha);
 		__expose({ instance: waterRef });
 		scene.value.traverse((child) => {
 			if (Object.prototype.hasOwnProperty.call(child, "isSky")) sunRef.value = child;
@@ -10462,29 +10478,30 @@ var Ocean_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 		});
 		const normalMap = new TextureLoader().load(waterNormals.value);
 		normalMap.wrapS = normalMap.wrapT = RepeatWrapping;
+		const initialParams = {
+			textureWidth: props.textureWidth,
+			textureHeight: props.textureHeight,
+			waterNormals: normalMap,
+			sunDirection: props.sunDirection,
+			sunColor: props.sunColor,
+			waterColor: props.waterColor,
+			distortionScale: props.distortionScale,
+			fog: _fog,
+			size: props.size,
+			clipBias: props.clipBias,
+			alpha: props.alpha,
+			side: props.side
+		};
 		const { onBeforeRender } = useLoop();
 		onBeforeRender(({ delta }) => {
-			if (waterRef.value) waterRef.value.material.uniforms.time.value += delta;
+			if (waterRef.value) waterRef.value.material.uniforms.time.value += delta * speed.value;
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("TresWater", {
 				ref_key: "waterRef",
 				ref: waterRef,
 				"rotation-x": -Math.PI / 2,
-				args: [void 0, {
-					textureWidth: unref(textureWidth),
-					textureHeight: unref(textureHeight),
-					waterNormals: unref(normalMap),
-					sunDirection: unref(sunDirection),
-					sunColor: unref(sunColor),
-					waterColor: unref(waterColor),
-					distortionScale: unref(distortionScale),
-					fog: _fog,
-					size: unref(size),
-					clipBias: unref(clipBias),
-					alpha: unref(alpha),
-					side: unref(side)
-				}]
+				args: [void 0, initialParams]
 			}, [renderSlot(_ctx.$slots, "default", {}, () => [_cache[0] || (_cache[0] = createElementVNode("TresPlaneGeometry", { args: [1e4, 1e4] }, null, -1))])], 8, _hoisted_1$8);
 		};
 	}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tresjs/cientos",
   "type": "module",
-  "version": "5.5.0",
+  "version": "5.7.0",
   "description": "Collection of useful helpers and fully functional, ready-made abstractions for Tres",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
   "license": "MIT",
@@ -38,7 +38,7 @@
     "access": "public"
   },
   "peerDependencies": {
-    "@tresjs/core": "5.6.0",
+    "@tresjs/core": "5.8.0",
     "three": ">=0.133",
     "vue": ">=3.5.17"
   },
@@ -72,8 +72,8 @@
     "vite-plugin-glsl": "^1.5.1",
     "vite-svg-loader": "^5.1.0",
     "vue-tsc": "^3.2.1",
-    "@tresjs/core": "5.6.0",
-    "@tresjs/eslint-config": "1.5.1"
+    "@tresjs/eslint-config": "1.5.1",
+    "@tresjs/core": "5.8.0"
   },
   "nx": {
     "implicitDependencies": [