Transform HTML Elements In Conjunction With OrbitControls So That They Appear To Rotate With The Objects In The Scene

I have created a Three.js scene in which there is a globe (with an Earth texture) that can be rotated using OrbitControls. I want to have labels that are 'stuck' to a position on t

Solution 1:

Three.js has a converter that applies 3D transformations to your HTML elements. It's called CSS3DRenderer. You can see an example of it in action here.

It would save you a lot of time to use this tool instead of manually trying to figure out the positions/rotations of each element:

var scene = new THREE.Scene();
var sceneCSS = new THREE.Scene();

// Adding new CSS3DObjects to your scene:
var object = new THREE.CSS3DObject( HTMLElement );
sceneCSS.add(object);

var renderer = new THREE.WebGLRenderer();
var rendererCSS = new THREE.CSS3DRenderer();

var camera = new THREE.PerspectiveCamera();

onUpdate() {
    // This will render your WebGL 3D Scene
    renderer.render(scene, camera);

    // This will apply 3DTransforms to your HTML elements
    rendererCSS.render(sceneCSS, camera);
}