From 8a738e8e4faadd1e145970b1d4feffce4c5349d0 Mon Sep 17 00:00:00 2001
From: Abhishek Singh <102522318+Abhishek-Singh02@users.noreply.github.com>
Date: Mon, 18 Nov 2024 16:48:33 +0530
Subject: [PATCH 1/2] refactor: add option to set default shader material to
 transparent in Html component

---
 src/web/Html.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/web/Html.tsx b/src/web/Html.tsx
index fde1f2598..4db6b2f94 100644
--- a/src/web/Html.tsx
+++ b/src/web/Html.tsx
@@ -127,6 +127,7 @@ export interface HtmlProps
   distanceFactor?: number
   sprite?: boolean
   transform?: boolean
+  transparent?: boolean
   zIndexRange?: Array<number>
   calculatePosition?: CalculatePosition
   as?: string
@@ -168,6 +169,7 @@ export const Html: ForwardRefComponent<HtmlProps, HTMLDivElement> = /* @__PURE__
       calculatePosition = defaultCalculatePosition,
       as = 'div',
       wrapperClass,
+      transparent=false,
       pointerEvents = 'auto',
       ...props
     }: HtmlProps,
@@ -459,6 +461,7 @@ export const Html: ForwardRefComponent<HtmlProps, HTMLDivElement> = /* @__PURE__
             {material || (
               <shaderMaterial
                 side={DoubleSide}
+                transparent={transparent}
                 vertexShader={shaders.vertexShader}
                 fragmentShader={shaders.fragmentShader}
               />

From 2d9eeee3c0eea666961394144ef4134ddae8a45c Mon Sep 17 00:00:00 2001
From: Abhishek Singh <102522318+Abhishek-Singh02@users.noreply.github.com>
Date: Mon, 18 Nov 2024 16:53:34 +0530
Subject: [PATCH 2/2] docs: Update html.mdx

---
 docs/misc/html.mdx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/misc/html.mdx b/docs/misc/html.mdx
index 611122cb4..c0d05a092 100644
--- a/docs/misc/html.mdx
+++ b/docs/misc/html.mdx
@@ -40,6 +40,7 @@ Allows you to tie HTML content to any object of your scene. It will be projected
   calculatePosition={(el: Object3D, camera: Camera, size: { width: number; height: number }) => number[]} // Override default positioning function. (default=undefined) [ignored in transform mode]
   occlude={[ref]} // Can be true or a Ref<Object3D>[], true occludes the entire scene (default: undefined)
   onOcclude={(hidden) => null} // Callback when the visibility changes (default: undefined)
+  transparent // sets the default shader material to transparent (default:false)
   {...groupProps} // All THREE.Group props are valid
   {...divProps} // All HTMLDivElement props are valid
 >