CODEWITHSUNDEEP
reactjsthreejs-editorr3f
이승렬
이승렬

Reputation: 1

Problem of misalignment with html components when zoomed in and out with react r3f

I want to position the html components like mesh even if they are enlarged or reduced. But this is what happens when you zoom in or out

enter image description here

this is my code

<Canvas style={{ width: "100%", height: "100%" }} shadows>
        <axesHelper args={[100]} />
        <Camera />
        <group dispose={null}>
          <mesh position={[0, 0, 0]} geometry={new THREE.BoxGeometry()}>
            <Html position={[0, 0.05, -0.09]} transform>
              <div
                style={{
                  padding: "10px",
                  background: "white",
                }}
              >
                <h1>Hello World</h1>
                <p>This is a simple HTML element inside a 3D scene.</p>
              </div>
            </Html>
          </mesh>
        </group>
...

I'd appreciate it if you could give me a way or link to try it.

Upvotes: 0

Views: 13

Answers (0)

Related Questions