So I am having this issue where when I add Html to my gltf through mesh and add transform and the position for example, when I reload my scene that Html component moves away form the provided position and then moves back when I click on the gltf model. Images and my code are below for reference. I was following two separate videos but for some reason I seem to be the only one facing this issue and I don’t know why.
Laptop.js
<mesh
castShadow
receiveShadow
geometry={nodes.Circle002_4.geometry}
material={materials.DisplayGlass}>
<Html occlude transform position={[0, 2, -2]}>
<h1>Hello World!</h1>
</Html>
</mesh>
App.js
function App() {
return (
<div className="container">
<Canvas
frameloop="demand"
shadows
dpr={[1, 2]}
camera={{ position: [0, 3, 7], fov: 55, near: 0.5, far: 60 }}
>
<Suspense fallback={null}>
<hemisphereLight
position={[0, 0, -5]}
intensity={0.5}
groundColor={"black"}
/>
<pointLight position={[5, 5, 5]} intensity={1.5} />
<OrbitControls enableZoom={false}/>
</Suspense>
<Laptop />
<Preload all />
</Canvas>
</div>
);
}
Before Clicking on GLTF
After Clicking on GLTF
