@tresjs/cientos 5.1.2 → 5.2.0

package/dist/trescientos.js

@@ -1,6 +1,6 @@
 /**
   * name: @tresjs/cientos
-  * version: v5.1.2
+  * 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/)
@@ -6728,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
@@ -6765,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) {
@@ -6809,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,
@@ -6853,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
@@ -6888,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,
@@ -6902,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"],
@@ -6909,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);
 		};
 	}
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tresjs/cientos",
   "type": "module",
-  "version": "5.1.2",
+  "version": "5.2.0",
   "description": "Collection of useful helpers and fully functional, ready-made abstractions for Tres",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
   "license": "MIT",
@@ -73,8 +73,8 @@
     "vite-plugin-glsl": "^1.5.1",
     "vite-svg-loader": "^5.1.0",
     "vue-tsc": "^3.1.1",
-    "@tresjs/eslint-config": "1.5.1",
-    "@tresjs/core": "5.2.0"
+    "@tresjs/core": "5.2.0",
+    "@tresjs/eslint-config": "1.5.1"
   },
   "nx": {
     "implicitDependencies": [