Make the HTML element from drei transparent

Questions
,
1 
<Html
					position={[28, 3, 20]}
					rotation={[degToRad(-90), 0, degToRad(90)]}
					castShadow
					receiveShadow
					occlude="blending"
					transform
					wrapperClass="labTitles"
				>
					<h1 style={{ background: "red" }}>Hello World</h1>
				</Html>

image
image586×508 55.1 KB

How can I get rid of the margin around h1 and make the HTML element transparent, so that I only see the text?

2

if you use blending you can determine the shape of the masking geometry yourself, like so: The three graces - CodeSandbox in theory i think it should figure the size out all by itself, it would be best to talk to faraz, the author of that feature, directly on the pmndrs discord.

3

@CHOIX just get rid of the margin on the <h1>.

margin: 0

Here’s the example @drcmda pasted, but with your h1:

1 Like