React DREI <HTML>

Questions
, , ,
1 
  <Canvas>
    <axesHelper />
    <CameraRig position={cameraPos} />
    <Floor props={floorProps} />
    <WallContainer props={wallData} isSelectionDisabled={true} />
    <ambientLight intensity={5} />
    <pointLight position={[10, 10, 10]} />

    <Html>
      <div>Hello</div>
    </Html>
  </Canvas>

So I’m using Html from drei. The issue is Html tag has automatically has a trasnform: translate3d which is making my div to be at the center.

How do I remove this transform? I treid transform none important. Nothing seems to be working.

image
image1359×150 9.23 KB

2

What’s the point of using HTML component then? The entire point of it is to position the div according to stuff in 3D space, which requires that transform.

3

I need to be able to place the div at top left of my screen. So as a workaround I did left to be -width/2 and top -height/2

Which I do not want to do. The purpose of Html is also to allow placing html component like div in the 3d space. But having that translate3d with x and y being the center point is the issue. I do not want it or else I need to calculate left and top as I did.

4

How does placing a div outside a Canvas sound to you?

function App() {
  return (
    <>
      <div style={{ position: 'fixed', top: 0, left: 0 }}>
        Hello
      </div>
      <Canvas >
        <ambientLight intensity={0.3} />
        <Box size={[1, 1, 1]} color="red" />
      </Canvas>
    </>
  );
}

5

It can be hard to wrap your head around the whole threejs-react-fiber-drei space. There is the index.html with a canvas as well as html elements. Then inside the canvas you can access react. It is complicated.

The initial dom/index.html. Inside the dom you will need a canvas tag, then inside the canvas, with r3f and drei you can have … Html. Understanding how this works will help, but will still get complicated.

Reading the documentation and working through examples is the answer. When I tried to do something like this the answer came through the r3f canvas documentation. The createRoot and custom canvas sections will probably help. I ended up making a canvas that can be full screen or shrink into a burger menu kind of icon. Complex, powerful and worthwhile (IMHO).

The other thing I found very helpful was understanding what threejs scissors and how the drei View component does that.

6

In this case consider following @Lukasz_D_Mastalerz advice and place the div outside of the Canvas scope (you can either place it directly, or if you need some data, use createPortal from react`):

<Canvas>
  <group>
    {createPortal(
      <div style={{ position: 'absolute', top: 0, left: 0 }}>
        :test-div:
      </div>,
      document.body
    )}
  </group>
</Canvas>

Using Html from drei is considerably way more expensive since, even if you remove the transform3d, it’ll still recalculate matrixes and 3D transformation of that HTML div on each frame.