Threejs Tooltip

Questions
, ,
1

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.

InitTooltip(){
    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";
    cubeDiv.style.marginTop = '-1em';
    cubeDiv.style.color = "white";
    var cubeLabel = new CSS2DObject( cubeDiv );
    cubeLabel.position.set( 0, 1, 0 );

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

pic
pic1675×837 3.02 KB

pic2
pic2896×593 26 KB

2

Here is a live example with your code: https://jsfiddle.net/ok6nfdtq/

It seems InitTooltip() works fine.

3

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.

4

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

three.labelRenderer.setSize(width, height);
5

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);
three.labelRenderer.domElement.style.position = 'absolute';
three.labelRenderer.domElement.style.top = '0px';
document.body.appendChild(three.labelRenderer.domElement);

pic3
pic31411×809 1.74 KB

6

The official example might be helpful: https://threejs.org/examples/css2d_label

7

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.

8

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

9

oh, I’m sorry that.

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

like this.

example)
0904_0
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.
그림1

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

10

Try innerHTML

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

image
image934×636 143 KB

2 Likes
11

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

12

Hi,
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,

0909_0
0909_02013×1138 140 KB

13

Do you mean something like the buttons on the left in this demo
https://sbcode.net/threejs/annotations/

14

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

15

it’s just plain old css and html sitting over top of the canvas.
View the source to see how I do it dynamically.
https://sbcode.net/view_source/annotations.html

image
image498×630 44.4 KB

image
image888×368 103 KB

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

image
image1589×498 228 KB

16

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

17

Thank you,
I will try them.

18

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