@tresjs/cientos 5.8.1 → 5.9.0

package/dist/trescientos.js

@@ -1,16 +1,16 @@
 /**
   * name: @tresjs/cientos
-  * version: v5.8.1
+  * version: v5.9.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, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, isReactive, isRef, mergeDefaults, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onBeforeUnmount, onMounted, onUnmounted, openBlock, provide, reactive, ref, render, renderList, renderSlot, shallowReactive, shallowRef, toDisplayString, toRaw, toRefs, toValue, triggerRef, unref, useAttrs, useSlots, useTemplateRef, vShow, watch, watchEffect, withAsyncContext, withCtx, withDirectives, withModifiers } from "vue";
-import { buildGraph, createTimer, extend, isObject3D, logError, logWarning, normalizeColor, normalizeVectorFlexibleParam, useLoader, useLoop, useTres, useTresContext } from "@tresjs/core";
+import { Fragment, Suspense, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, isReactive, isRef, mergeDefaults, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onBeforeUnmount, onMounted, onScopeDispose, onUnmounted, openBlock, provide, reactive, ref, render, renderList, renderSlot, shallowReactive, shallowRef, toDisplayString, toRaw, toRefs, toValue, triggerRef, unref, useAttrs, useSlots, useTemplateRef, vShow, watch, watchEffect, withAsyncContext, withCtx, withDirectives, withModifiers } from "vue";
+import { INJECTION_KEY, TresPortal, 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, MeshPhysicalMaterial, MeshStandardMaterial, NearestFilter, NoBlending, NoToneMapping, 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 { 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, DynamicDrawUsage, EdgesGeometry, EqualStencilFunc, EquirectangularReflectionMapping, Euler, FloatType, FramebufferTexture, FrontSide, Group, HalfFloatType, IcosahedronGeometry, InstancedBufferAttribute, InstancedMesh, InterleavedBuffer, InterleavedBufferAttribute, KeepStencilOp, LOD, LinearFilter, MOUSE, MathUtils, Matrix4, Mesh, MeshBasicMaterial, MeshDepthMaterial, MeshLambertMaterial, MeshPhysicalMaterial, MeshStandardMaterial, NearestFilter, NoBlending, NoToneMapping, 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 { onKeyStroke, tryOnScopeDispose, useDebounceFn, useDraggable, useElementSize, useEventListener, useMagicKeys, useMouse, useResizeObserver, useScroll, useWindowScroll, useWindowSize, watchThrottled, whenever } from "@vueuse/core";
-import { DRACOLoader, DecalGeometry, 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 { DRACOLoader, DecalGeometry, FBXLoader, FontLoader, GLTFExporter, GLTFLoader, HorizontalBlurShader, Line2, LineGeometry, LineMaterial, MapControls, MarchingCubes, MeshSurfaceSampler, OrbitControls, PointerLockControls, PositionalAudioHelper, RGBELoader, Reflector, Refractor, RoundedBoxGeometry, SVGLoader, SimplexNoise, Sky, TextGeometry, TransformControls, VerticalBlurShader, Water, toCreasedNormals } from "three-stdlib";
 import BaseCameraControls, { default as CameraControls } from "camera-controls";
 import StatsImpl from "stats.js";
 import StatsGlImpl from "stats-gl";
@@ -1162,12 +1162,12 @@ function useDecalEditor() {
 
 //#endregion
 //#region src/core/abstractions/Decal/DecalItem.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$63 = [
+const _hoisted_1$67 = [
 	"name",
 	"render-order",
 	"material-polygonOffsetFactor"
 ];
-const _hoisted_2$31 = [
+const _hoisted_2$32 = [
 	"geometry",
 	"visible",
 	"name"
@@ -1389,7 +1389,7 @@ var DecalItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 				color: __props.edgeColor,
 				"depth-test": false,
 				transparent: true
-			}, null, 8, _hoisted_3$9)], 8, _hoisted_2$31)) : createCommentVNode("v-if", true)], 40, _hoisted_1$63);
+			}, null, 8, _hoisted_3$9)], 8, _hoisted_2$32)) : createCommentVNode("v-if", true)], 40, _hoisted_1$67);
 		};
 	}
 });
@@ -1400,7 +1400,7 @@ var DecalItem_default = DecalItem_vue_vue_type_script_setup_true_lang_default;
 
 //#endregion
 //#region src/core/abstractions/Decal/DecalEditor.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$62 = ["visible"];
+const _hoisted_1$66 = ["visible"];
 const DRAG_THRESHOLD_SQ = 25;
 var DecalEditor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "DecalEditor",
@@ -1683,7 +1683,7 @@ var DecalEditor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 				color: "#0000ff",
 				"depth-test": false,
 				transparent: true
-			}, null, -1)])], 8, _hoisted_1$62), renderSlot(_ctx.$slots, "default")], 64);
+			}, null, -1)])], 8, _hoisted_1$66), renderSlot(_ctx.$slots, "default")], 64);
 		};
 	}
 });
@@ -2141,11 +2141,11 @@ function getTextureLabel(tex) {
 
 //#endregion
 //#region src/core/abstractions/Decal/DebugUI/Handle.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$61 = {
+const _hoisted_1$65 = {
 	class: "snap-vignette",
 	"aria-hidden": "true"
 };
-const _hoisted_2$30 = {
+const _hoisted_2$31 = {
 	class: "snap-ticks",
 	viewBox: "0 0 100 100",
 	"aria-hidden": "true"
@@ -2340,8 +2340,8 @@ var Handle_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 				style: normalizeStyle(innerStyle.value),
 				class: "handle-inner"
 			}, [
-				withDirectives(createElementVNode("div", _hoisted_1$61, null, 512), [[vShow, unref(isSnapEnabled)]]),
-				withDirectives((openBlock(), createElementBlock("svg", _hoisted_2$30, [(openBlock(true), createElementBlock(Fragment, null, renderList(snapTicks.value, (angle, i) => {
+				withDirectives(createElementVNode("div", _hoisted_1$65, null, 512), [[vShow, unref(isSnapEnabled)]]),
+				withDirectives((openBlock(), createElementBlock("svg", _hoisted_2$31, [(openBlock(true), createElementBlock(Fragment, null, renderList(snapTicks.value, (angle, i) => {
 					return openBlock(), createElementBlock("g", {
 						key: i,
 						transform: `rotate(${angle} 50 50)`
@@ -2378,11 +2378,11 @@ var Handle_default = Handle_vue_vue_type_script_setup_true_lang_default;
 
 //#endregion
 //#region src/core/abstractions/Decal/DebugUI/Dock.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$60 = {
+const _hoisted_1$64 = {
 	key: 0,
 	class: "dock"
 };
-const _hoisted_2$29 = {
+const _hoisted_2$30 = {
 	key: 0,
 	class: "tint-popover",
 	role: "dialog",
@@ -2555,7 +2555,7 @@ var Dock_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 			return openBlock(), createElementBlock("div", { class: normalizeClass(["dock-stack", isVisible.value ? "is-visible" : ""]) }, [
 				createCommentVNode(" Top row: edit-only tools, slides in/out as edits start/end. "),
 				createVNode(Transition, { name: "edit-dock" }, {
-					default: withCtx(() => [isEditing.value && !isDraggingTexture.value ? (openBlock(), createElementBlock("div", _hoisted_1$60, [
+					default: withCtx(() => [isEditing.value && !isDraggingTexture.value ? (openBlock(), createElementBlock("div", _hoisted_1$64, [
 						createElementVNode("button", {
 							class: normalizeClass(["icon-btn", { "is-active": unref(isSnapEnabled) }]),
 							title: "Snap rotation (15°)",
@@ -2641,7 +2641,7 @@ var Dock_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 							key: 0,
 							class: "tint-swatch",
 							style: normalizeStyle({ backgroundColor: editingColor.value })
-						}, null, 4)) : createCommentVNode("v-if", true)], 2), isTintOpen.value ? (openBlock(), createElementBlock("div", _hoisted_2$29, [
+						}, null, 4)) : createCommentVNode("v-if", true)], 2), isTintOpen.value ? (openBlock(), createElementBlock("div", _hoisted_2$30, [
 							createElementVNode("div", _hoisted_3$7, [
 								_cache[10] || (_cache[10] = createElementVNode("span", { class: "tint-row__label" }, "Color", -1)),
 								createElementVNode("input", {
@@ -2925,8 +2925,8 @@ var Dock_default = Dock_vue_vue_type_script_setup_true_lang_default;
 
 //#endregion
 //#region src/core/abstractions/Decal/DebugUI/LayerList.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$59 = { class: "dock decal-list" };
-const _hoisted_2$28 = { class: "list-header" };
+const _hoisted_1$63 = { class: "dock decal-list" };
+const _hoisted_2$29 = { class: "list-header" };
 const _hoisted_3$6 = { class: "list-header__count" };
 const _hoisted_4$4 = {
 	key: 0,
@@ -3095,8 +3095,8 @@ var LayerList_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 			dragOverPosition.value = null;
 		}
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$59, [
-				createElementVNode("header", _hoisted_2$28, [_cache[2] || (_cache[2] = createElementVNode("span", { class: "list-header__title" }, "Layers", -1)), createElementVNode("span", _hoisted_3$6, toDisplayString(totalCount.value), 1)]),
+			return openBlock(), createElementBlock("div", _hoisted_1$63, [
+				createElementVNode("header", _hoisted_2$29, [_cache[2] || (_cache[2] = createElementVNode("span", { class: "list-header__title" }, "Layers", -1)), createElementVNode("span", _hoisted_3$6, toDisplayString(totalCount.value), 1)]),
 				totalCount.value === 0 ? (openBlock(), createElementBlock("div", _hoisted_4$4, " No decals yet ")) : createCommentVNode("v-if", true),
 				(openBlock(true), createElementBlock(Fragment, null, renderList(groups.value, (group) => {
 					return openBlock(), createElementBlock("section", {
@@ -3386,7 +3386,7 @@ var DecalDebugUI_default = DecalDebugUI_vue_vue_type_script_setup_true_lang_defa
 
 //#endregion
 //#region src/core/abstractions/Edges.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$58 = ["color"];
+const _hoisted_1$62 = ["color"];
 var Edges_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "Edges",
 	props: {
@@ -3424,7 +3424,7 @@ var Edges_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 			return openBlock(), createElementBlock("TresLineSegments", {
 				ref_key: "lineSegmentsRef",
 				ref: lineSegmentsRef
-			}, [renderSlot(_ctx.$slots, "default", {}, () => [createElementVNode("TresLineBasicMaterial", { color: unref(color) }, null, 8, _hoisted_1$58)])], 512);
+			}, [renderSlot(_ctx.$slots, "default", {}, () => [createElementVNode("TresLineBasicMaterial", { color: unref(color) }, null, 8, _hoisted_1$62)])], 512);
 		};
 	}
 });
@@ -3598,7 +3598,7 @@ var Levioso_default = Levioso_vue_vue_type_script_setup_true_lang_default;
 
 //#endregion
 //#region src/core/abstractions/Mask/component.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$57 = ["render-order"];
+const _hoisted_1$61 = ["render-order"];
 var component_vue_vue_type_script_setup_true_lang_default$18 = /* @__PURE__ */ defineComponent({
 	__name: "component",
 	props: {
@@ -3640,7 +3640,7 @@ var component_vue_vue_type_script_setup_true_lang_default$18 = /* @__PURE__ */ d
 				ref_key: "meshRef",
 				ref: meshRef,
 				"render-order": -props.id
-			}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_1$57);
+			}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_1$61);
 		};
 	}
 });
@@ -4030,7 +4030,7 @@ var ScreenSizer_default = ScreenSizer_vue_vue_type_script_setup_true_lang_defaul
 
 //#endregion
 //#region src/core/abstractions/ScreenSpace.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$56 = ["position"];
+const _hoisted_1$60 = ["position"];
 var ScreenSpace_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "ScreenSpace",
 	props: {
@@ -4097,7 +4097,7 @@ var ScreenSpace_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 			return openBlock(), createElementBlock("TresGroup", {
 				ref_key: "outerRef",
 				ref: outerRef
-			}, [createElementVNode("TresGroup", { position: innerPosition.value }, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_1$56)], 512);
+			}, [createElementVNode("TresGroup", { position: innerPosition.value }, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_1$60)], 512);
 		};
 	}
 });
@@ -4124,6 +4124,392 @@ function useMask(id, inverse = false) {
 	return result;
 }
 
+//#endregion
+//#region src/core/abstractions/Instances/const.ts
+const INSTANCES_INJECTION_KEY = Symbol("tresInstances");
+const MERGED_INJECTION_KEY = Symbol("tresMergedInstances");
+
+//#endregion
+//#region src/core/abstractions/Instances/PositionMesh.ts
+const scratchMesh = new Mesh();
+const scratchIntersects = [];
+/**
+* Geometry-less placeholder standing in for a single instance of an `InstancedMesh`.
+*
+* It renders nothing (`Object3D` never enters the render list) but borrows its batch's
+* geometry and material while raycasting, so pointer events resolve to this node instead
+* of the whole batch.
+*/
+var PositionMesh = class extends Object3D {
+	color = new Color("white");
+	batch = null;
+	raycast(raycaster, intersects) {
+		const mesh = this.batch?.mesh.value;
+		if (!mesh?.geometry || !mesh.material) return;
+		scratchMesh.geometry = mesh.geometry;
+		scratchMesh.material = mesh.material;
+		scratchMesh.matrixWorld.copy(this.matrixWorld);
+		scratchIntersects.length = 0;
+		scratchMesh.raycast(raycaster, scratchIntersects);
+		for (const hit of scratchIntersects) intersects.push({
+			...hit,
+			object: this
+		});
+		scratchIntersects.length = 0;
+	}
+};
+
+//#endregion
+//#region src/core/abstractions/Instances/Instance.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$59 = ["object"];
+var Instance_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "Instance",
+	props: {
+		batch: {
+			type: String,
+			required: false
+		},
+		name: {
+			type: String,
+			required: false
+		},
+		color: {
+			type: [
+				Object,
+				String,
+				Number
+			],
+			required: false
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		const node = shallowRef(new PositionMesh());
+		const merged = inject(MERGED_INJECTION_KEY, null);
+		const single = inject(INSTANCES_INJECTION_KEY, null);
+		const target = computed(() => props.batch ? merged?.[props.batch] ?? null : single);
+		watch(target, (next, previous) => {
+			previous?.unregister(node.value);
+			node.value.batch = next;
+			next?.register(node.value);
+			if (next && props.color !== void 0) next.requestColorBuffer();
+		}, { immediate: true });
+		watch(() => props.color, (color) => {
+			if (color === void 0) return;
+			node.value.color.set(color);
+			target.value?.requestColorBuffer();
+		}, { immediate: true });
+		watch(() => props.name, (name) => node.value.name = name ?? "", { immediate: true });
+		onScopeDispose(() => target.value?.unregister(node.value));
+		/**
+		* A `PositionMesh` with no batch renders nothing and reports nothing, and the key a batch
+		* registers under is not always the name of the mesh it came from, so a plausible-looking
+		* `batch` fails silently. Checked a tick after mount, by which point a sibling `<Instances>`
+		* has registered.
+		*/
+		onMounted(() => nextTick(() => {
+			if (target.value) return;
+			if (!merged && !single) {
+				logWarning("Instance: no batch to join, so this renders nothing. An <Instance> belongs inside <Instances> or <Merged>.");
+				return;
+			}
+			if (!merged) {
+				logWarning(`Instance: \`batch\` picks a batch out of a <Merged>, and there is none above this one, so "${props.batch}" renders nothing. Drop \`batch\` to join the enclosing <Instances>.`);
+				return;
+			}
+			if (!props.batch) {
+				logWarning("Instance: <Merged> keys its batches, so an instance inside one needs a `batch` to pick one. This renders nothing.");
+				return;
+			}
+			const available = Object.keys(merged);
+			if (available.length > 0) logWarning(`Instance: no batch named "${props.batch}", so this renders nothing. Available: ${available.join(", ")}.`);
+		}));
+		__expose({ instance: node });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("primitive", { object: node.value }, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_1$59);
+		};
+	}
+});
+
+//#endregion
+//#region src/core/abstractions/Instances/Instance.vue
+var Instance_default = Instance_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/core/abstractions/Instances/useInstancesBatch.ts
+function createMatrixAttribute(capacity) {
+	const attribute = new InstancedBufferAttribute(new Float32Array(capacity * 16), 16);
+	attribute.setUsage(DynamicDrawUsage);
+	return attribute;
+}
+function createColorAttribute(capacity) {
+	const attribute = new InstancedBufferAttribute(new Float32Array(capacity * 3).fill(1), 3);
+	attribute.setUsage(DynamicDrawUsage);
+	return attribute;
+}
+const scratchColor = [
+	0,
+	0,
+	0
+];
+/**
+* Writes `source` into `target` at `offset`, reporting whether anything actually moved.
+*
+* `Math.fround` is load-bearing: `target` narrows to float32 on write, so comparing raw
+* doubles against it reports a change every frame for values float32 can't represent.
+*/
+function writeIfChanged(target, offset, source, length) {
+	let changed = false;
+	for (let i = 0; i < length; i++) {
+		const value = Math.fround(source[i]);
+		if (target[offset + i] !== value) {
+			target[offset + i] = value;
+			changed = true;
+		}
+	}
+	return changed;
+}
+/**
+* Owns a single `InstancedMesh` and the placeholders registered against it.
+*
+* The registry identity is stable across geometry/material/limit changes, so descendants
+* that injected it stay bound when the underlying mesh is rebuilt.
+*/
+function useInstancesBatch(source) {
+	const mesh = shallowRef(null);
+	const nodes = [];
+	const parentInverse = new Matrix4();
+	const instanceMatrix = new Matrix4();
+	let capacity = 0;
+	let hasColors = false;
+	function disposeMesh() {
+		const current = mesh.value;
+		if (!current) return;
+		current.instanceMatrix.dispose();
+		current.instanceColor?.dispose();
+		current.dispose();
+		mesh.value = null;
+	}
+	function build() {
+		disposeMesh();
+		const { geometry, material, limit } = source();
+		capacity = Math.max(1, Math.floor(limit), nodes.length);
+		const next = new InstancedMesh(geometry, material, capacity);
+		next.instanceMatrix = createMatrixAttribute(capacity);
+		next.count = 0;
+		next.frustumCulled = false;
+		next.raycast = () => null;
+		if (hasColors) next.instanceColor = createColorAttribute(capacity);
+		mesh.value = next;
+	}
+	function grow(needed) {
+		const current = mesh.value;
+		if (!current || needed <= capacity) return;
+		const next = Math.max(needed, capacity * 2);
+		const matrixAttribute = createMatrixAttribute(next);
+		matrixAttribute.array.set(current.instanceMatrix.array);
+		current.instanceMatrix.dispose();
+		current.instanceMatrix = matrixAttribute;
+		if (current.instanceColor) {
+			const colorAttribute = createColorAttribute(next);
+			colorAttribute.array.set(current.instanceColor.array);
+			current.instanceColor.dispose();
+			current.instanceColor = colorAttribute;
+		}
+		capacity = next;
+		logWarning(`Instances: more instances registered than \`limit\` allows, reallocated for ${next}. Set \`:limit="${next}"\` to avoid reallocating at runtime.`);
+	}
+	const api = {
+		mesh,
+		register(node) {
+			nodes.push(node);
+			grow(nodes.length);
+		},
+		unregister(node) {
+			const index = nodes.indexOf(node);
+			if (index !== -1) nodes.splice(index, 1);
+		},
+		requestColorBuffer() {
+			if (hasColors) return;
+			hasColors = true;
+			const current = mesh.value;
+			if (current && !current.instanceColor) current.instanceColor = createColorAttribute(capacity);
+		}
+	};
+	function update() {
+		const current = mesh.value;
+		if (!current) return;
+		current.updateWorldMatrix(true, false);
+		parentInverse.copy(current.matrixWorld).invert();
+		const colorAttribute = current.instanceColor;
+		const matrices = current.instanceMatrix.array;
+		const colors = colorAttribute?.array;
+		let matricesChanged = false;
+		let colorsChanged = false;
+		let visible = 0;
+		for (const node of nodes) {
+			if (!node.visible) continue;
+			node.updateWorldMatrix(true, false);
+			instanceMatrix.multiplyMatrices(parentInverse, node.matrixWorld);
+			matricesChanged = writeIfChanged(matrices, visible * 16, instanceMatrix.elements, 16) || matricesChanged;
+			if (colors) {
+				const { r, g, b } = node.color;
+				scratchColor[0] = r;
+				scratchColor[1] = g;
+				scratchColor[2] = b;
+				colorsChanged = writeIfChanged(colors, visible * 3, scratchColor, 3) || colorsChanged;
+			}
+			visible++;
+		}
+		current.count = visible;
+		if (matricesChanged) current.instanceMatrix.needsUpdate = true;
+		if (colorsChanged && colorAttribute) colorAttribute.needsUpdate = true;
+	}
+	watch(source, build, { immediate: true });
+	onScopeDispose(disposeMesh);
+	return {
+		mesh,
+		api,
+		update
+	};
+}
+
+//#endregion
+//#region src/core/abstractions/Instances/Instances.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$58 = [
+	"object",
+	"cast-shadow",
+	"receive-shadow"
+];
+var Instances_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "Instances",
+	props: {
+		geometry: {
+			type: Object,
+			required: true
+		},
+		material: {
+			type: [Object, Array],
+			required: true
+		},
+		limit: {
+			type: Number,
+			required: false,
+			default: 1e3
+		},
+		batch: {
+			type: String,
+			required: false
+		},
+		name: {
+			type: String,
+			required: false
+		},
+		castShadow: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		receiveShadow: {
+			type: Boolean,
+			required: false,
+			default: false
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		const { mesh, api, update } = useInstancesBatch(() => ({
+			geometry: props.geometry,
+			material: props.material,
+			limit: props.limit
+		}));
+		provide(INSTANCES_INJECTION_KEY, api);
+		const merged = inject(MERGED_INJECTION_KEY, null);
+		if (merged) {
+			watch(() => props.batch, (batch, previous) => {
+				if (previous) delete merged[previous];
+				if (batch) merged[batch] = api;
+			}, { immediate: true });
+			onScopeDispose(() => {
+				if (props.batch && merged[props.batch] === api) delete merged[props.batch];
+			});
+		}
+		watch([mesh, () => props.name], ([current, name]) => {
+			if (current) current.name = name ?? "";
+		}, { immediate: true });
+		useLoop().onBeforeRender(update);
+		__expose({ instance: mesh });
+		return (_ctx, _cache) => {
+			return unref(mesh) ? (openBlock(), createElementBlock("primitive", {
+				key: 0,
+				object: unref(mesh),
+				"cast-shadow": __props.castShadow,
+				"receive-shadow": __props.receiveShadow
+			}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_1$58)) : createCommentVNode("v-if", true);
+		};
+	}
+});
+
+//#endregion
+//#region src/core/abstractions/Instances/Instances.vue
+var Instances_default = Instances_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/core/abstractions/Instances/Merged.vue?vue&type=script&setup=true&lang.ts
+var Merged_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "Merged",
+	props: {
+		meshes: {
+			type: Object,
+			required: true
+		},
+		limit: {
+			type: Number,
+			required: false,
+			default: 100
+		},
+		castShadow: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		receiveShadow: {
+			type: Boolean,
+			required: false,
+			default: false
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		const registry = shallowReactive({});
+		provide(MERGED_INJECTION_KEY, registry);
+		__expose({ instances: registry });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.meshes, (mesh, key) => {
+				return openBlock(), createBlock(Instances_default, {
+					key,
+					batch: key,
+					geometry: mesh.geometry,
+					material: mesh.material,
+					limit: __props.limit,
+					"cast-shadow": __props.castShadow,
+					"receive-shadow": __props.receiveShadow
+				}, null, 8, [
+					"batch",
+					"geometry",
+					"material",
+					"limit",
+					"cast-shadow",
+					"receive-shadow"
+				]);
+			}), 128)), renderSlot(_ctx.$slots, "default")], 64);
+		};
+	}
+});
+
+//#endregion
+//#region src/core/abstractions/Instances/Merged.vue
+var Merged_default = Merged_vue_vue_type_script_setup_true_lang_default;
+
 //#endregion
 //#region src/utils/types.ts
 const isPerspectiveCamera$1 = (camera) => Boolean(camera && camera.isPerspectiveCamera);
@@ -4131,7 +4517,7 @@ const isOrthographicCamera$1 = (camera) => Boolean(camera && camera.isOrthograph
 
 //#endregion
 //#region src/core/controls/CameraControls.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$55 = [
+const _hoisted_1$57 = [
 	"min-polar-angle",
 	"max-polar-angle",
 	"min-azimuth-angle",
@@ -4400,7 +4786,7 @@ var CameraControls_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 				args: [__props.camera || unref(activeCamera), __props.domElement || unref(renderer).domElement],
 				"mouse-buttons": mouseButtons.value,
 				touches: touches.value
-			}, null, 8, _hoisted_1$55)) : createCommentVNode("v-if", true);
+			}, null, 8, _hoisted_1$57)) : createCommentVNode("v-if", true);
 		};
 	}
 });
@@ -4448,7 +4834,8 @@ var KeyboardControls_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 		});
 		const sidewardMove = ref(0);
 		const forwardMove = ref(0);
-		const { KeyW, KeyA, KeyS, KeyD, Up, Down, Left, Right } = useMagicKeys();
+		const verticalMove = ref(0);
+		const { KeyW, KeyA, KeyS, KeyD, Up, Down, Left, Right, KeyQ, KeyE } = useMagicKeys();
 		watchEffect(() => {
 			if (KeyA.value || Left.value) sidewardMove.value = -moveSpeed.value;
 			else if (KeyD.value || Right.value) sidewardMove.value = moveSpeed.value;
@@ -4456,6 +4843,9 @@ var KeyboardControls_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 			if (KeyW.value || Up.value) forwardMove.value = moveSpeed.value;
 			else if (KeyS.value || Down.value) forwardMove.value = -moveSpeed.value;
 			else forwardMove.value = 0;
+			if (KeyE.value) verticalMove.value = moveSpeed.value;
+			else if (KeyQ.value) verticalMove.value = -moveSpeed.value;
+			else verticalMove.value = 0;
 		});
 		__expose({ instance: controls });
 		const isActive = (isLock) => {
@@ -4479,11 +4869,20 @@ var KeyboardControls_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 				emit("change", controls.value);
 			}
 		};
+		const moveUp = (movementSpeed) => {
+			if (!activeCamera.value?.position) return;
+			activeCamera.value.position.y += movementSpeed;
+			if (verticalMove.value) {
+				invalidate();
+				emit("change", controls.value);
+			}
+		};
 		const { onBeforeRender } = useLoop();
 		onBeforeRender(({ delta }) => {
 			if (controls.value instanceof PointerLockControls && controls.value?.isLocked) {
 				moveForward(delta, forwardMove.value);
 				controls.value.moveRight(sidewardMove.value);
+				moveUp(verticalMove.value);
 			}
 		});
 		return (_ctx, _cache) => {
@@ -4491,7 +4890,7 @@ var KeyboardControls_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 				key: 0,
 				selector: __props.selector,
 				"make-default": __props.makeDefault,
-				camera: __props.camera || unref(activeCamera),
+				camera: __props.camera || unref(activeCamera)?.value,
 				"dom-element": __props.domElement || unref(renderer).domElement,
 				onIsLock: isActive,
 				onChange: hasChange
@@ -4568,7 +4967,7 @@ function useOrbitLikeControls(controlsRef, props, emit) {
 
 //#endregion
 //#region src/core/controls/MapControls.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$54 = [
+const _hoisted_1$56 = [
 	"args",
 	"target",
 	"auto-rotate",
@@ -4756,7 +5155,7 @@ var MapControls_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 				"rotate-speed": __props.rotateSpeed,
 				"mouse-buttons": __props.mouseButtons,
 				"screen-space-panning": __props.screenSpacePanning
-			}, null, 8, _hoisted_1$54)) : createCommentVNode("v-if", true);
+			}, null, 8, _hoisted_1$56)) : createCommentVNode("v-if", true);
 		};
 	}
 });
@@ -4767,7 +5166,7 @@ var MapControls_default = MapControls_vue_vue_type_script_setup_true_lang_defaul
 
 //#endregion
 //#region src/core/controls/OrbitControls.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$53 = [
+const _hoisted_1$55 = [
 	"args",
 	"target",
 	"auto-rotate",
@@ -4955,7 +5354,7 @@ var OrbitControls_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 				"rotate-speed": __props.rotateSpeed,
 				"mouse-buttons": __props.mouseButtons,
 				"screen-space-panning": __props.screenSpacePanning
-			}, null, 8, _hoisted_1$53)) : createCommentVNode("v-if", true);
+			}, null, 8, _hoisted_1$55)) : createCommentVNode("v-if", true);
 		};
 	}
 });
@@ -4966,7 +5365,7 @@ var OrbitControls_default = OrbitControls_vue_vue_type_script_setup_true_lang_de
 
 //#endregion
 //#region src/core/controls/PointerLockControls.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$52 = ["args"];
+const _hoisted_1$54 = ["args"];
 var PointerLockControls_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "PointerLockControls",
 	props: {
@@ -5038,7 +5437,7 @@ var PointerLockControls_vue_vue_type_script_setup_true_lang_default = /* @__PURE
 				ref_key: "controlsRef",
 				ref: controlsRef,
 				args: [__props.camera || unref(activeCamera), __props.domElement || unref(renderer).domElement]
-			}, null, 8, _hoisted_1$52)) : createCommentVNode("v-if", true);
+			}, null, 8, _hoisted_1$54)) : createCommentVNode("v-if", true);
 		};
 	}
 });
@@ -5191,7 +5590,7 @@ var ScrollControls_default = ScrollControls_vue_vue_type_script_setup_true_lang_
 
 //#endregion
 //#region src/core/controls/TransformControls.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$51 = [
+const _hoisted_1$53 = [
 	"object",
 	"args",
 	"mode",
@@ -5354,7 +5753,7 @@ var TransformControls_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 				"show-y": unref(showY),
 				"show-z": unref(showZ),
 				visible: true
-			}, null, 8, _hoisted_1$51)) : createCommentVNode("v-if", true);
+			}, null, 8, _hoisted_1$53)) : createCommentVNode("v-if", true);
 		};
 	}
 });
@@ -5762,7 +6161,7 @@ var RandomizedLights = class extends Group {
 
 //#endregion
 //#region src/core/light-shadow/RandomizedLights/component.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$50 = [
+const _hoisted_1$52 = [
 	"count",
 	"radius",
 	"intensity",
@@ -5863,7 +6262,7 @@ var component_vue_vue_type_script_setup_true_lang_default$14 = /* @__PURE__ */ d
 				near: __props.near,
 				far: __props.far,
 				position: pos.value
-			}, null, 8, _hoisted_1$50);
+			}, null, 8, _hoisted_1$52);
 		};
 	}
 });
@@ -5957,6 +6356,8 @@ var ProgressiveLightMap = class {
 		this.renderer.clear();
 		this.renderer.setRenderTarget(null);
 		this.renderer.setClearColor(this.clearColor, this.clearAlpha);
+	}
+	prepare() {
 		this.lights = [];
 		this.meshes = [];
 		this.scene.traverse((object) => {
@@ -5970,8 +6371,6 @@ var ProgressiveLightMap = class {
 				intensity: object.intensity
 			});
 		});
-	}
-	prepare() {
 		this.lights.forEach((light) => light.object.intensity = 0);
 		this.meshes.forEach((mesh) => mesh.object.material = this.discardMat);
 	}
@@ -5990,13 +6389,16 @@ var ProgressiveLightMap = class {
 		const activeMap = this.buffer1Active ? this.progressiveLightMap1 : this.progressiveLightMap2;
 		const inactiveMap = this.buffer1Active ? this.progressiveLightMap2 : this.progressiveLightMap1;
 		const oldBg = this.scene.background;
+		const oldEnv = this.scene.environment;
 		this.scene.background = null;
+		this.scene.environment = null;
 		this.renderer.setRenderTarget(activeMap);
 		this.previousShadowMap.value = inactiveMap.texture;
 		this.buffer1Active = !this.buffer1Active;
 		this.renderer.render(this.scene, camera);
 		this.renderer.setRenderTarget(null);
 		this.scene.background = oldBg;
+		this.scene.environment = oldEnv;
 	}
 };
 
@@ -6027,8 +6429,8 @@ const SoftShadowMaterial = /* @__PURE__ */ shaderMaterial({
 
 //#endregion
 //#region src/core/light-shadow/AccumulativeShadows/component.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$49 = ["scale", "rotation"];
-const _hoisted_2$27 = [
+const _hoisted_1$51 = ["scale", "rotation"];
+const _hoisted_2$28 = [
 	"alpha-test",
 	"blend",
 	"color",
@@ -6226,7 +6628,7 @@ var component_vue_vue_type_script_setup_true_lang_default$13 = /* @__PURE__ */ d
 				opacity: __props.opacity,
 				"tone-mapped": __props.toneMapped,
 				transparent: true
-			}, null, 8, _hoisted_2$27)], 8, _hoisted_1$49)], 512);
+			}, null, 8, _hoisted_2$28)], 8, _hoisted_1$51)], 512);
 		};
 	}
 });
@@ -6252,8 +6654,8 @@ const BakeShadows = defineComponent({
 
 //#endregion
 //#region src/core/light-shadow/CircleShadow.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$48 = ["rotation-x"];
-const _hoisted_2$26 = [
+const _hoisted_1$50 = ["rotation-x"];
+const _hoisted_2$27 = [
 	"opacity",
 	"fog",
 	"depth-write",
@@ -6326,7 +6728,7 @@ var CircleShadow_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 				"depth-write": __props.depthWrite,
 				side: unref(DoubleSide),
 				map: unref(texture$1)
-			}, null, 8, _hoisted_2$26)], 8, _hoisted_1$48);
+			}, null, 8, _hoisted_2$27)], 8, _hoisted_1$50);
 		};
 	}
 });
@@ -6337,7 +6739,7 @@ var CircleShadow_default = CircleShadow_vue_vue_type_script_setup_true_lang_defa
 
 //#endregion
 //#region src/core/light-shadow/ContactShadows.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$47 = ["object"];
+const _hoisted_1$49 = ["object"];
 var ContactShadows_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "ContactShadows",
 	props: {
@@ -6545,7 +6947,7 @@ var ContactShadows_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 		});
 		__expose({ instance: pool.shadowGroup });
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("primitive", { object: unref(pool).shadowGroup }, null, 8, _hoisted_1$47);
+			return openBlock(), createElementBlock("primitive", { object: unref(pool).shadowGroup }, null, 8, _hoisted_1$49);
 		};
 	}
 });
@@ -7572,8 +7974,8 @@ function useSVG(path, options = {}) {
 
 //#endregion
 //#region src/core/loaders/useSVG/component.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$46 = { key: 0 };
-const _hoisted_2$25 = ["geometry", "render-order"];
+const _hoisted_1$48 = { key: 0 };
+const _hoisted_2$26 = ["geometry", "render-order"];
 var component_vue_vue_type_script_setup_true_lang_default$11 = /* @__PURE__ */ defineComponent({
 	__name: "component",
 	props: {
@@ -7630,11 +8032,11 @@ var component_vue_vue_type_script_setup_true_lang_default$11 = /* @__PURE__ */ d
 			dispose();
 		});
 		return (_ctx, _cache) => {
-			return !unref(isLoading) ? (openBlock(), createElementBlock("TresGroup", _hoisted_1$46, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(layers), ({ geometry, material, isStroke }, i) => {
+			return !unref(isLoading) ? (openBlock(), createElementBlock("TresGroup", _hoisted_1$48, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(layers), ({ geometry, material, isStroke }, i) => {
 				return openBlock(), createElementBlock("TresMesh", mergeProps({ key: `${i}` }, { ref_for: true }, isStroke ? props.strokeMeshProps : props.fillMeshProps, {
 					geometry,
 					"render-order": props.depth === "renderOrder" ? i : 0
-				}), [createElementVNode("TresMeshBasicMaterial", mergeProps({ ref_for: true }, material), null, 16)], 16, _hoisted_2$25);
+				}), [createElementVNode("TresMeshBasicMaterial", mergeProps({ ref_for: true }, material), null, 16)], 16, _hoisted_2$26);
 			}), 128))])) : createCommentVNode("v-if", true);
 		};
 	}
@@ -7681,7 +8083,7 @@ function useFBX(path, options) {
 
 //#endregion
 //#region src/core/loaders/useFBX/component.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$45 = ["object"];
+const _hoisted_1$47 = ["object"];
 var component_vue_vue_type_script_setup_true_lang_default$10 = /* @__PURE__ */ defineComponent({
 	__name: "component",
 	props: {
@@ -7716,7 +8118,7 @@ var component_vue_vue_type_script_setup_true_lang_default$10 = /* @__PURE__ */ d
 			return !unref(isLoading) && unref(model) ? (openBlock(), createElementBlock("primitive", {
 				key: 0,
 				object: unref(model)
-			}, null, 8, _hoisted_1$45)) : createCommentVNode("v-if", true);
+			}, null, 8, _hoisted_1$47)) : createCommentVNode("v-if", true);
 		};
 	}
 });
@@ -7739,6 +8141,17 @@ var component_default$5 = component_vue_vue_type_script_setup_true_lang_default$
 * const { state: model } = useGLTF('/path/to/model.glb', { draco: true })
 * ```
 *
+* The shape of `nodes` and `materials` is only known once the model is loaded, so both
+* default to a loose record. Pass the model's own shape to get them typed — `tres gltf`
+* generates those interfaces for you:
+*
+* @example
+* ```ts
+* interface ModelNodes { Body: SkinnedMesh }
+* interface ModelMaterials { Skin: MeshStandardMaterial }
+* const { nodes, materials } = useGLTF<ModelNodes, ModelMaterials>('/path/to/model.glb')
+* ```
+*
 * @param {MaybeRef<string>} path - Path to the GLTF model file
 * @param {UseGLTFOptions} options - Options for loading the model
 * @returns {{ state: GLTF, isLoading: boolean, execute: () => Promise<void> }} Object containing the model state, loading state and reload function
@@ -7771,7 +8184,7 @@ function useGLTF(path, options) {
 
 //#endregion
 //#region src/core/loaders/useGLTF/component.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$44 = ["object"];
+const _hoisted_1$46 = ["object"];
 var component_vue_vue_type_script_setup_true_lang_default$9 = /* @__PURE__ */ defineComponent({
 	__name: "component",
 	props: {
@@ -7819,7 +8232,7 @@ var component_vue_vue_type_script_setup_true_lang_default$9 = /* @__PURE__ */ de
 			return !unref(isLoading) && unref(state)?.scene ? (openBlock(), createElementBlock("primitive", {
 				key: 0,
 				object: unref(state)?.scene
-			}, null, 8, _hoisted_1$44)) : createCommentVNode("v-if", true);
+			}, null, 8, _hoisted_1$46)) : createCommentVNode("v-if", true);
 		};
 	}
 });
@@ -7881,7 +8294,8 @@ function useProgress() {
 	const progress = ref(0);
 	const items = ref([]);
 	return new Promise((resolve) => {
-		DefaultLoadingManager.onStart = () => {
+		DefaultLoadingManager.onStart = (_url, itemsLoaded) => {
+			saveLastTotalLoaded = itemsLoaded;
 			hasFinishLoading.value = false;
 		};
 		DefaultLoadingManager.onLoad = () => {
@@ -8020,8 +8434,8 @@ function useTextures(paths) {
 
 //#endregion
 //#region src/core/materials/customShaderMaterial/index.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$43 = ["args"];
-var index_vue_vue_type_script_setup_true_lang_default$7 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$45 = ["args"];
+var index_vue_vue_type_script_setup_true_lang_default$8 = /* @__PURE__ */ defineComponent({
 	__name: "index",
 	props: {
 		baseMaterial: {
@@ -8059,14 +8473,14 @@ var index_vue_vue_type_script_setup_true_lang_default$7 = /* @__PURE__ */ define
 				ref_key: "customShaderMaterialClass",
 				ref: customShaderMaterialClass,
 				args: [props]
-			}, null, 8, _hoisted_1$43);
+			}, null, 8, _hoisted_1$45);
 		};
 	}
 });
 
 //#endregion
 //#region src/core/materials/customShaderMaterial/index.vue
-var customShaderMaterial_default = index_vue_vue_type_script_setup_true_lang_default$7;
+var customShaderMaterial_default = index_vue_vue_type_script_setup_true_lang_default$8;
 
 //#endregion
 //#region src/core/materials/holographicMaterial/HolographicMaterialParameters.ts
@@ -8247,7 +8661,7 @@ var HolographicMaterialParameters_default = HolographicMaterial;
 
 //#endregion
 //#region src/core/materials/holographicMaterial/index.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$42 = [
+const _hoisted_1$44 = [
 	"uniforms-fresnelAmount-value",
 	"uniforms-enableBlinking-value",
 	"uniforms-fresnelOpacity-value",
@@ -8260,7 +8674,7 @@ const _hoisted_1$42 = [
 	"enableAdditive",
 	"side"
 ];
-var index_vue_vue_type_script_setup_true_lang_default$6 = /* @__PURE__ */ defineComponent({
+var index_vue_vue_type_script_setup_true_lang_default$7 = /* @__PURE__ */ defineComponent({
 	__name: "index",
 	props: {
 		fresnelAmount: {
@@ -8348,18 +8762,18 @@ var index_vue_vue_type_script_setup_true_lang_default$6 = /* @__PURE__ */ define
 				"uniforms-blinkFresnelOnly-value": props.blinkFresnelOnly,
 				enableAdditive: props.enableAdditive,
 				side: props.side
-			}, null, 8, _hoisted_1$42);
+			}, null, 8, _hoisted_1$44);
 		};
 	}
 });
 
 //#endregion
 //#region src/core/materials/holographicMaterial/index.vue
-var holographicMaterial_default = index_vue_vue_type_script_setup_true_lang_default$6;
+var holographicMaterial_default = index_vue_vue_type_script_setup_true_lang_default$7;
 
 //#endregion
 //#region src/core/materials/meshDiscardMaterial/index.vue?vue&type=script&setup=true&lang.ts
-var index_vue_vue_type_script_setup_true_lang_default$5 = /* @__PURE__ */ defineComponent({
+var index_vue_vue_type_script_setup_true_lang_default$6 = /* @__PURE__ */ defineComponent({
 	__name: "index",
 	setup(__props, { expose: __expose }) {
 		const meshDiscardMaterialRef = shallowRef();
@@ -8377,7 +8791,7 @@ var index_vue_vue_type_script_setup_true_lang_default$5 = /* @__PURE__ */ define
 
 //#endregion
 //#region src/core/materials/meshDiscardMaterial/index.vue
-var meshDiscardMaterial_default = index_vue_vue_type_script_setup_true_lang_default$5;
+var meshDiscardMaterial_default = index_vue_vue_type_script_setup_true_lang_default$6;
 
 //#endregion
 //#region src/core/materials/meshGlassMaterial/material.ts
@@ -8479,7 +8893,7 @@ var material_default = MeshGlassMaterial;
 
 //#endregion
 //#region src/core/materials/meshGlassMaterial/index.vue?vue&type=script&setup=true&lang.ts
-var index_vue_vue_type_script_setup_true_lang_default$4 = /* @__PURE__ */ defineComponent({
+var index_vue_vue_type_script_setup_true_lang_default$5 = /* @__PURE__ */ defineComponent({
 	__name: "index",
 	setup(__props, { expose: __expose }) {
 		const MeshGlassMaterialClass = shallowRef();
@@ -8497,7 +8911,206 @@ var index_vue_vue_type_script_setup_true_lang_default$4 = /* @__PURE__ */ define
 
 //#endregion
 //#region src/core/materials/meshGlassMaterial/index.vue
-var meshGlassMaterial_default = index_vue_vue_type_script_setup_true_lang_default$4;
+var meshGlassMaterial_default = index_vue_vue_type_script_setup_true_lang_default$5;
+
+//#endregion
+//#region src/core/materials/meshPortalMaterial/PortalMaterialImpl.ts
+/**
+* Window-pass material for MeshPortalMaterial.
+* Samples the portal FBO in screen space so the mesh becomes a perspective-correct
+* cutout window into the portal scene. Empty portal areas (alpha 0) show the world.
+* Ported from drei's PortalMaterialImpl (blur/sdf deferred).
+*/
+var PortalMaterialImpl = class extends ShaderMaterial {
+	constructor() {
+		super({
+			transparent: true,
+			uniforms: {
+				map: { value: null },
+				resolution: { value: new Vector2() }
+			},
+			vertexShader: `
+        void main() {
+          gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+        }
+      `,
+			fragmentShader: `
+        uniform sampler2D map;
+        uniform vec2 resolution;
+        void main() {
+          // Sample the portal FBO in screen space so the mesh reads as a window.
+          vec2 uv = gl_FragCoord.xy / resolution.xy;
+          vec4 t = texture2D(map, uv);
+          gl_FragColor = vec4(t.rgb, t.a);
+          #include <tonemapping_fragment>
+          #include <colorspace_fragment>
+        }
+      `
+		});
+	}
+	get map() {
+		return this.uniforms.map.value;
+	}
+	set map(v) {
+		this.uniforms.map.value = v;
+	}
+};
+
+//#endregion
+//#region src/core/materials/meshPortalMaterial/index.vue?vue&type=script&setup=true&lang.ts
+var index_vue_vue_type_script_setup_true_lang_default$4 = /* @__PURE__ */ defineComponent({
+	__name: "index",
+	props: {
+		blend: {
+			type: Number,
+			required: false,
+			default: 0
+		},
+		resolution: {
+			type: Number,
+			required: false,
+			default: 512
+		},
+		worldUnits: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		renderPriority: {
+			type: Number,
+			required: false,
+			default: 0
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		const { extend: extend$1, invalidate } = useTres();
+		extend$1({ PortalMaterialImpl });
+		const materialRef = shallowRef();
+		const portalScene = new Scene();
+		portalScene.matrixAutoUpdate = false;
+		provide(INJECTION_KEY, {
+			...useTresContext(),
+			scene: shallowRef(portalScene)
+		});
+		const rtOptions = {
+			minFilter: LinearFilter,
+			magFilter: LinearFilter,
+			type: HalfFloatType
+		};
+		const fboMap = new WebGLRenderTarget(props.resolution, props.resolution, rtOptions);
+		const buffer1 = new WebGLRenderTarget(1, 1, rtOptions);
+		const buffer2 = new WebGLRenderTarget(1, 1, rtOptions);
+		watch(() => props.resolution, (res) => fboMap.setSize(res, res));
+		const quadScene = new Scene();
+		const quadCamera = new OrthographicCamera(-1, 1, 1, -1, 0, 1);
+		const quadMaterial = new ShaderMaterial({
+			uniforms: {
+				a: { value: buffer1.texture },
+				b: { value: buffer2.texture },
+				blend: { value: 0 }
+			},
+			vertexShader: `
+    varying vec2 vUv;
+    void main() { vUv = uv; gl_Position = vec4(position, 1.0); }
+  `,
+			fragmentShader: `
+    uniform sampler2D a;
+    uniform sampler2D b;
+    uniform float blend;
+    varying vec2 vUv;
+    void main() { gl_FragColor = mix(texture2D(b, vUv), texture2D(a, vUv), blend); }
+  `
+		});
+		const quadGeometry = new PlaneGeometry(2, 2);
+		quadScene.add(new Mesh(quadGeometry, quadMaterial));
+		const { onBeforeRender, onRender } = useLoop();
+		const drawSize = new Vector2();
+		let hasWarnedWebGPU = false;
+		function isWebGL(r) {
+			if (r?.isWebGPURenderer) {
+				if (!hasWarnedWebGPU) {
+					logWarning("MeshPortalMaterial: WebGPURenderer is not supported yet");
+					hasWarnedWebGPU = true;
+				}
+				return false;
+			}
+			return r instanceof WebGLRenderer;
+		}
+		onBeforeRender(({ renderer, camera }) => {
+			const mat = materialRef.value;
+			if (!mat || !isWebGL(renderer)) return;
+			const host = mat.__tres?.parent;
+			const cam = camera.value;
+			if (!host || !cam) return;
+			if (props.worldUnits) portalScene.matrixWorld.identity();
+			else {
+				if (props.blend === 1) host.updateWorldMatrix(true, false);
+				portalScene.matrixWorld.copy(host.matrixWorld);
+			}
+			invalidate();
+			renderer.getDrawingBufferSize(drawSize);
+			mat.uniforms.resolution.value.copy(drawSize);
+			const prevAlpha = renderer.getClearAlpha();
+			renderer.setClearAlpha(0);
+			renderer.setRenderTarget(fboMap);
+			renderer.clear();
+			renderer.render(portalScene, cam);
+			renderer.setRenderTarget(null);
+			renderer.setClearAlpha(prevAlpha);
+			mat.map = fboMap.texture;
+		}, Number.POSITIVE_INFINITY);
+		onRender(({ renderer, scene, camera }) => {
+			if (!materialRef.value || !isWebGL(renderer)) return;
+			const cam = camera.value;
+			if (!cam) return;
+			const blend = props.blend;
+			if (blend <= 0) return;
+			if (blend >= 1) {
+				renderer.render(portalScene, cam);
+				return;
+			}
+			renderer.getDrawingBufferSize(drawSize);
+			if (buffer1.width !== drawSize.x || buffer1.height !== drawSize.y) {
+				buffer1.setSize(drawSize.x, drawSize.y);
+				buffer2.setSize(drawSize.x, drawSize.y);
+			}
+			quadMaterial.uniforms.blend.value = blend;
+			const prevAlpha = renderer.getClearAlpha();
+			renderer.setClearAlpha(1);
+			renderer.setRenderTarget(buffer1);
+			renderer.clear();
+			renderer.render(portalScene, cam);
+			renderer.setRenderTarget(buffer2);
+			renderer.clear();
+			renderer.render(scene.value, cam);
+			renderer.setRenderTarget(null);
+			renderer.render(quadScene, quadCamera);
+			renderer.setClearAlpha(prevAlpha);
+		}, props.renderPriority);
+		onBeforeUnmount(() => {
+			fboMap.dispose();
+			buffer1.dispose();
+			buffer2.dispose();
+			quadGeometry.dispose();
+			quadMaterial.dispose();
+		});
+		__expose({ instance: materialRef });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [createElementVNode("TresPortalMaterialImpl", {
+				ref_key: "materialRef",
+				ref: materialRef
+			}, null, 512), createVNode(unref(TresPortal), { to: unref(portalScene) }, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, ["to"])], 64);
+		};
+	}
+});
+
+//#endregion
+//#region src/core/materials/meshPortalMaterial/index.vue
+var meshPortalMaterial_default = index_vue_vue_type_script_setup_true_lang_default$4;
 
 //#endregion
 //#region src/utils/constants.ts
@@ -8916,7 +9529,7 @@ var MeshReflectionMaterial = class extends MeshStandardMaterial {
 
 //#endregion
 //#region src/core/materials/meshReflectionMaterial/index.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$41 = [
+const _hoisted_1$43 = [
 	"texture-matrix",
 	"t-sharp",
 	"t-depth",
@@ -9322,7 +9935,7 @@ var index_vue_vue_type_script_setup_true_lang_default$3 = /* @__PURE__ */ define
 				"defines-USE_BLUR": hasBlur.value ? "" : void 0,
 				"defines-USE_DEPTH": hasDepth.value ? "" : void 0,
 				"defines-USE_DISTORTION": hasDistortion.value ? "" : void 0
-			}), null, 16, _hoisted_1$41);
+			}), null, 16, _hoisted_1$43);
 		};
 	}
 });
@@ -9578,7 +10191,7 @@ var MeshTransmissionMaterial = class extends MeshPhysicalMaterial {
 
 //#endregion
 //#region src/core/materials/meshTransmissionMaterial/index.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$40 = ["args"];
+const _hoisted_1$42 = ["args"];
 var index_vue_vue_type_script_setup_true_lang_default$2 = /* @__PURE__ */ defineComponent({
 	__name: "index",
 	props: {
@@ -9781,7 +10394,7 @@ var index_vue_vue_type_script_setup_true_lang_default$2 = /* @__PURE__ */ define
 				ref_key: "materialRef",
 				ref: materialRef,
 				args: constructorArgs.value
-			}, tresProps.value), null, 16, _hoisted_1$40);
+			}, tresProps.value), null, 16, _hoisted_1$42);
 		};
 	}
 });
@@ -9833,7 +10446,7 @@ var WobbleMaterialImpl = class extends MeshStandardMaterial {
 
 //#endregion
 //#region src/core/materials/meshWobbleMaterial/index.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$39 = ["factor"];
+const _hoisted_1$41 = ["factor"];
 var index_vue_vue_type_script_setup_true_lang_default$1 = /* @__PURE__ */ defineComponent({
 	__name: "index",
 	props: {
@@ -9869,7 +10482,7 @@ var index_vue_vue_type_script_setup_true_lang_default$1 = /* @__PURE__ */ define
 				ref_key: "materialRef",
 				ref: materialRef,
 				factor: __props.factor
-			}, null, 8, _hoisted_1$39);
+			}, null, 8, _hoisted_1$41);
 		};
 	}
 });
@@ -9902,7 +10515,7 @@ var PointMaterial = class extends PointsMaterial {
 
 //#endregion
 //#region src/core/materials/pointMaterial/component.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$38 = ["object"];
+const _hoisted_1$40 = ["object"];
 var component_vue_vue_type_script_setup_true_lang_default$7 = /* @__PURE__ */ defineComponent({
 	__name: "component",
 	props: { sizeAttenuation: {
@@ -9922,7 +10535,7 @@ var component_vue_vue_type_script_setup_true_lang_default$7 = /* @__PURE__ */ de
 		});
 		__expose({ instance: materialRef });
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("primitive", { object: materialRef.value }, null, 8, _hoisted_1$38);
+			return openBlock(), createElementBlock("primitive", { object: materialRef.value }, null, 8, _hoisted_1$40);
 		};
 	}
 });
@@ -10175,7 +10788,7 @@ function _resetGoal(goal) {
 
 //#endregion
 //#region src/core/miscellaneous/Bounds/component.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$37 = [
+const _hoisted_1$39 = [
 	"object",
 	"duration",
 	"offset"
@@ -10264,7 +10877,7 @@ var component_vue_vue_type_script_setup_true_lang_default$6 = /* @__PURE__ */ de
 				object: unref(bounds),
 				duration: __props.duration,
 				offset: __props.offset
-			}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_1$37);
+			}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_1$39);
 		};
 	}
 });
@@ -10384,7 +10997,7 @@ var MouseParallax_default = MouseParallax_vue_vue_type_script_setup_true_lang_de
 
 //#endregion
 //#region src/core/miscellaneous/PositionalAudio.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$36 = ["args"];
+const _hoisted_1$38 = ["args"];
 var PositionalAudio_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "PositionalAudio",
 	props: {
@@ -10539,7 +11152,7 @@ var PositionalAudio_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 				ref_key: "positionalAudioRef",
 				ref: positionalAudioRef,
 				args: [unref(listener)]
-			}, null, 8, _hoisted_1$36);
+			}, null, 8, _hoisted_1$38);
 		};
 	}
 });
@@ -10553,8 +11166,19 @@ var PositionalAudio_default = PositionalAudio_vue_vue_type_script_setup_true_lan
 /**
 * Creates an AnimationMixer and returns it.
 *
+* `actions` is keyed by clip name. Pass the model's clip names as `TName` to get those
+* keys typed instead of a bare string index — `tres gltf` generates that union for you.
+*
+* @example
+* ```ts
+* type ActionName = 'Idle' | 'Run'
+* const { actions } = useAnimations<AnimationClip, ActionName>(animations, modelRef)
+* actions.Idle?.play()
+* ```
+*
 * @export
 * @template T
+* @template TName
 * @param {T[]} animations
 * @param {(Scene | Ref<Object3D | undefined | null>)} [modelRef]
 * @return {*}
@@ -10565,7 +11189,7 @@ function useAnimations(animations, modelRef, options) {
 	const actions = shallowReactive({});
 	const setupActions = () => {
 		const items = unref(animations);
-		if (items && items.length > 0) {
+		if (reference.value && items && items.length > 0) {
 			Object.keys(actions).forEach((key) => delete actions[key]);
 			items.forEach((animation) => {
 				const action = mixer.value.clipAction(animation, reference.value);
@@ -10575,14 +11199,15 @@ function useAnimations(animations, modelRef, options) {
 	};
 	watch(animations, setupActions, {
 		deep: true,
-		immediate: true
+		immediate: true,
+		flush: "post"
 	});
 	watch(reference, (newRef) => {
 		if (newRef) {
 			mixer.value.uncacheRoot(reference.value);
 			setupActions();
 		}
-	});
+	}, { flush: "post" });
 	if (!options?.manualUpdate) {
 		const { onBeforeRender } = useLoop();
 		onBeforeRender(({ delta }) => {
@@ -10942,8 +11567,8 @@ function groupAtlasFramesByKey(frames) {
 
 //#endregion
 //#region src/core/objects/AnimatedSprite/component.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$35 = ["scale", "position"];
-const _hoisted_2$24 = ["map", "alphaTest"];
+const _hoisted_1$37 = ["scale", "position"];
+const _hoisted_2$25 = ["map", "alphaTest"];
 const _hoisted_3$5 = ["scale", "position"];
 const _hoisted_4$3 = [
 	"side",
@@ -11170,7 +11795,7 @@ var component_vue_vue_type_script_setup_true_lang_default$5 = /* @__PURE__ */ de
 				map: unref(texture$1),
 				transparent: true,
 				alphaTest: props.alphaTest
-			}, null, 8, _hoisted_2$24)], 8, _hoisted_1$35)) : (openBlock(), createElementBlock("TresMesh", {
+			}, null, 8, _hoisted_2$25)], 8, _hoisted_1$37)) : (openBlock(), createElementBlock("TresMesh", {
 				key: 1,
 				scale: [
 					scaleX.value,
@@ -11241,7 +11866,7 @@ function useCubeCamera(props) {
 
 //#endregion
 //#region src/core/objects/CubeCamera/component.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$34 = ["object"];
+const _hoisted_1$36 = ["object"];
 var component_vue_vue_type_script_setup_true_lang_default$4 = /* @__PURE__ */ defineComponent({
 	__name: "component",
 	props: {
@@ -11305,7 +11930,7 @@ var component_vue_vue_type_script_setup_true_lang_default$4 = /* @__PURE__ */ de
 			return openBlock(), createElementBlock("TresGroup", {
 				ref_key: "groupRef",
 				ref: groupRef
-			}, [createElementVNode("primitive", { object: unref(camera) }, null, 8, _hoisted_1$34), renderSlot(_ctx.$slots, "default")], 512);
+			}, [createElementVNode("primitive", { object: unref(camera) }, null, 8, _hoisted_1$36), renderSlot(_ctx.$slots, "default")], 512);
 		};
 	}
 });
@@ -11392,7 +12017,7 @@ var component_default$6 = component_vue_vue_type_script_setup_true_lang_default$
 
 //#endregion
 //#region src/core/objects/GradientTexture.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$33 = [
+const _hoisted_1$35 = [
 	"color-space",
 	"args",
 	"attach"
@@ -11486,7 +12111,7 @@ var GradientTexture_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 				"color-space": unref(renderer).outputColorSpace,
 				args: [unref(canvas)],
 				attach: props.attach
-			}, null, 8, _hoisted_1$33);
+			}, null, 8, _hoisted_1$35);
 		};
 	}
 });
@@ -11642,7 +12267,7 @@ const getObjectCSSMatrix = (matrix, factor) => {
 
 //#endregion
 //#region src/core/objects/html/HTML.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$32 = [
+const _hoisted_1$34 = [
 	"material",
 	"cast-shadow",
 	"receive-shadow",
@@ -12010,7 +12635,7 @@ var HTML_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 				"cast-shadow": unref(castShadow),
 				"receive-shadow": unref(receiveShadow),
 				geometry: unref(geometry) || unref(defaultPlaneGeometry)
-			}, null, 8, _hoisted_1$32)) : createCommentVNode("v-if", true)], 512);
+			}, null, 8, _hoisted_1$34)) : createCommentVNode("v-if", true)], 512);
 		};
 	}
 });
@@ -12115,8 +12740,8 @@ var ImageMaterial_default = ImageMaterial_vue_vue_type_script_setup_true_lang_de
 
 //#endregion
 //#region src/core/objects/Image/component.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$31 = ["scale"];
-const _hoisted_2$23 = ["args"];
+const _hoisted_1$33 = ["scale"];
+const _hoisted_2$24 = ["args"];
 var component_vue_vue_type_script_setup_true_lang_default$2 = /* @__PURE__ */ defineComponent({
 	__name: "component",
 	props: {
@@ -12210,7 +12835,7 @@ var component_vue_vue_type_script_setup_true_lang_default$2 = /* @__PURE__ */ de
 				1,
 				props.segments,
 				props.segments
-			] }, null, 8, _hoisted_2$23)]), createVNode(ImageMaterial_default, {
+			] }, null, 8, _hoisted_2$24)]), createVNode(ImageMaterial_default, {
 				color: props.color,
 				map: texture$1.value,
 				zoom: props.zoom,
@@ -12236,7 +12861,7 @@ var component_vue_vue_type_script_setup_true_lang_default$2 = /* @__PURE__ */ de
 				"toneMapped",
 				"transparent",
 				"side"
-			])], 8, _hoisted_1$31);
+			])], 8, _hoisted_1$33);
 		};
 	}
 });
@@ -12300,7 +12925,7 @@ var MarchingCube_default = MarchingCube_vue_vue_type_script_setup_true_lang_defa
 
 //#endregion
 //#region src/core/objects/MarchingCubes/MarchingCubes.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$30 = ["object"];
+const _hoisted_1$32 = ["object"];
 var MarchingCubes_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "MarchingCubes",
 	props: {
@@ -12340,7 +12965,7 @@ var MarchingCubes_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 		});
 		__expose({ instance: marchingCubes });
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("primitive", { object: marchingCubes.value }, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_1$30);
+			return openBlock(), createElementBlock("primitive", { object: marchingCubes.value }, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_1$32);
 		};
 	}
 });
@@ -12392,9 +13017,81 @@ var MarchingPlane_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 //#region src/core/objects/MarchingCubes/MarchingPlane.vue
 var MarchingPlane_default = MarchingPlane_vue_vue_type_script_setup_true_lang_default;
 
+//#endregion
+//#region src/core/objects/Refractor.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$31 = ["args", "material-uniforms-color-value"];
+var Refractor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "Refractor",
+	props: {
+		color: {
+			type: null,
+			required: false,
+			default: "#7f7f7f"
+		},
+		textureWidth: {
+			type: Number,
+			required: false,
+			default: 512
+		},
+		textureHeight: {
+			type: Number,
+			required: false,
+			default: 512
+		},
+		clipBias: {
+			type: Number,
+			required: false,
+			default: 0
+		},
+		multisample: {
+			type: Number,
+			required: false,
+			default: 4
+		},
+		shader: {
+			type: Object,
+			required: false,
+			default: Refractor.RefractorShader
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		const { extend: extend$1, invalidate } = useTres();
+		const refractorRef = shallowRef();
+		extend$1({ Refractor });
+		const { color, textureWidth, textureHeight, clipBias, multisample, shader } = toRefs(props);
+		const colorValue = computed(() => new Color(color.value));
+		watch(props, () => {
+			invalidate();
+		});
+		onBeforeUnmount(() => {
+			refractorRef.value?.dispose();
+		});
+		__expose({ instance: refractorRef });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("TresRefractor", {
+				ref_key: "refractorRef",
+				ref: refractorRef,
+				args: [void 0, {
+					textureWidth: unref(textureWidth),
+					textureHeight: unref(textureHeight),
+					clipBias: unref(clipBias),
+					multisample: unref(multisample),
+					shader: unref(shader)
+				}],
+				"material-uniforms-color-value": colorValue.value
+			}, [renderSlot(_ctx.$slots, "default", {}, () => [_cache[0] || (_cache[0] = createElementVNode("TresPlaneGeometry", { args: [5, 5] }, null, -1))])], 8, _hoisted_1$31);
+		};
+	}
+});
+
+//#endregion
+//#region src/core/objects/Refractor.vue
+var Refractor_default = Refractor_vue_vue_type_script_setup_true_lang_default;
+
 //#endregion
 //#region src/core/objects/Reflector.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$29 = ["args", "material-uniforms-color-value"];
+const _hoisted_1$30 = ["args", "material-uniforms-color-value"];
 var Reflector_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "Reflector",
 	props: {
@@ -12435,10 +13132,13 @@ var Reflector_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 		const reflectorRef = shallowRef();
 		extend$1({ Reflector });
 		const { color, textureWidth, textureHeight, clipBias, multisample, shader } = toRefs(props);
-		const colorValue = computed(() => Array.isArray(color.value) ? new Color(...color.value) : new Color(color.value));
+		const colorValue = computed(() => new Color(color.value));
 		watch(props, () => {
 			invalidate();
 		});
+		onBeforeUnmount(() => {
+			reflectorRef.value?.dispose();
+		});
 		__expose({ instance: reflectorRef });
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("TresReflector", {
@@ -12452,7 +13152,7 @@ var Reflector_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 					shader: unref(shader)
 				}],
 				"material-uniforms-color-value": colorValue.value
-			}, [renderSlot(_ctx.$slots, "default", {}, () => [_cache[0] || (_cache[0] = createElementVNode("TresPlaneGeometry", { args: [5, 5] }, null, -1))])], 8, _hoisted_1$29);
+			}, [renderSlot(_ctx.$slots, "default", {}, () => [_cache[0] || (_cache[0] = createElementVNode("TresPlaneGeometry", { args: [5, 5] }, null, -1))])], 8, _hoisted_1$30);
 		};
 	}
 });
@@ -12463,7 +13163,7 @@ var Reflector_default = Reflector_vue_vue_type_script_setup_true_lang_default;
 
 //#endregion
 //#region src/core/objects/Text3D.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$28 = ["args", "center"];
+const _hoisted_1$29 = ["args", "center"];
 var Text3D_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "Text3D",
 	props: {
@@ -12581,7 +13281,7 @@ var Text3D_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 				key: 0,
 				args: [localText.value, textOptions.value],
 				center: unref(center)
-			}, null, 8, _hoisted_1$28)) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "default")], 512)) : createCommentVNode("v-if", true);
+			}, null, 8, _hoisted_1$29)) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "default")], 512)) : createCommentVNode("v-if", true);
 		};
 	}
 });
@@ -12592,8 +13292,8 @@ var Text3D_default = Text3D_vue_vue_type_script_setup_true_lang_default;
 
 //#endregion
 //#region src/core/shapes/Box.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$27 = ["args"];
-const _hoisted_2$22 = ["color"];
+const _hoisted_1$28 = ["args"];
+const _hoisted_2$23 = ["color"];
 var Box_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "Box",
 	props: {
@@ -12625,7 +13325,7 @@ var Box_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComp
 			return openBlock(), createElementBlock("TresMesh", {
 				ref_key: "boxRef",
 				ref: boxRef
-			}, [createElementVNode("TresBoxGeometry", { args: unref(args) }, null, 8, _hoisted_1$27), renderSlot(_ctx.$slots, "default", {}, () => [createElementVNode("TresMeshBasicMaterial", { color: unref(color) }, null, 8, _hoisted_2$22)])], 512);
+			}, [createElementVNode("TresBoxGeometry", { args: unref(args) }, null, 8, _hoisted_1$28), renderSlot(_ctx.$slots, "default", {}, () => [createElementVNode("TresMeshBasicMaterial", { color: unref(color) }, null, 8, _hoisted_2$23)])], 512);
 		};
 	}
 });
@@ -12636,7 +13336,7 @@ var Box_default = Box_vue_vue_type_script_setup_true_lang_default;
 
 //#endregion
 //#region src/core/shapes/Line2.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$26 = ["object"];
+const _hoisted_1$27 = ["object"];
 var Line2_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "Line2",
 	props: {
@@ -12791,7 +13491,7 @@ var Line2_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 			return openBlock(), createElementBlock("primitive", {
 				ref: lineRef.value,
 				object: unref(line$1)
-			}, null, 8, _hoisted_1$26);
+			}, null, 8, _hoisted_1$27);
 		};
 	}
 });
@@ -12919,8 +13619,8 @@ var CatmullRomCurve3_default = CatmullRomCurve3_vue_vue_type_script_setup_true_l
 
 //#endregion
 //#region src/core/shapes/Circle.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$25 = ["args"];
-const _hoisted_2$21 = ["color"];
+const _hoisted_1$26 = ["args"];
+const _hoisted_2$22 = ["color"];
 var Circle_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "Circle",
 	props: {
@@ -12953,7 +13653,7 @@ var Circle_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 			return openBlock(), createElementBlock("TresMesh", {
 				ref_key: "circleRef",
 				ref: circleRef
-			}, [createElementVNode("TresCircleGeometry", { args: unref(args) }, null, 8, _hoisted_1$25), renderSlot(_ctx.$slots, "default", {}, () => [createElementVNode("TresMeshBasicMaterial", { color: unref(color) }, null, 8, _hoisted_2$21)])], 512);
+			}, [createElementVNode("TresCircleGeometry", { args: unref(args) }, null, 8, _hoisted_1$26), renderSlot(_ctx.$slots, "default", {}, () => [createElementVNode("TresMeshBasicMaterial", { color: unref(color) }, null, 8, _hoisted_2$22)])], 512);
 		};
 	}
 });
@@ -12964,8 +13664,8 @@ var Circle_default = Circle_vue_vue_type_script_setup_true_lang_default;
 
 //#endregion
 //#region src/core/shapes/Cone.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$24 = ["args"];
-const _hoisted_2$20 = ["color"];
+const _hoisted_1$25 = ["args"];
+const _hoisted_2$21 = ["color"];
 var Cone_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "Cone",
 	props: {
@@ -13001,7 +13701,7 @@ var Cone_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 			return openBlock(), createElementBlock("TresMesh", {
 				ref_key: "coneRef",
 				ref: coneRef
-			}, [createElementVNode("TresConeGeometry", { args: unref(args) }, null, 8, _hoisted_1$24), renderSlot(_ctx.$slots, "default", {}, () => [createElementVNode("TresMeshBasicMaterial", { color: unref(color) }, null, 8, _hoisted_2$20)])], 512);
+			}, [createElementVNode("TresConeGeometry", { args: unref(args) }, null, 8, _hoisted_1$25), renderSlot(_ctx.$slots, "default", {}, () => [createElementVNode("TresMeshBasicMaterial", { color: unref(color) }, null, 8, _hoisted_2$21)])], 512);
 		};
 	}
 });
@@ -13062,8 +13762,8 @@ var CubicBezierLine_default = CubicBezierLine_vue_vue_type_script_setup_true_lan
 
 //#endregion
 //#region src/core/shapes/Cylinder.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$23 = ["args"];
-const _hoisted_2$19 = ["color"];
+const _hoisted_1$24 = ["args"];
+const _hoisted_2$20 = ["color"];
 var Cylinder_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "Cylinder",
 	props: {
@@ -13100,7 +13800,7 @@ var Cylinder_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 			return openBlock(), createElementBlock("TresMesh", {
 				ref_key: "cylinderRef",
 				ref: cylinderRef
-			}, [createElementVNode("TresCylinderGeometry", { args: unref(args) }, null, 8, _hoisted_1$23), renderSlot(_ctx.$slots, "default", {}, () => [createElementVNode("TresMeshBasicMaterial", { color: unref(color) }, null, 8, _hoisted_2$19)])], 512);
+			}, [createElementVNode("TresCylinderGeometry", { args: unref(args) }, null, 8, _hoisted_1$24), renderSlot(_ctx.$slots, "default", {}, () => [createElementVNode("TresMeshBasicMaterial", { color: unref(color) }, null, 8, _hoisted_2$20)])], 512);
 		};
 	}
 });
@@ -13111,8 +13811,8 @@ var Cylinder_default = Cylinder_vue_vue_type_script_setup_true_lang_default;
 
 //#endregion
 //#region src/core/shapes/Dodecahedron.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$22 = ["args"];
-const _hoisted_2$18 = ["color"];
+const _hoisted_1$23 = ["args"];
+const _hoisted_2$19 = ["color"];
 var Dodecahedron_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "Dodecahedron",
 	props: {
@@ -13140,7 +13840,7 @@ var Dodecahedron_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 			return openBlock(), createElementBlock("TresMesh", {
 				ref_key: "dodecahedronRef",
 				ref: dodecahedronRef
-			}, [createElementVNode("TresDodecahedronGeometry", { args: unref(args) }, null, 8, _hoisted_1$22), renderSlot(_ctx.$slots, "default", {}, () => [createElementVNode("TresMeshBasicMaterial", { color: unref(color) }, null, 8, _hoisted_2$18)])], 512);
+			}, [createElementVNode("TresDodecahedronGeometry", { args: unref(args) }, null, 8, _hoisted_1$23), renderSlot(_ctx.$slots, "default", {}, () => [createElementVNode("TresMeshBasicMaterial", { color: unref(color) }, null, 8, _hoisted_2$19)])], 512);
 		};
 	}
 });
@@ -13151,7 +13851,7 @@ var Dodecahedron_default = Dodecahedron_vue_vue_type_script_setup_true_lang_defa
 
 //#endregion
 //#region src/core/shapes/Grid.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$21 = [
+const _hoisted_1$22 = [
 	"side",
 	"cell-size",
 	"section-size",
@@ -13165,7 +13865,7 @@ const _hoisted_1$21 = [
 	"infinite-grid",
 	"follow-camera"
 ];
-const _hoisted_2$17 = ["args"];
+const _hoisted_2$18 = ["args"];
 var Grid_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "Grid",
 	props: {
@@ -13353,7 +14053,7 @@ var Grid_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 				"fade-from": props.fadeFrom,
 				"infinite-grid": props.infiniteGrid,
 				"follow-camera": props.followCamera
-			}, null, 8, _hoisted_1$21), createElementVNode("TresPlaneGeometry", { args: props.args }, null, 8, _hoisted_2$17)], 512);
+			}, null, 8, _hoisted_1$22), createElementVNode("TresPlaneGeometry", { args: props.args }, null, 8, _hoisted_2$18)], 512);
 		};
 	}
 });
@@ -13364,8 +14064,8 @@ var Grid_default = Grid_vue_vue_type_script_setup_true_lang_default;
 
 //#endregion
 //#region src/core/shapes/Icosahedron.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$20 = ["args"];
-const _hoisted_2$16 = ["color"];
+const _hoisted_1$21 = ["args"];
+const _hoisted_2$17 = ["color"];
 var Icosahedron_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "Icosahedron",
 	props: {
@@ -13393,7 +14093,7 @@ var Icosahedron_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 			return openBlock(), createElementBlock("TresMesh", {
 				ref_key: "icosahedronRef",
 				ref: icosahedronRef
-			}, [createElementVNode("TresIcosahedronGeometry", { args: unref(args) }, null, 8, _hoisted_1$20), renderSlot(_ctx.$slots, "default", {}, () => [createElementVNode("TresMeshBasicMaterial", { color: unref(color) }, null, 8, _hoisted_2$16)])], 512);
+			}, [createElementVNode("TresIcosahedronGeometry", { args: unref(args) }, null, 8, _hoisted_1$21), renderSlot(_ctx.$slots, "default", {}, () => [createElementVNode("TresMeshBasicMaterial", { color: unref(color) }, null, 8, _hoisted_2$17)])], 512);
 		};
 	}
 });
@@ -13404,8 +14104,8 @@ var Icosahedron_default = Icosahedron_vue_vue_type_script_setup_true_lang_defaul
 
 //#endregion
 //#region src/core/shapes/Octahedron.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$19 = ["args"];
-const _hoisted_2$15 = ["color"];
+const _hoisted_1$20 = ["args"];
+const _hoisted_2$16 = ["color"];
 var Octahedron_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "Octahedron",
 	props: {
@@ -13433,7 +14133,7 @@ var Octahedron_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 			return openBlock(), createElementBlock("TresMesh", {
 				ref_key: "octahedronRef",
 				ref: octahedronRef
-			}, [createElementVNode("TresOctahedronGeometry", { args: unref(args) }, null, 8, _hoisted_1$19), renderSlot(_ctx.$slots, "default", {}, () => [createElementVNode("TresMeshBasicMaterial", { color: unref(color) }, null, 8, _hoisted_2$15)])], 512);
+			}, [createElementVNode("TresOctahedronGeometry", { args: unref(args) }, null, 8, _hoisted_1$20), renderSlot(_ctx.$slots, "default", {}, () => [createElementVNode("TresMeshBasicMaterial", { color: unref(color) }, null, 8, _hoisted_2$16)])], 512);
 		};
 	}
 });
@@ -13444,8 +14144,8 @@ var Octahedron_default = Octahedron_vue_vue_type_script_setup_true_lang_default;
 
 //#endregion
 //#region src/core/shapes/Plane.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$18 = ["rotation"];
-const _hoisted_2$14 = ["args"];
+const _hoisted_1$19 = ["rotation"];
+const _hoisted_2$15 = ["args"];
 const _hoisted_3$4 = ["color"];
 var Plane_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "Plane",
@@ -13479,7 +14179,7 @@ var Plane_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 					0,
 					0
 				]
-			}, [createElementVNode("TresPlaneGeometry", { args: unref(args) }, null, 8, _hoisted_2$14), renderSlot(_ctx.$slots, "default", {}, () => [createElementVNode("TresMeshBasicMaterial", { color: unref(color) }, null, 8, _hoisted_3$4)])], 8, _hoisted_1$18);
+			}, [createElementVNode("TresPlaneGeometry", { args: unref(args) }, null, 8, _hoisted_2$15), renderSlot(_ctx.$slots, "default", {}, () => [createElementVNode("TresMeshBasicMaterial", { color: unref(color) }, null, 8, _hoisted_3$4)])], 8, _hoisted_1$19);
 		};
 	}
 });
@@ -13536,8 +14236,8 @@ var QuadraticBezierLine_default = QuadraticBezierLine_vue_vue_type_script_setup_
 
 //#endregion
 //#region src/core/shapes/Ring.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$17 = ["args"];
-const _hoisted_2$13 = ["color"];
+const _hoisted_1$18 = ["args"];
+const _hoisted_2$14 = ["color"];
 var Ring_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "Ring",
 	props: {
@@ -13568,7 +14268,7 @@ var Ring_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 			return openBlock(), createElementBlock("TresMesh", {
 				ref_key: "ringRef",
 				ref: ringRef
-			}, [createElementVNode("TresRingGeometry", { args: unref(args) }, null, 8, _hoisted_1$17), renderSlot(_ctx.$slots, "default", {}, () => [createElementVNode("TresMeshBasicMaterial", { color: unref(color) }, null, 8, _hoisted_2$13)])], 512);
+			}, [createElementVNode("TresRingGeometry", { args: unref(args) }, null, 8, _hoisted_1$18), renderSlot(_ctx.$slots, "default", {}, () => [createElementVNode("TresMeshBasicMaterial", { color: unref(color) }, null, 8, _hoisted_2$14)])], 512);
 		};
 	}
 });
@@ -13579,8 +14279,8 @@ var Ring_default = Ring_vue_vue_type_script_setup_true_lang_default;
 
 //#endregion
 //#region src/core/shapes/RoundedBox.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$16 = ["args"];
-const _hoisted_2$12 = ["color"];
+const _hoisted_1$17 = ["args"];
+const _hoisted_2$13 = ["color"];
 var RoundedBox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "RoundedBox",
 	props: {
@@ -13614,7 +14314,7 @@ var RoundedBox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 			return openBlock(), createElementBlock("TresMesh", {
 				ref_key: "roundedBoxRef",
 				ref: roundedBoxRef
-			}, [createElementVNode("TresRoundedBoxGeometry", { args: unref(args) }, null, 8, _hoisted_1$16), renderSlot(_ctx.$slots, "default", {}, () => [createElementVNode("TresMeshBasicMaterial", { color: unref(color) }, null, 8, _hoisted_2$12)])], 512);
+			}, [createElementVNode("TresRoundedBoxGeometry", { args: unref(args) }, null, 8, _hoisted_1$17), renderSlot(_ctx.$slots, "default", {}, () => [createElementVNode("TresMeshBasicMaterial", { color: unref(color) }, null, 8, _hoisted_2$13)])], 512);
 		};
 	}
 });
@@ -13623,6 +14323,158 @@ var RoundedBox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 //#region src/core/shapes/RoundedBox.vue
 var RoundedBox_default = RoundedBox_vue_vue_type_script_setup_true_lang_default;
 
+//#endregion
+//#region src/core/shapes/RoundedPlaneGeometry.ts
+/**
+* A plane geometry with rounded corners.
+*
+* Vendored from pmndrs/maath (MIT) to avoid an extra dependency.
+* @see https://github.com/pmndrs/maath/blob/main/packages/maath/src/geometry.ts
+* @see https://discourse.threejs.org/t/roundedrectangle-squircle/28645/20
+*/
+var RoundedPlaneGeometry = class extends BufferGeometry {
+	parameters;
+	constructor(width = 1, height = 1, radius = .2, segments = 16) {
+		super();
+		this.parameters = {
+			width,
+			height,
+			radius,
+			segments
+		};
+		const wi = width / 2 - radius;
+		const hi = height / 2 - radius;
+		const ul = radius / width;
+		const ur = (width - radius) / width;
+		const vl = radius / height;
+		const vh = (height - radius) / height;
+		const positions = [
+			wi,
+			hi,
+			0,
+			-wi,
+			hi,
+			0,
+			-wi,
+			-hi,
+			0,
+			wi,
+			-hi,
+			0
+		];
+		const uvs = [
+			ur,
+			vh,
+			ul,
+			vh,
+			ul,
+			vl,
+			ur,
+			vl
+		];
+		const n = [
+			3 * (segments + 1) + 3,
+			3 * (segments + 1) + 4,
+			segments + 4,
+			segments + 5,
+			2 * (segments + 1) + 4,
+			2,
+			1,
+			2 * (segments + 1) + 3,
+			3,
+			4 * (segments + 1) + 3,
+			4,
+			0
+		];
+		const indices = [
+			n[0],
+			n[1],
+			n[2],
+			n[0],
+			n[2],
+			n[3],
+			n[4],
+			n[5],
+			n[6],
+			n[4],
+			n[6],
+			n[7],
+			n[8],
+			n[9],
+			n[10],
+			n[8],
+			n[10],
+			n[11]
+		];
+		let phi, cos, sin, xc, yc, uc, vc, idx;
+		for (let i = 0; i < 4; i++) {
+			xc = i < 1 || i > 2 ? wi : -wi;
+			yc = i < 2 ? hi : -hi;
+			uc = i < 1 || i > 2 ? ur : ul;
+			vc = i < 2 ? vh : vl;
+			for (let j = 0; j <= segments; j++) {
+				phi = Math.PI / 2 * (i + j / segments);
+				cos = Math.cos(phi);
+				sin = Math.sin(phi);
+				positions.push(xc + radius * cos, yc + radius * sin, 0);
+				uvs.push(uc + ul * cos, vc + vl * sin);
+				if (j < segments) {
+					idx = (segments + 1) * i + j + 4;
+					indices.push(i, idx, idx + 1);
+				}
+			}
+		}
+		this.setIndex(new BufferAttribute(new Uint32Array(indices), 1));
+		this.setAttribute("position", new BufferAttribute(new Float32Array(positions), 3));
+		this.setAttribute("uv", new BufferAttribute(new Float32Array(uvs), 2));
+	}
+};
+
+//#endregion
+//#region src/core/shapes/RoundedPlane.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$16 = ["args"];
+const _hoisted_2$12 = ["color"];
+var RoundedPlane_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "RoundedPlane",
+	props: {
+		args: {
+			type: Array,
+			required: false,
+			default: () => [
+				1,
+				1,
+				.2,
+				16
+			]
+		},
+		color: {
+			type: null,
+			required: false,
+			default: "#ffffff"
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		const { args, color } = toRefs(__props);
+		const { invalidate, extend: extend$1 } = useTres();
+		extend$1({ RoundedPlaneGeometry });
+		watch(args, () => {
+			invalidate();
+		});
+		const roundedPlaneRef = shallowRef();
+		__expose({ instance: roundedPlaneRef });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("TresMesh", {
+				ref_key: "roundedPlaneRef",
+				ref: roundedPlaneRef
+			}, [createElementVNode("TresRoundedPlaneGeometry", { args: unref(args) }, null, 8, _hoisted_1$16), renderSlot(_ctx.$slots, "default", {}, () => [createElementVNode("TresMeshBasicMaterial", { color: unref(color) }, null, 8, _hoisted_2$12)])], 512);
+		};
+	}
+});
+
+//#endregion
+//#region src/core/shapes/RoundedPlane.vue
+var RoundedPlane_default = RoundedPlane_vue_vue_type_script_setup_true_lang_default;
+
 //#endregion
 //#region src/core/shapes/ScreenQuad.vue?vue&type=script&setup=true&lang.ts
 const _hoisted_1$15 = ["geometry"];
@@ -14731,7 +15583,7 @@ const _hoisted_1$5 = [
 	"transparent",
 	"size-attenuation"
 ];
-const _hoisted_2$3 = ["position", "velocity"];
+const _hoisted_2$3 = ["position"];
 var Precipitation_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "Precipitation",
 	props: {
@@ -14814,15 +15666,15 @@ var Precipitation_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 	setup(__props, { expose: __expose }) {
 		const { size, area, color, alphaMap: alphaMapUrl, map: mapUrl, opacity, alphaTest, depthWrite, transparent, sizeAttenuation, count, speed, randomness } = toRefs(__props);
 		const geometryRef = shallowRef();
-		let positionArray = [];
-		let velocityArray = [];
+		const positionArray = shallowRef(new Float32Array());
+		let velocityArray = new Float32Array();
 		const setPosition = () => {
-			positionArray = new Float32Array(count.value * 3);
+			positionArray.value = new Float32Array(count.value * 3);
 			for (let i = 0; i < count.value; i++) {
 				const i3 = i * 3;
-				positionArray[i3] = (Math.random() - .5) * area.value[0];
-				positionArray[i3 + 1] = (Math.random() - .5) * area.value[1];
-				positionArray[i3 + 2] = (Math.random() - .5) * area.value[2];
+				positionArray.value[i3] = (Math.random() - .5) * area.value[0];
+				positionArray.value[i3 + 1] = (Math.random() - .5) * area.value[1];
+				positionArray.value[i3 + 2] = (Math.random() - .5) * area.value[2];
 			}
 		};
 		const setSpeed = () => {
@@ -14834,12 +15686,15 @@ var Precipitation_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 		};
 		setSpeed();
 		setPosition();
-		watch(speed, () => {
+		watch(count, () => {
+			setPosition();
 			setSpeed();
 		});
-		watchEffect(() => {
-			if (speed.value) return;
-			setPosition();
+		watch(area, (newVal, oldVal) => {
+			if (!oldVal || newVal[0] !== oldVal[0] || newVal[1] !== oldVal[1] || newVal[2] !== oldVal[2]) setPosition();
+		}, { deep: true });
+		watch([randomness, speed], () => {
+			setSpeed();
 		});
 		const alphaMapTexture = shallowRef(null);
 		const mapTexture = shallowRef(null);
@@ -14887,8 +15742,7 @@ var Precipitation_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 			}, null, 8, _hoisted_1$5), createElementVNode("TresBufferGeometry", {
 				ref_key: "geometryRef",
 				ref: geometryRef,
-				position: [unref(positionArray), 3],
-				velocity: [unref(velocityArray)]
+				position: [positionArray.value, 3]
 			}, null, 8, _hoisted_2$3)], 512);
 		};
 	}
@@ -16123,4 +16977,4 @@ function extractBindingPosition(binding) {
 }
 
 //#endregion
-export { component_default as AccumulativeShadows, Align_default as Align, component_default$1 as AnimatedSprite, Backdrop_default as Backdrop, BakeShadows, BaseCameraControls, Billboard_default as Billboard, component_default$2 as Bounds, Box_default as Box, CameraControls_default as CameraControls, CameraShake_default as CameraShake, CatmullRomCurve3_default as CatmullRomCurve3, Circle_default as Circle, CircleShadow_default as CircleShadow, Cone_default as Cone, ContactShadows_default as ContactShadows, component_default$3 as CubeCamera, CubicBezierLine_default as CubicBezierLine, customShaderMaterial_default as CustomShaderMaterial, Cylinder_default as Cylinder, Decal_default as Decal, DecalDebugUI_default as DecalDebugUI, Dodecahedron_default as Dodecahedron, Edges_default as Edges, component_default$4 as Environment, component_default$5 as FBXModel, component_default$6 as Fbo, Fit_default as Fit, component_default$7 as GLTFModel, GlobalAudio, GradientTexture_default as GradientTexture, Grid_default as Grid, component_default$8 as Helper, holographicMaterial_default as HolographicMaterial, HTML_default as Html, Icosahedron_default as Icosahedron, component_default$9 as Image, KeyboardControls_default as KeyboardControls, LOD_default as LOD, component_default$10 as Lensflare, Levioso_default as Levioso, lightformer_default as Lightformer, Line2_default as Line2, MapControls_default as MapControls, MarchingCube_default as MarchingCube, MarchingCubes_default as MarchingCubes, MarchingPlane_default as MarchingPlane, component_default$11 as Mask, meshDiscardMaterial_default as MeshDiscardMaterial, meshGlassMaterial_default as MeshGlassMaterial, meshReflectionMaterial_default as MeshReflectionMaterial, meshTransmissionMaterial_default as MeshTransmissionMaterial, meshWobbleMaterial_default as MeshWobbleMaterial, MouseParallax_default as MouseParallax, Ocean_default as Ocean, Octahedron_default as Octahedron, OrbitControls_default as OrbitControls, component_default$12 as Outline, Plane_default as Plane, component_default$13 as PointMaterial, PointerLockControls_default as PointerLockControls, PositionalAudio_default as PositionalAudio, Precipitation_default as Precipitation, QuadraticBezierLine_default as QuadraticBezierLine, component_default$14 as RandomizedLights, Reflector_default as Reflector, Ring_default as Ring, RoundedBox_default as RoundedBox, component_default$15 as Sampler, ScreenQuad_default as ScreenQuad, ScreenSizer_default as ScreenSizer, ScreenSpace_default as ScreenSpace, ScrollControls_default as ScrollControls, Sky_default as Sky, Smoke_default as Smoke, SoftShadows_default as SoftShadows, component_default$16 as Sparkles, Sphere_default as Sphere, Stage_default as Stage, Stars_default as Stars, Stats, StatsGl, Superformula_default as Superformula, Tetrahedron_default as Tetrahedron, Text3D_default as Text3D, Torus_default as Torus, TorusKnot_default as TorusKnot, TransformControls_default as TransformControls, Tube_default as Tube, component_default$17 as UseSVG, component_default$18 as UseTexture, ensureTextureNames, extractBindingPosition, getTextureAspect, getTextureName, hasSetter, invalidateDecalGeometry, pick, useAnimations, useBVH, useDecalEditor, useEnvironment, useFBO, useFBX, useGLTF, useGLTFExporter, useHelper, useIntersect, useMask, useProgress, useSVG, useSurfaceSampler, useTexture, useTextures, useVideoTexture };
+export { component_default as AccumulativeShadows, Align_default as Align, component_default$1 as AnimatedSprite, Backdrop_default as Backdrop, BakeShadows, BaseCameraControls, Billboard_default as Billboard, component_default$2 as Bounds, Box_default as Box, CameraControls_default as CameraControls, CameraShake_default as CameraShake, CatmullRomCurve3_default as CatmullRomCurve3, Circle_default as Circle, CircleShadow_default as CircleShadow, Cone_default as Cone, ContactShadows_default as ContactShadows, component_default$3 as CubeCamera, CubicBezierLine_default as CubicBezierLine, customShaderMaterial_default as CustomShaderMaterial, Cylinder_default as Cylinder, Decal_default as Decal, DecalDebugUI_default as DecalDebugUI, Dodecahedron_default as Dodecahedron, Edges_default as Edges, component_default$4 as Environment, component_default$5 as FBXModel, component_default$6 as Fbo, Fit_default as Fit, component_default$7 as GLTFModel, GlobalAudio, GradientTexture_default as GradientTexture, Grid_default as Grid, component_default$8 as Helper, holographicMaterial_default as HolographicMaterial, HTML_default as Html, INSTANCES_INJECTION_KEY, Icosahedron_default as Icosahedron, component_default$9 as Image, Instance_default as Instance, Instances_default as Instances, KeyboardControls_default as KeyboardControls, LOD_default as LOD, component_default$10 as Lensflare, Levioso_default as Levioso, lightformer_default as Lightformer, Line2_default as Line2, MERGED_INJECTION_KEY, MapControls_default as MapControls, MarchingCube_default as MarchingCube, MarchingCubes_default as MarchingCubes, MarchingPlane_default as MarchingPlane, component_default$11 as Mask, Merged_default as Merged, meshDiscardMaterial_default as MeshDiscardMaterial, meshGlassMaterial_default as MeshGlassMaterial, meshPortalMaterial_default as MeshPortalMaterial, meshReflectionMaterial_default as MeshReflectionMaterial, meshTransmissionMaterial_default as MeshTransmissionMaterial, meshWobbleMaterial_default as MeshWobbleMaterial, MouseParallax_default as MouseParallax, Ocean_default as Ocean, Octahedron_default as Octahedron, OrbitControls_default as OrbitControls, component_default$12 as Outline, Plane_default as Plane, component_default$13 as PointMaterial, PointerLockControls_default as PointerLockControls, PositionMesh, PositionalAudio_default as PositionalAudio, Precipitation_default as Precipitation, QuadraticBezierLine_default as QuadraticBezierLine, component_default$14 as RandomizedLights, Reflector_default as Reflector, Refractor_default as Refractor, Ring_default as Ring, RoundedBox_default as RoundedBox, RoundedPlane_default as RoundedPlane, component_default$15 as Sampler, ScreenQuad_default as ScreenQuad, ScreenSizer_default as ScreenSizer, ScreenSpace_default as ScreenSpace, ScrollControls_default as ScrollControls, Sky_default as Sky, Smoke_default as Smoke, SoftShadows_default as SoftShadows, component_default$16 as Sparkles, Sphere_default as Sphere, Stage_default as Stage, Stars_default as Stars, Stats, StatsGl, Superformula_default as Superformula, Tetrahedron_default as Tetrahedron, Text3D_default as Text3D, Torus_default as Torus, TorusKnot_default as TorusKnot, TransformControls_default as TransformControls, Tube_default as Tube, component_default$17 as UseSVG, component_default$18 as UseTexture, ensureTextureNames, extractBindingPosition, getTextureAspect, getTextureName, hasSetter, invalidateDecalGeometry, pick, useAnimations, useBVH, useDecalEditor, useEnvironment, useFBO, useFBX, useGLTF, useGLTFExporter, useHelper, useIntersect, useMask, useProgress, useSVG, useSurfaceSampler, useTexture, useTextures, useVideoTexture };