@tresjs/cientos 5.1.1 → 5.2.0

package/dist/trescientos.js

@@ -1,6 +1,6 @@
 /**
   * name: @tresjs/cientos
-  * version: v5.1.1
+  * version: v5.2.0
   * (c) 2025
   * description: Collection of useful helpers and fully functional, ready-made abstractions for Tres
   * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
@@ -10,10 +10,9 @@ import { buildGraph, extend, logError, logWarning, normalizeColor, normalizeVect
 import * as THREE from "three";
 import { AdditiveBlending, AlwaysStencilFunc, AnimationMixer, Audio, AudioListener, AudioLoader, BackSide, Box2, Box3, BoxGeometry, BufferAttribute, BufferGeometry, Camera, CatmullRomCurve3, ClampToEdgeWrapping, Clock, Color, CubeCamera, CubeReflectionMapping, CubeTextureLoader, CubicBezierCurve3, DataTexture, DefaultLoadingManager, DepthTexture, DirectionalLight, DoubleSide, EdgesGeometry, EqualStencilFunc, EquirectangularReflectionMapping, Euler, FloatType, FramebufferTexture, FrontSide, Group, HalfFloatType, IcosahedronGeometry, InstancedMesh, InterleavedBuffer, InterleavedBufferAttribute, KeepStencilOp, LOD, LinearFilter, MOUSE, MathUtils, Matrix4, Mesh, MeshBasicMaterial, MeshDepthMaterial, MeshLambertMaterial, MeshStandardMaterial, NearestFilter, NoBlending, NotEqualStencilFunc, Object3D, OrthographicCamera, PerspectiveCamera, Plane, PlaneGeometry, Points, PointsMaterial, QuadraticBezierCurve3, Quaternion, REVISION, RGBAFormat, RawShaderMaterial, Raycaster, RepeatWrapping, ReplaceStencilOp, Scene, ShaderChunk, ShaderMaterial, ShapeGeometry, SkinnedMesh, Sphere, Spherical, TOUCH, TangentSpaceNormalMap, Texture, TextureLoader, UVMapping, Uniform, UniformsUtils, UnsignedByteType, Vector2, Vector3, Vector4, VideoTexture, WebGLCubeRenderTarget, WebGLRenderTarget, WebGLRenderer } from "three";
 import { tryOnScopeDispose, useDebounceFn, useElementSize, useEventListener, useMagicKeys, useMouse, useScroll, useWindowScroll, useWindowSize, watchThrottled, whenever } from "@vueuse/core";
-import { DRACOLoader, FBXLoader, FontLoader, GLTFExporter, GLTFLoader, HorizontalBlurShader, Line2, LineGeometry, LineMaterial, MapControls, MarchingCubes, MeshSurfaceSampler, OrbitControls, PointerLockControls, PositionalAudioHelper, RGBELoader, Reflector, RoundedBoxGeometry, SVGLoader, Sky, TextGeometry, TransformControls, VerticalBlurShader, Water, toCreasedNormals } from "three-stdlib";
+import { DRACOLoader, FBXLoader, FontLoader, GLTFExporter, GLTFLoader, HorizontalBlurShader, Line2, LineGeometry, LineMaterial, MapControls, MarchingCubes, MeshSurfaceSampler, OrbitControls, PointerLockControls, PositionalAudioHelper, RGBELoader, Reflector, RoundedBoxGeometry, SVGLoader, SimplexNoise, Sky, TextGeometry, TransformControls, VerticalBlurShader, Water, toCreasedNormals } from "three-stdlib";
 import BaseCameraControls, { default as CameraControls } from "camera-controls";
 import CustomShaderMaterial from "three-custom-shader-material/vanilla";
-import { WebGPURenderer } from "three/webgpu";
 import StatsImpl from "stats.js";
 import StatsGlImpl from "stats-gl";
 
@@ -916,7 +915,7 @@ function shaderMaterial(uniforms, vertexShader, fragmentShader, onInit) {
 * NOTE: Source:
 * https://threejs.org/docs/?q=material#api/en/materials/Material.transparent
 */
-const imageMaterialImpl = shaderMaterial({
+const ImageMaterialImpl = /* @__PURE__ */ shaderMaterial({
 	color: /* @__PURE__ */ new Color("white"),
 	scale: /* @__PURE__ */ new Vector2(1, 1),
 	imageBounds: /* @__PURE__ */ new Vector2(1, 1),
@@ -954,14 +953,14 @@ const imageMaterialImpl = shaderMaterial({
     vec2 aspect(vec2 size) {
       return size / min(size.x, size.y);
     }
-    
+
     const float PI = 3.14159265;
-      
+
     // from https://iquilezles.org/articles/distfunctions
     float udRoundBox( vec2 p, vec2 b, float r ) {
       return length(max(abs(p)-b+r,0.0))-r;
     }
-  
+
     void main() {
       vec2 s = aspect(scale);
       vec2 i = aspect(imageBounds);
@@ -971,25 +970,24 @@ const imageMaterialImpl = shaderMaterial({
       vec2 offset = (rs < ri ? vec2((new.x - s.x) / 2.0, 0.0) : vec2(0.0, (new.y - s.y) / 2.0)) / new;
       vec2 uv = vUv * s / new + offset;
       vec2 zUv = (uv - vec2(0.5, 0.5)) / zoom + vec2(0.5, 0.5);
-  
+
       vec2 res = vec2(scale * resolution);
       vec2 halfRes = 0.5 * res;
-      float b = udRoundBox(vUv.xy * res - halfRes, halfRes, resolution * radius);    
+      float b = udRoundBox(vUv.xy * res - halfRes, halfRes, resolution * radius);
         vec3 a = mix(vec3(1.0,0.0,0.0), vec3(0.0,0.0,0.0), smoothstep(0.0, 1.0, b));
       gl_FragColor = toGrayscale(texture2D(map, zUv) * vec4(color, opacity * a), grayscale);
-      
+
       #include <tonemapping_fragment>
       #include <colorspace_fragment>
     }
   `);
-var ImageMaterialImpl_default = imageMaterialImpl;
 
 //#endregion
 //#region src/core/abstractions/Image/ImageMaterial.vue?vue&type=script&setup=true&lang.ts
 var ImageMaterial_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "ImageMaterial",
 	setup(__props, { expose: __expose }) {
-		extend({ ImageMaterial: ImageMaterialImpl_default });
+		extend({ ImageMaterial: ImageMaterialImpl });
 		const materialRef = shallowRef();
 		__expose({ instance: materialRef });
 		return (_ctx, _cache) => {
@@ -1085,12 +1083,10 @@ var component_vue_vue_type_script_setup_true_lang_default$16 = /* @__PURE__ */ d
 		const planeBounds = computed(() => Array.isArray(props.scale) ? [props.scale[0], props.scale[1]] : [props.scale, props.scale]);
 		const imageBounds = computed(() => [texture$1.value?.image?.width ?? 0, texture$1.value?.image?.height ?? 0]);
 		const resolution = computed(() => Math.max(size.width.value, size.height.value));
+		const { state, isLoading } = useTexture(props.url);
 		watchEffect(() => {
 			if (props.texture) texture$1.value = props.texture;
-			else {
-				const { state: t } = useTexture(props.url);
-				texture$1.value = t.value;
-			}
+			if (!isLoading.value) texture$1.value = state.value;
 		});
 		const scale = computed(() => Array.isArray(props.scale) ? [...props.scale, 1] : props.scale);
 		__expose({ instance: imageRef });
@@ -2221,7 +2217,7 @@ var MouseParallax_default = MouseParallax_vue_vue_type_script_setup_true_lang_de
 
 //#endregion
 //#region src/core/abstractions/Outline/OutlineMaterialImpl.ts
-const OutlineMaterialImpl = shaderMaterial({
+const OutlineMaterialImpl = /* @__PURE__ */ shaderMaterial({
 	screenspace: false,
 	color: new Color("black"),
 	opacity: 1,
@@ -2253,7 +2249,7 @@ const OutlineMaterialImpl = shaderMaterial({
      #endif
      if (screenspace) {
        vec3 newPosition = tPosition.xyz + tNormal.xyz * thickness;
-       gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0); 
+       gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
      } else {
        vec4 clipPosition = projectionMatrix * modelViewMatrix * tPosition;
        vec4 clipNormal = projectionMatrix * modelViewMatrix * tNormal;
@@ -2268,7 +2264,6 @@ const OutlineMaterialImpl = shaderMaterial({
      #include <tonemapping_fragment>
      #include <colorspace_fragment>
    }`);
-var OutlineMaterialImpl_default = OutlineMaterialImpl;
 
 //#endregion
 //#region src/core/abstractions/Outline/component.vue?vue&type=script&setup=true&lang.ts
@@ -2330,7 +2325,7 @@ var component_vue_vue_type_script_setup_true_lang_default$13 = /* @__PURE__ */ d
 		const props = __props;
 		const groupRef = shallowRef();
 		__expose({ instance: groupRef });
-		const material = new OutlineMaterialImpl_default({ ...props });
+		const material = new OutlineMaterialImpl({ ...props });
 		const contextSize = new Vector2(1, 1);
 		let oldAngle = 0;
 		let oldGeometry = null;
@@ -2623,6 +2618,7 @@ 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(() => new Color(color.value));
 		watch(props, () => {
 			invalidate();
 		});
@@ -2638,7 +2634,7 @@ var Reflector_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 					multisample: unref(multisample),
 					shader: unref(shader)
 				}],
-				"material-uniforms-color-value": unref(color)
+				"material-uniforms-color-value": colorValue.value
 			}, [renderSlot(_ctx.$slots, "default", {}, () => [_cache[0] || (_cache[0] = createElementVNode("TresPlaneGeometry", { args: [5, 5] }, null, -1))])], 8, _hoisted_1$50);
 		};
 	}
@@ -5504,6 +5500,7 @@ var index_vue_vue_type_script_setup_true_lang_default$5 = /* @__PURE__ */ define
 			root: MeshHolographicMaterialClass,
 			constructor: HolographicMaterialParameters_default
 		});
+		const colorValue = computed(() => new Color(props.hologramColor));
 		const { onBeforeRender } = useLoop();
 		onBeforeRender(() => {
 			MeshHolographicMaterialClass.value?.update();
@@ -5518,7 +5515,7 @@ var index_vue_vue_type_script_setup_true_lang_default$5 = /* @__PURE__ */ define
 				"uniforms-hologramBrightness-value": props.hologramBrightness,
 				"uniforms-scanlineSize-value": props.scanlineSize,
 				"uniforms-signalSpeed-value": props.signalSpeed,
-				"uniforms-hologramColor-value": props.hologramColor,
+				"uniforms-hologramColor-value": colorValue.value,
 				"uniforms-hologramOpacity-value": props.hologramOpacity,
 				"uniforms-blinkFresnelOnly-value": props.blinkFresnelOnly,
 				enableAdditive: props.enableAdditive,
@@ -6429,7 +6426,7 @@ var index_vue_vue_type_script_setup_true_lang_default$2 = /* @__PURE__ */ define
 		onBeforeRender(({ renderer, scene, camera }) => {
 			const parent = materialRef.value?.__tres?.parent;
 			if (!parent) return;
-			if (renderer instanceof WebGPURenderer) {
+			if ("isWebGPURenderer" in renderer && renderer.isWebGPURenderer === true) {
 				console.warn("MeshReflectionMaterial: WebGPURenderer is not supported yet");
 				return;
 			}
@@ -6731,7 +6728,11 @@ var fragment_default = "void main() {\n  gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0)
 
 //#endregion
 //#region src/core/misc/html/shaders/vertex.glsl
-var vertex_default = "#include <common>\n\nvoid main() {\n  vec2 center = vec2(0., 1.);\n  float rotation = 0.0;\n\n  \n  \n  float size = 0.03;\n\n  vec4 mvPosition = modelViewMatrix * vec4( 0.0, 0.0, 0.0, 1.0 );\n  vec2 scale;\n  scale.x = length( vec3( modelMatrix[ 0 ].x, modelMatrix[ 0 ].y, modelMatrix[ 0 ].z ) );\n  scale.y = length( vec3( modelMatrix[ 1 ].x, modelMatrix[ 1 ].y, modelMatrix[ 1 ].z ) );\n\n  bool isPerspective = isPerspectiveMatrix( projectionMatrix );\n  if ( isPerspective ) scale *= - mvPosition.z;\n\n  vec2 alignedPosition = ( position.xy - ( center - vec2( 0.5 ) ) ) * scale * size;\n  vec2 rotatedPosition;\n  rotatedPosition.x = cos( rotation ) * alignedPosition.x - sin( rotation ) * alignedPosition.y;\n  rotatedPosition.y = sin( rotation ) * alignedPosition.x + cos( rotation ) * alignedPosition.y;\n  mvPosition.xy += rotatedPosition;\n\n  gl_Position = projectionMatrix * mvPosition;\n}";
+var vertex_default = "#include <common>\n\nuniform float uWidth;\nuniform float uHeight;\n\nvoid main() {\n\n  vec4 mvPosition = modelViewMatrix * vec4(0.0, 0.0, 0.0, 1.0);\n\n  vec2 quad = position.xy;\n\n  vec2 alignedPosition = quad * vec2(uWidth, uHeight);\n\n  mvPosition.xy += alignedPosition;\n\n  gl_Position = projectionMatrix * mvPosition;\n}";
+
+//#endregion
+//#region src/core/misc/html/shaders/passthrough-vertex.glsl
+var passthrough_vertex_default = "#include <common>\n\nvoid main() {\n  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n}";
 
 //#endregion
 //#region src/core/misc/html/utils.ts
@@ -6768,6 +6769,17 @@ function isObjectVisible(el, camera, raycaster, occlude) {
 	}
 	return true;
 }
+function getViewportFactor(camera, target = new Vector3(0, 0, 0), size) {
+	const { width, height } = size;
+	const aspect = width / height;
+	const position = v1;
+	const tempTarget = v2;
+	tempTarget.copy(target);
+	const distance = camera.getWorldPosition(position).distanceTo(tempTarget);
+	if (camera instanceof OrthographicCamera) return 1;
+	const fov = camera.fov * Math.PI / 180;
+	return width / (2 * Math.tan(fov / 2) * distance * aspect);
+}
 function objectScale(el, camera) {
 	if (camera instanceof OrthographicCamera) return camera.zoom;
 	else if (camera instanceof PerspectiveCamera) {
@@ -6812,35 +6824,41 @@ const getCameraCSSMatrix = ((multipliers) => (matrix) => getCSSMatrix(matrix, mu
 	1,
 	1
 ]);
-const getObjectCSSMatrix = ((scaleMultipliers) => (matrix, factor) => getCSSMatrix(matrix, scaleMultipliers(factor), "translate(-50%,-50%)"))((f) => [
-	1 / f,
-	1 / f,
-	1 / f,
-	1,
-	-1 / f,
-	-1 / f,
-	-1 / f,
-	-1,
-	1 / f,
-	1 / f,
-	1 / f,
-	1,
-	1,
-	1,
-	1,
-	1
-]);
+const getObjectCSSMatrix = (matrix, factor) => {
+	return getCSSMatrix(matrix, [
+		1 / factor,
+		1 / factor,
+		1 / factor,
+		1,
+		-1 / factor,
+		-1 / factor,
+		-1 / factor,
+		-1,
+		1 / factor,
+		1 / factor,
+		1 / factor,
+		1,
+		1,
+		1,
+		1,
+		1
+	], "translate(-50%,-50%)");
+};
 
 //#endregion
 //#region src/core/misc/html/HTML.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$33 = ["geometry", "material"];
+const _hoisted_1$33 = [
+	"material",
+	"cast-shadow",
+	"receive-shadow",
+	"geometry"
+];
 var HTML_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "HTML",
 	props: {
 		geometry: {
 			type: null,
-			required: false,
-			default: new PlaneGeometry()
+			required: false
 		},
 		material: {
 			type: null,
@@ -6856,6 +6874,11 @@ var HTML_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 			required: false,
 			default: false
 		},
+		prepend: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
 		portal: {
 			type: null,
 			required: false
@@ -6891,11 +6914,21 @@ var HTML_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 			required: false,
 			default: false
 		},
+		transparentMaterial: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
 		zIndexRange: {
 			type: Array,
 			required: false,
 			default: () => [16777271, 0]
 		},
+		calculatePosition: {
+			type: null,
+			required: false,
+			default: () => calculatePosition
+		},
 		occlude: {
 			type: [
 				Object,
@@ -6905,6 +6938,16 @@ var HTML_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 				String
 			],
 			required: false
+		},
+		castShadow: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		receiveShadow: {
+			type: Boolean,
+			required: false,
+			default: false
 		}
 	},
 	emits: ["onOcclude"],
@@ -6912,217 +6955,267 @@ var HTML_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 		const props = __props;
 		const emits = __emit;
 		const slots = useSlots();
+		const { geometry, material, as, transform, portal, wrapperClass, eps, distanceFactor, fullscreen, center, pointerEvents, sprite, prepend, occlude, zIndexRange, castShadow, receiveShadow, transparentMaterial, calculatePosition: calculatePosition$1 } = toRefs(props);
 		const attrs = useAttrs();
-		const groupRef = ref();
-		const meshRef = ref();
-		const { geometry, material, as, transform, portal, wrapperClass, eps, distanceFactor, fullscreen, center, pointerEvents, sprite, occlude, zIndexRange } = toRefs(props);
+		const groupRef = shallowRef(null);
+		const occlusionMeshRef = shallowRef(null);
+		const defaultPlaneGeometry = new PlaneGeometry();
 		const { renderer, scene, camera, sizes } = useTresContext();
 		const el = computed(() => document.createElement(as.value));
+		const raycaster = new Raycaster();
+		const tmpVec = new Vector3();
+		const tmpMatrix = new Matrix4();
+		const tmpQuat = new Quaternion();
 		const previousPosition = ref([
 			0,
 			0,
 			0
 		]);
 		const previousZoom = ref(0);
-		const vnode = ref();
-		const raycaster = ref(new Raycaster());
+		const vnode = ref(null);
+		const isVisible = ref(true);
+		const isMeshSizeSet = ref(false);
+		const baseStyle = computed(() => ({
+			position: "absolute",
+			top: "0",
+			left: "0",
+			willChange: "transform",
+			pointerEvents: pointerEvents.value,
+			...typeof attrs.style === "object" ? attrs.style : {}
+		}));
 		const styles = computed(() => {
+			const w = sizes.width.value;
+			const h = sizes.height.value;
 			if (transform.value) return {
-				position: "absolute",
-				top: 0,
-				left: 0,
-				width: `${sizes.width.value}px`,
-				height: `${sizes.height.value}px`,
+				...baseStyle.value,
 				transformStyle: "preserve-3d",
 				pointerEvents: "none",
-				zIndex: 2
+				width: `${w}px`,
+				height: `${h}px`
 			};
-			else return {
-				position: "absolute",
+			return {
+				...baseStyle.value,
 				transform: center.value ? "translate3d(-50%,-50%,0)" : "none",
 				...fullscreen.value && {
-					top: -sizes.height.value / 2,
-					left: -sizes.width.value / 2,
-					width: `${sizes.width.value}px`,
-					height: `${sizes.height.value}px`
+					top: `-${h / 2}px`,
+					left: `-${w / 2}px`,
+					width: `${w}px`,
+					height: `${h}px`
 				},
-				zIndex: 2,
-				...Object.assign({}, attrs.style)
+				pointerEvents: fullscreen.value ? "none" : pointerEvents.value
 			};
 		});
 		const transformInnerStyles = computed(() => ({
 			position: "absolute",
 			pointerEvents: pointerEvents.value
 		}));
-		const occlusionMeshRef = ref(null);
-		const isMeshSizeSet = ref(false);
-		const isRayCastOcclusion = computed(() => occlude?.value && occlude?.value !== "blending" || Array.isArray(occlude?.value) && occlude?.value.length && isRef(occlude.value[0]));
-		watch(() => occlude, ({ value }) => {
-			if (value === "blending") {
-				el.value.style.zIndex = `${Math.floor(zIndexRange.value[0] / 2)}`;
-				el.value.style.position = "absolute";
-				el.value.style.pointerEvents = "none";
-			} else {
-				el.value.style.zIndex = null;
-				el.value.style.position = null;
-				el.value.style.pointerEvents = null;
-			}
+		const isRayCastOcclusion = computed(() => {
+			const o = occlude.value;
+			return o && o !== "blending" && (Array.isArray(o) ? o.length && typeof o[0] !== "boolean" : true);
+		});
+		const effectiveMaterial = computed(() => {
+			if (material.value) return material.value;
+			return new ShaderMaterial({
+				vertexShader: sprite.value ? vertex_default : transform.value ? passthrough_vertex_default : vertex_default,
+				fragmentShader: fragment_default,
+				side: DoubleSide,
+				transparent: transparentMaterial.value,
+				uniforms: {
+					uWidth: { value: 1 },
+					uHeight: { value: 1 }
+				}
+			});
+		});
+		watchEffect(() => {
+			effectiveMaterial.value.transparent = transparentMaterial.value;
 		});
+		watch([occlude, () => renderer.instance], ([occludeVal, r]) => {
+			if (!r || occludeVal !== "blending") return;
+			const target = r.domElement;
+			target.style.zIndex = `${Math.floor(zIndexRange.value[0] / 2)}`;
+			target.style.position = "absolute";
+		}, { immediate: true });
 		watch(() => [
 			groupRef.value,
 			renderer.instance,
 			sizes.width.value,
 			sizes.height.value,
-			slots.default?.()
-		], ([group, renderer$1]) => {
-			if (group && renderer$1) {
-				const target = portal?.value || renderer$1.domElement;
-				scene.value?.updateMatrixWorld();
-				if (transform.value) el.value.style.cssText = "position:absolute;top:0;left:0;pointer-events:none;overflow:hidden;";
-				else {
-					const vector = calculatePosition(group, camera.activeCamera.value, {
-						width: sizes.width.value,
-						height: sizes.height.value
-					});
-					el.value.style.cssText = `position:absolute;top:0;left:0;transform:translate3d(${vector[0]}px,${vector[1]}px,0);transform-origin:0 0;`;
-				}
-				if (target && !el.value.parentNode) target.parentNode?.appendChild(el.value);
-				if (transform.value) vnode.value = createVNode("div", {
-					id: "outer",
-					style: styles.value
-				}, [createVNode("div", {
-					id: "inner",
-					style: transformInnerStyles.value
-				}, [createVNode("div", {
-					key: meshRef.value?.uuid,
-					id: scene?.value.uuid,
-					class: attrs.class,
-					style: attrs.style
-				}, slots.default?.())])]);
-				else vnode.value = createVNode("div", {
-					key: meshRef.value?.uuid,
-					id: scene?.value.uuid,
-					style: styles.value
-				}, slots.default?.());
-				render(vnode.value, el.value);
+			slots.default?.(),
+			camera.activeCamera.value
+		], ([group, r]) => {
+			if (!group || !r || !camera.activeCamera.value) return;
+			isMeshSizeSet.value = false;
+			scene.value?.updateMatrixWorld();
+			const elStyle = el.value.style;
+			elStyle.position = "absolute";
+			elStyle.top = "0";
+			elStyle.left = "0";
+			if (transform.value) {
+				elStyle.pointerEvents = "none";
+				elStyle.overflow = "hidden";
+				elStyle.transformStyle = "preserve-3d";
+			} else {
+				elStyle.transformOrigin = "0 0";
+				elStyle.willChange = "transform";
+				if (!occlude.value) elStyle.zIndex = `${zIndexRange.value[0]}`;
 			}
+			const parent = portal.value || r.domElement?.parentNode;
+			if (parent && !el.value.parentNode) prepend.value ? parent.prepend(el.value) : parent.appendChild(el.value);
+			vnode.value = transform.value ? createVNode("div", { style: styles.value }, [createVNode("div", { style: transformInnerStyles.value }, [createVNode("div", {
+				key: groupRef.value?.uuid,
+				class: attrs.class,
+				style: attrs.style
+			}, slots.default?.())])]) : createVNode("div", {
+				key: groupRef.value?.uuid,
+				style: styles.value,
+				class: attrs.class
+			}, slots.default?.());
+			render(vnode.value, el.value);
 		});
 		watchEffect(() => {
-			if (wrapperClass?.value) el.value.className = wrapperClass.value;
+			if (wrapperClass.value) el.value.className = wrapperClass.value;
 		});
-		const visible = ref(true);
 		const { onBeforeRender } = useLoop();
-		onBeforeRender(() => {
-			if (groupRef.value && camera.activeCamera.value && renderer.instance) {
-				camera.activeCamera.value?.updateMatrixWorld();
-				groupRef.value.updateWorldMatrix(true, false);
-				const vector = transform.value ? previousPosition.value : calculatePosition(groupRef.value, camera.activeCamera.value, {
-					width: sizes.width.value || 0,
-					height: sizes.height.value || 0
-				});
-				if (transform.value || Math.abs(previousZoom.value - camera.activeCamera.value.zoom) > eps.value || Math.abs(previousPosition.value[0] - vector[0]) > eps.value || Math.abs(previousPosition.value[1] - vector[1]) > eps.value || Math.abs(previousPosition.value[2] - vector[2]) > eps.value) {
-					const isBehindCamera = isObjectBehindCamera(groupRef.value, camera.activeCamera.value);
-					let raytraceTarget = false;
-					if (isRayCastOcclusion.value) {
-						if (Array.isArray(occlude?.value)) raytraceTarget = occlude?.value;
-						else if (occlude?.value !== "blending") raytraceTarget = [scene.value];
-					}
-					const previouslyVisible = visible.value;
-					if (raytraceTarget) visible.value = isObjectVisible(groupRef.value, camera.activeCamera.value, raycaster.value, raytraceTarget) && !isBehindCamera;
-					else visible.value = !isBehindCamera;
-					if (previouslyVisible !== visible.value) {
-						emits("onOcclude", !visible.value);
-						el.value.style.display = visible.value ? "block" : "none";
-					}
-					const halfRange = Math.floor(zIndexRange.value[0] / 2);
-					const zRange = occlude?.value ? isRayCastOcclusion.value ? [zIndexRange.value[0], halfRange] : [halfRange - 1, 0] : zIndexRange.value;
-					el.value.style.zIndex = `${objectZIndex(groupRef.value, camera.activeCamera.value, zRange)}`;
-					if (transform.value) {
-						const [widthHalf, heightHalf] = [sizes.width.value / 2, sizes.height.value / 2];
-						const fov = camera.activeCamera.value.projectionMatrix.elements[5] * heightHalf;
-						const { isOrthographicCamera: isOrthographicCamera$2, top, left, bottom, right } = camera.activeCamera.value;
-						const cameraMatrix = getCameraCSSMatrix(camera.activeCamera.value.matrixWorldInverse);
-						const cameraTransform = isOrthographicCamera$2 ? `scale(${fov})translate(${epsilon(-(right + left) / 2)}px,${epsilon((top + bottom) / 2)}px)` : `translateZ(${fov}px)`;
-						let matrix = groupRef.value.matrixWorld;
-						if (sprite.value) {
-							matrix = camera.activeCamera.value.matrixWorldInverse.clone().transpose().copyPosition(matrix).scale(groupRef.value.scale);
-							matrix.elements[3] = matrix.elements[7] = matrix.elements[11] = 0;
-							matrix.elements[15] = 1;
-						}
-						el.value.style.width = `${sizes.width.value}px`;
-						el.value.style.height = `${sizes.height.value}px`;
-						el.value.style.perspective = isOrthographicCamera$2 ? "" : `${fov}px`;
-						if (vnode.value?.el && vnode.value?.children && Array.isArray(vnode.value.children)) {
-							vnode.value.el.style.transform = `${cameraTransform}${cameraMatrix}translate(${widthHalf}px,${heightHalf}px)`;
-							const firstChild = vnode.value.children[0];
-							if (firstChild && firstChild.el) firstChild.el.style.transform = getObjectCSSMatrix(matrix, 1 / ((distanceFactor?.value || 10) / 400));
-						}
-					} else {
-						const scale = distanceFactor?.value === void 0 ? 1 : objectScale(groupRef.value, camera.activeCamera.value) * distanceFactor?.value;
-						el.value.style.transform = `translate3d(${vector[0]}px,${vector[1]}px,0) scale(${scale})`;
-					}
+		onBeforeRender(({ invalidate }) => {
+			const group = groupRef.value;
+			const cam = camera.activeCamera.value;
+			const rend = renderer.instance;
+			if (!group || !cam || !rend) return;
+			cam.updateMatrixWorld();
+			group.updateWorldMatrix(true, false);
+			const width = sizes.width.value;
+			const height = sizes.height.value;
+			const widthHalf = width * .5;
+			const heightHalf = height * .5;
+			const newPos = transform.value ? previousPosition.value : calculatePosition$1.value(group, cam, {
+				width,
+				height
+			});
+			const posChanged = Math.abs(previousZoom.value - cam.zoom) > eps.value || Math.abs(previousPosition.value[0] - newPos[0]) > eps.value || Math.abs(previousPosition.value[1] - newPos[1]) > eps.value || Math.abs(previousPosition.value[2] - newPos[2]) > eps.value;
+			let changed = transform.value || posChanged;
+			let visible = true;
+			const behind = isObjectBehindCamera(group, cam);
+			if (isRayCastOcclusion.value) {
+				let targets = false;
+				if (Array.isArray(occlude.value)) targets = occlude.value;
+				else if (occlude.value !== "blending") targets = [scene.value];
+				if (targets) visible = isObjectVisible(group, cam, raycaster, targets) && !behind;
+			} else visible = !behind;
+			if (visible !== isVisible.value) {
+				isVisible.value = visible;
+				el.value.style.display = visible ? "block" : "none";
+				emits("onOcclude", !visible);
+				changed = true;
+			}
+			const halfRange = Math.floor(zIndexRange.value[0] / 2);
+			const zRange = occlude.value ? isRayCastOcclusion.value ? [zIndexRange.value[0], halfRange] : [halfRange - 1, 0] : zIndexRange.value;
+			el.value.style.zIndex = `${objectZIndex(group, cam, zRange)}`;
+			if (transform.value) {
+				const persp = cam.projectionMatrix.elements[5] * heightHalf;
+				const camMatrix = getCameraCSSMatrix(cam.matrixWorldInverse);
+				const isOrtho = cam instanceof OrthographicCamera;
+				const cameraTransform = isOrtho ? `scale(${persp})translate(${epsilon(-(cam.right + cam.left) / 2)}px,${epsilon((cam.top + cam.bottom) / 2)}px)` : `translateZ(${persp}px)`;
+				let finalMatrix = group.matrixWorld;
+				if (sprite.value) {
+					tmpMatrix.copy(group.matrixWorld);
+					const invCamMat = cam.matrixWorldInverse.clone().transpose();
+					tmpQuat.setFromRotationMatrix(invCamMat);
+					tmpMatrix.makeRotationFromQuaternion(tmpQuat);
+					group.getWorldPosition(tmpVec);
+					tmpMatrix.setPosition(tmpVec);
+					tmpMatrix.scale(group.scale);
+					tmpMatrix.elements[3] = tmpMatrix.elements[7] = tmpMatrix.elements[11] = 0;
+					tmpMatrix.elements[15] = 1;
+					finalMatrix = tmpMatrix;
+				}
+				const style = el.value.style;
+				style.width = `${width}px`;
+				style.height = `${height}px`;
+				style.perspective = isOrtho ? "" : `${persp}px`;
+				if (vnode.value?.el) {
+					vnode.value.el.style.transform = `${cameraTransform}${camMatrix}translate(${widthHalf}px,${heightHalf}px)`;
+					let inner;
+					if (Array.isArray(vnode.value.children)) inner = vnode.value.children[0];
+					if (inner?.el) inner.el.style.transform = getObjectCSSMatrix(finalMatrix, 1 / ((distanceFactor.value || 10) / 400));
 				}
-				previousPosition.value = vector;
-				previousZoom.value = camera.activeCamera.value.zoom;
+			} else {
+				const scale = distanceFactor.value === void 0 ? 1 : objectScale(group, cam) * distanceFactor.value;
+				el.value.style.transform = `translate3d(${newPos[0]}px,${newPos[1]}px,0) scale(${scale})`;
 			}
-			if (!isRayCastOcclusion.value && meshRef.value && !isMeshSizeSet.value) if (transform.value) {
-				if (vnode.value?.el && vnode.value?.children) {
-					const el$1 = (vnode.value?.children)[0];
-					if (el$1?.clientWidth && el$1?.clientHeight) {
-						const { isOrthographicCamera: isOrthographicCamera$2 } = camera.activeCamera.value;
-						if (isOrthographicCamera$2 || geometry) {
-							if (attrs.scale) if (!Array.isArray(attrs.scale)) meshRef.value.scale.setScalar(1 / attrs.scale);
-							else if (attrs.scale instanceof Vector3) meshRef.value.scale.copy(attrs.scale.clone().divideScalar(1));
-							else meshRef.value.scale.set(1 / attrs.scale[0], 1 / attrs.scale[1], 1 / attrs.scale[2]);
-						} else {
-							const ratio = (distanceFactor?.value || 10) / 400;
-							const w = el$1.clientWidth * ratio;
-							const h = el$1.clientHeight * ratio;
-							meshRef.value.scale.set(w, h, 1);
+			previousPosition.value = [
+				newPos[0],
+				newPos[1],
+				newPos[2]
+			];
+			previousZoom.value = cam.zoom;
+			if (!isRayCastOcclusion.value && occlusionMeshRef.value && !isMeshSizeSet.value) {
+				const mesh = occlusionMeshRef.value;
+				if (transform.value) {
+					const children = vnode.value?.children;
+					if (Array.isArray(children)) {
+						const element = children[0]?.el;
+						if (element) {
+							const isOrtho = cam instanceof OrthographicCamera;
+							if (isOrtho && geometry.value && attrs.scale) if (!Array.isArray(attrs.scale)) mesh.scale.setScalar(1 / attrs.scale);
+							else if (attrs.scale instanceof Vector3) mesh.scale.copy(attrs.scale);
+							else mesh.scale.set(1 / attrs.scale[0], 1 / attrs.scale[1], 1 / attrs.scale[2]);
+							else if (!isOrtho && !geometry.value) {
+								const ratio = (distanceFactor.value || 10) / 400;
+								if (sprite.value) {
+									effectiveMaterial.value.uniforms.uWidth.value = element.clientWidth * ratio;
+									effectiveMaterial.value.uniforms.uHeight.value = element.clientHeight * ratio;
+									mesh.lookAt(cam.position);
+									mesh.scale.set(1, 1, 1);
+								} else {
+									const w = element.clientWidth * ratio;
+									const h = element.clientHeight * ratio;
+									mesh.scale.set(w, h, 1);
+								}
+							}
+							isMeshSizeSet.value = true;
 						}
+					}
+				} else {
+					const element = el.value.children[0];
+					if (element?.clientWidth && element?.clientHeight) {
+						group.getWorldPosition(tmpVec);
+						const ratio = 1 / getViewportFactor(cam, tmpVec, {
+							width,
+							height
+						});
+						effectiveMaterial.value.uniforms.uWidth.value = element.clientWidth * ratio;
+						effectiveMaterial.value.uniforms.uHeight.value = element.clientHeight * ratio;
+						mesh.scale.set(1, 1, 1);
+						mesh.lookAt(cam.position);
 						isMeshSizeSet.value = true;
 					}
 				}
-			} else {
-				const ele = el.value.children[0];
-				if (ele?.clientWidth && ele?.clientHeight) {
-					const ratio = 1 / 1;
-					const w = ele.clientWidth * ratio;
-					const h = ele.clientHeight * ratio;
-					meshRef.value.scale.set(w, h, 1);
-					isMeshSizeSet.value = true;
-				}
-				occlusionMeshRef.value.lookAt(camera.activeCamera.value?.position);
 			}
-		});
-		const shaders = computed(() => ({
-			vertexShader: transform.value ? void 0 : vertex_default,
-			fragmentShader: fragment_default
-		}));
-		const shaderMaterial$1 = computed(() => {
-			const shader = shaders.value;
-			return material.value || new ShaderMaterial({
-				vertexShader: shader.vertexShader,
-				fragmentShader: shader.fragmentShader,
-				side: DoubleSide
-			});
+			if (changed) invalidate();
 		});
 		onUnmounted(() => {
-			if (shaderMaterial$1.value) shaderMaterial$1.value.dispose();
-			el.value.remove();
+			defaultPlaneGeometry?.dispose();
+			effectiveMaterial.value?.dispose();
+			if (el.value?.parentNode) el.value.parentNode.removeChild(el.value);
+		});
+		__expose({
+			instance: groupRef,
+			isVisible,
+			occlusionMesh: occlusionMeshRef
 		});
-		__expose({ instance: groupRef });
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("TresGroup", {
+			return openBlock(), createElementBlock("TresGroup", mergeProps(_ctx.$attrs, {
 				ref_key: "groupRef",
 				ref: groupRef
-			}, [unref(occlude) && !isRayCastOcclusion.value ? (openBlock(), createElementBlock("TresMesh", {
+			}), [unref(occlude) && !isRayCastOcclusion.value ? (openBlock(), createElementBlock("TresMesh", {
 				key: 0,
-				ref_key: "meshRef",
-				ref: meshRef,
-				geometry: unref(geometry),
-				material: shaderMaterial$1.value
-			}, null, 8, _hoisted_1$33)) : createCommentVNode("v-if", true)], 512);
+				ref_key: "occlusionMeshRef",
+				ref: occlusionMeshRef,
+				material: effectiveMaterial.value,
+				"cast-shadow": unref(castShadow),
+				"receive-shadow": unref(receiveShadow),
+				geometry: unref(geometry) || unref(defaultPlaneGeometry)
+			}, null, 8, _hoisted_1$33)) : createCommentVNode("v-if", true)], 16);
 		};
 	}
 });
@@ -10726,6 +10819,111 @@ var Smoke_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 //#region src/core/staging/Smoke.vue
 var Smoke_default = Smoke_vue_vue_type_script_setup_true_lang_default;
 
+//#endregion
+//#region src/core/staging/CameraShake.vue?vue&type=script&setup=true&lang.ts
+var CameraShake_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "CameraShake",
+	props: {
+		intensity: {
+			type: Number,
+			required: false,
+			default: 1
+		},
+		decay: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		decayRate: {
+			type: Number,
+			required: false,
+			default: .65
+		},
+		maxYaw: {
+			type: Number,
+			required: false,
+			default: .01
+		},
+		maxPitch: {
+			type: Number,
+			required: false,
+			default: .01
+		},
+		maxRoll: {
+			type: Number,
+			required: false,
+			default: .01
+		},
+		yawFrequency: {
+			type: Number,
+			required: false,
+			default: .1
+		},
+		pitchFrequency: {
+			type: Number,
+			required: false,
+			default: .1
+		},
+		rollFrequency: {
+			type: Number,
+			required: false,
+			default: .1
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const { intensity, decay, decayRate, maxYaw, maxPitch, maxRoll, yawFrequency, pitchFrequency, rollFrequency } = toRefs(props);
+		const { camera, controls } = useTresContext();
+		let cleanUpFn = null;
+		const currentIntensity = shallowRef(props.intensity);
+		const initialRotation = shallowRef(camera.activeCamera.value?.rotation.clone());
+		const yawNoise = new SimplexNoise();
+		const pitchNoise = new SimplexNoise();
+		const rollNoise = new SimplexNoise();
+		function constrainIntensity() {
+			if (currentIntensity.value < 0) currentIntensity.value = 0;
+			if (currentIntensity.value > 1) currentIntensity.value = 1;
+		}
+		watch(intensity, (newVal) => {
+			currentIntensity.value = newVal;
+			constrainIntensity();
+		});
+		function updateInitialRotation() {
+			if (camera.activeCamera.value) initialRotation.value = camera.activeCamera.value.rotation.clone();
+		}
+		watch([camera.activeCamera, controls], () => {
+			cleanUpFn?.();
+			if (controls.value) cleanUpFn = useEventListener(controls.value, "change", updateInitialRotation);
+			updateInitialRotation();
+		});
+		function setIntensity(v) {
+			currentIntensity.value = Math.min(1, Math.max(0, v));
+		}
+		const { onBeforeRender } = useLoop();
+		onBeforeRender(({ elapsed, delta }) => {
+			const cam = camera.activeCamera.value;
+			if (!cam) return;
+			if (!decay.value && currentIntensity.value < intensity.value) setIntensity(currentIntensity.value + decayRate.value * delta);
+			const shakeFactor = currentIntensity.value * currentIntensity.value;
+			const yaw = maxYaw.value * shakeFactor * yawNoise.noise(elapsed * yawFrequency.value, 1);
+			const pitch = maxPitch.value * shakeFactor * pitchNoise.noise(elapsed * pitchFrequency.value, 1);
+			const roll = maxRoll.value * shakeFactor * rollNoise.noise(elapsed * rollFrequency.value, 1);
+			cam.rotation.set(initialRotation.value.x + pitch, initialRotation.value.y + yaw, initialRotation.value.z + roll);
+			if (decay.value) setIntensity(currentIntensity.value - decayRate.value * delta);
+		});
+		onUnmounted(() => {
+			cleanUpFn?.();
+		});
+		return (_ctx, _cache) => {
+			return renderSlot(_ctx.$slots, "default");
+		};
+	}
+});
+
+//#endregion
+//#region src/core/staging/CameraShake.vue
+var CameraShake_default = CameraShake_vue_vue_type_script_setup_true_lang_default;
+
 //#endregion
 //#region src/core/staging/SoftShadows.vue?vue&type=script&setup=true&lang.ts
 const PCSSGetShadow = `
@@ -11520,7 +11718,8 @@ const _hoisted_3$1 = [
 	"castShadow",
 	"shadow-bias",
 	"shadow-normalBias",
-	"shadow-mapSize"
+	"shadow-mapSize-x",
+	"shadow-mapSize-y"
 ];
 const _hoisted_4$1 = ["position", "intensity"];
 const _hoisted_5 = ["position"];
@@ -11688,7 +11887,8 @@ var Stage_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 						castShadow: !!__props.shadows,
 						"shadow-bias": __props.shadows?.bias ?? 0,
 						"shadow-normalBias": __props.shadows?.normalBias ?? 0,
-						"shadow-mapSize": __props.shadows?.size ?? 1024
+						"shadow-mapSize-x": __props.shadows?.size ?? 1024,
+						"shadow-mapSize-y": __props.shadows?.size ?? 1024
 					}, null, 8, _hoisted_3$1),
 					createElementVNode("TresPointLight", {
 						position: lightingFillComputed.value,
@@ -12201,4 +12401,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, 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, 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, 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, extractBindingPosition, hasSetter, pick, useAnimations, useEnvironment, useFBO, useFBX, useGLTF, useGLTFExporter, 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, 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, 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, extractBindingPosition, hasSetter, pick, useAnimations, useEnvironment, useFBO, useFBX, useGLTF, useGLTFExporter, useIntersect, useMask, useProgress, useSVG, useSurfaceSampler, useTexture, useTextures, useVideoTexture };