iOS Rendering Issue with <Html>
from @react-three/drei
Hi everyone,
I’m a beginner with Three.js, so I apologize in advance if I’m missing something obvious!
I’m working on a React + Three.js project using @react-three/drei, and I have an issue with rendering HTML inside the scene when viewed on iOS (Safari & Chrome).
The Issue
I’m attaching HTML content (<Html>
from @react-three/drei) to a mesh representing a screen. It displays correctly on my computer browser, but on iOS, the position of the HTML content is misaligned.
- On my computer (Chrome/Safari), everything looks fine.
- On iOS (Chrome/Safari), the HTML is incorrectly positioned.
- Click events still happen at the correct (expected) position, even though the visible HTML is in the wrong place.
- The issue is not related to screen size/responsiveness because it’s not reproducible by resizing the computer browser.
Screenshots
Clicking red part clicks help in this case:
Code Snippet
import MonitorContent from "@/components/pc/MonitorContent";
import { PCPosition } from "@/constants/positions";
import { Html, useGLTF } from "@react-three/drei";
import { Mesh } from "three";
export function PCModel() {
const { scene, nodes } = useGLTF("/models/pc.glb");
const screenNode =
nodes?.screen && nodes?.screen.type === "Mesh"
? (nodes?.screen as Mesh)
: null;
return (
<group>
<primitive
object={scene}
position={PCPosition}
rotation={[0, 0.07, 0]}
scale={5}
/>
{screenNode && (
<group>
<mesh geometry={screenNode.geometry}>
{/* Attach HTML content to the screen */}
<Html
transform={true}
position={[-0.0, 0.16, 0.05]} // Slightly in front of the screen
rotation={[-0.35, 0.07, 0.03]}
distanceFactor={1} // Adjust to match the screen perspective
occlude="blending"
>
<div
className="h-full w-full max-h-full max-w-full overflow-hidden"
style={{
height: "113px",
width: "138px",
}}
>
<MonitorContent />
</div>
</Html>
</mesh>
</group>
)}
</group>
);
}
Possible Causes?
- Is there a known issue with how
<Html>
elements are positioned/rendered in iOS? - Could this be related to how iOS handles WebGL layers or DOM overlays?
- Are there workarounds to ensure consistent positioning across all devices?
Any insights or suggestions would be greatly appreciated! Thanks in advance.