lojjic/Html.tsx

## Html.tsx
import { useThree } from '@react-three/fiber';
import React, { useEffect } from 'react';
import { Html as DreiHtml } from '@react-three/drei';
import type { HtmlProps } from '@react-three/drei/web/Html';

export function Html(props: HtmlProps) {
  const { gl } = useThree();
  const canvas = gl.domElement as HTMLCanvasElement;

  // Drei's Html component sets pointerEvents:'none' on the canvas, which breaks MP
  // events, so we must undo that. Note this will affect the `occlude` feature.
  useEffect(() => {
    if (canvas) {
      canvas.style.pointerEvents = '';
    }
  }, [canvas]);

  // The default insertion point puts the HTML inside the shadow dom, which prevents
  // CSS styles from the outer document from being applied, so we change the default
  // to insert as a sibling of the web component. This can be overridden via the
  // `portal` prop to use a more specific container.
  const container = (canvas.getRootNode() as ShadowRoot).host.parentElement;
  return container && <DreiHtml portal={{ current: container }} {...props} />;
}
	import { useThree } from '@react-three/fiber';
	import React, { useEffect } from 'react';
	import { Html as DreiHtml } from '@react-three/drei';
	import type { HtmlProps } from '@react-three/drei/web/Html';

	export function Html(props: HtmlProps) {
	const { gl } = useThree();
	const canvas = gl.domElement as HTMLCanvasElement;

	// Drei's Html component sets pointerEvents:'none' on the canvas, which breaks MP
	// events, so we must undo that. Note this will affect the `occlude` feature.
	useEffect(() => {
	if (canvas) {
	canvas.style.pointerEvents = '';
	}
	}, [canvas]);

	// The default insertion point puts the HTML inside the shadow dom, which prevents
	// CSS styles from the outer document from being applied, so we change the default
	// to insert as a sibling of the web component. This can be overridden via the
	// `portal` prop to use a more specific container.
	const container = (canvas.getRootNode() as ShadowRoot).host.parentElement;
	return container && <DreiHtml portal={{ current: container }} {...props} />;
	}