d3.js - threejs render text on or next to object

Question

How can I put a text next or in front of it or on its surface with three.js?

If I plot a object like a box, I'd like to give this object a visible name (so similar to tooltip, but always staying visible). Would be great if text size is adjusting to distance like object size.

const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

I'm using three.js with react-force-graph to render a diagram. Objects within it are rendered with three.js

https://threejs.org/docs/#api/en/geometries/BoxGeometry.parameters

question from:https://stackoverflow.com/questions/65953019/threejs-render-text-on-or-next-to-object

Answer 1

Two ways to draw text with three.js. First, create a div element, set its position (In your case, you need to write code to calculate the position relative to the canvas according to the position of camera and 3d object). Second, create a text texture.