Yongs
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 );
}
Yongs
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.
You have to resize the instance of CSS2DRenderer as well. Meaning:
three.labelRenderer.setSize(width, height);
Yongs
5
OK. I am done.
but Something’s wrong. 
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);
Yongs
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.
Mugen87
8
Sorry, I’m afraid I don’t understand what you mean. Any chances to show a picture of your intended result?
Yongs
9
oh, I’m sorry that.
i made a tooltip with 'CSS2DRenderer ’ and ‘CSS2DObject’
like this.
example)
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"
2 Likes
Yongs
11
Oh my.
Thank you.
it works well thank you.
Yongs
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,
Yongs
14
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.
https://sbcode.net/view_source/annotations.html
Even the labels created for the CSS2DRenderer are just html and css sitting over the canvas.
Losses
16
Just an idea, what about use Point.project(camera), project the point to coordinate on canvas, and draw your label on DOM?
Yongs
17
Thank you,
I will try them.
Yongs
18
yes,
thank you
It should be helpful my project. Thank you.
