0

I`m using react three fiber withg drei and want to use the html component in transfrom mode:

https://drei.pmnd.rs/?path=/story/misc-html--html-transform-st

Unfortunately setting transfrom to true does`nt do anything.

Here is my code:

       <Html
          transform
          distanceFactor={20}
          position={[5, -2, 0]}
          style={{
            width: "50px",
          }}
        >
          <img
            src={"assets/img/expand-outline.svg"}
            alt="expand"
          />
        </Html>

What I basically want to achieve is, that the html component is rotating and transforming according its parent.

Can't find a codepen or somethin similar. Hope you can help me.

tinytree
  • 1,009
  • 2
  • 12
  • 28

1 Answers1

0

I had similar problem and I found several causes.

But before all this, add some background color to Html to see what's happening.

1. Add both widht and height to Html's style attribute.

  • my Html didn't have height so it wasn't visible.

2. If you've rotated the parent, Check your Html's orientation.

  • This happened to me.
    1. My parent mesh is imported from GLTF file with "z-up" orientation.
    2. So I rotated it -90 degrees.
    3. Child component's orientation is dependent to it's parent, so the Html was also -90 deg rotated.
    4. As Html component doesn't have depth and was parallel to camera, it wasn't visible.
  • So Try adding some rotation={[...]}
  • If you're importing Z-UP files, best way to fix it is to transform it before/while importing files by,
    1. export it y-up.
    2. while loading a file, traverse through geometries and rotate them.

If you still got problem, consider below.

3. Put your parent and Html inside <group></group> separatly. Use this Group to do transforms you want.

  • It can be the easiest solution if you don't want to change all the parents.
  • Make sure both your parent and Html are initiated at the center of scene.
<group position={[0,0,0]} rotation={[0,0,0]}>   // transform this
  <mesh/>   // parent
  <Html/>   // your Html
<group/>
JohnnyEast
  • 1
  • 1