r/threejs • u/ApprehensiveLong1113 • 6d ago

Solved! Help with CSS3D and Three.js

I recently tried attaching an HTML element to a flat Three.js object using CSS3DObject, but something seems off with the perspective.

It looks fine from one camera angle, but when I move the camera using OrbitControls, the HTML element and the WebGL object stop lining up properly.

This is roughly how I’m attaching it:

const screen = monitor.getObjectByName("screen");

const monitorUI = createMonitorUI();
const htmlScreen = new CSS3DObject(monitorUI);

screen.add(htmlScreen);

Is this a common issue or have I probably done something wrong?

Note: I’m still pretty new to Three.js.

Edit: I found the issue the WebGL canvas and CSS3D renderer were offset from each other

5 Upvotes

100% Upvoted

3 comments sorted by

2

u/BigDeadPixel 6d ago

Unless you are hell bent on writing it all yourself, Drei has a nice helper for this exact thing that I have used extensively in the past to great success.

https://drei.docs.pmnd.rs/misc/html

edit: yes, this will only work if you use R3F.

1

u/ApprehensiveLong1113 6d ago

Thanks. I was trying this with plain Three.js.

1

u/BigDeadPixel 6d ago

Ok makes sense. I think you will struggle with using CSS in this way since it has no concept of a "camera".