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 = newTHREE.Scene();
var sceneCSS = newTHREE.Scene();

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

var renderer = newTHREE.WebGLRenderer();
var rendererCSS = newTHREE.CSS3DRenderer();

var camera = newTHREE.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);
}