Threejs Tooltip

Hi, I want Show ‘label’ in threejs (Tooltip)
This is my code.
create cube is OK.
create label is OK.
But, It is not visiable in screen.

Thank you and please help me.

    var geometry = new THREE.BoxGeometry( 1, 1, 1 );
    var material = new THREE.MeshBasicMaterial( {color: 0xff0000} );
    var cube = new THREE.Mesh( geometry, material );
    var cubeDiv = document.createElement( 'div' );
    cubeDiv.className = 'label';

    cubeDiv.textContent = "PC"; = '-1em'; = "white";
    var cubeLabel = new CSS2DObject( cubeDiv );
    cubeLabel.position.set( 0, 1, 0 );

    cube.add( cubeLabel );
    three.scene.add( cube );

Here is a live example with your code:

It seems InitTooltip() works fine.

Thank you for Reply.
It works well ! nice.

But, I have one more question to ask you.

I was resizing threejs screen like this. (not fullscreen)

width = canvas.clientWidth;
height = canvas.clientHeight;

if (canvas.width !== width ||canvas.height !== height) {
    three.renderer.setSize(width, height, false);

Then, How can i positioning UI label position?
incorrect positioning now.

You have to resize the instance of CSS2DRenderer as well. Meaning:

three.labelRenderer.setSize(width, height);

OK. I am done.
but Something’s wrong. :smiley:
I’ll try again thank you.

const canvas = three.renderer.domElement;
const width = canvas.clientWidth;
const height = canvas.clientHeight;

three.labelRenderer = new CSS2DRenderer();
three.labelRenderer.setSize(width, height); = 'absolute'; = '0px';

The official example might be helpful:

Hi, again.

is 'CSS2DRenderer ’ and ‘CSS2DObject’ are express only one line?

Or is it possible multiple lines?

like this…?

====== >Tooltip Info (Multiple lines)

Name : Apple
Color : Red


Thank you.

Sorry, I’m afraid I don’t understand what you mean. Any chances to show a picture of your intended result?

oh, I’m sorry that.

i made a tooltip with 'CSS2DRenderer ’ and ‘CSS2DObject’

like this.

but, I think It’s too long
then, i want to devide ‘Alphabet’ and ‘Number’ each line
(Input Enter at the end of the ‘Alpahbet’)

I want to the result is like this.

but, i failed input Enter line.
labeldiv.textContent = "ABCDEABCDEABCDE \r\n 123451234512345123451234512345";
is failed.
labeldiv.textContent = "ABCDEABCDEABCDE <br /> 123451234512345123451234512345";
is failed.

is it possible multi line?

thank you

Try innerHTML

labeldiv.innerHTML = "ABC<br/>123"


Oh my.
Thank you.
it works well thank you.

I am using “CSS2DRenderer ’ and ‘CSS2DObject” functions

Can I Make?

One “Object label” is follow camera move.
Another “Floor label” is not move, fix position.

I was try “Floor label” fix position.
but, It moves follow camera position and rotation.

like this,

Do you mean something like the buttons on the left in this demo

yes, like the button.
However, there is no need to have a button function.
just test label.

it’s just plain old css and html sitting over top of the canvas.
View the source to see how I do it dynamically.

Even the labels created for the CSS2DRenderer are just html and css sitting over the canvas.

Just an idea, what about use Point.project(camera), project the point to coordinate on canvas, and draw your label on DOM?

Thank you,
I will try them.

thank you
It should be helpful my project. Thank you.