The text in the library is not displayed three.js

Questions
,
1

I’m trying to output the text. Here is the call of the object to which the text is attached :

 const earthGeometry1 =  new THREE.SphereGeometry( 0, 0, 0 );
            const earthMaterial1=0;
            earth1 = new THREE.Mesh( earthGeometry1, earthMaterial1 );
            scene.add( earth1 );

Then the text :

const earthDiv1 = document.createElement( 'div' );
            earthDiv1.className = 'label';
            earthDiv1.textContent = 'Earth';
            earthDiv1.style.backgroundColor = 'transparent';

            const earthLabel1 = new CSS2DObject( earthDiv );
            earthLabel1.position.set( 1.5 * EARTH_RADIUS, 0, 0 );
            earthLabel1.center.set( 0, 1 );
            earth1.add( earthLabel1 );
            earthLabel.layers.set( 0 );

            const earthMassDiv1 = document.createElement( 'div' );
            earthMassDiv1.className = 'label';
            earthMassDiv1.textContent = '5.97237e24 kg';
            earthMassDiv1.style.backgroundColor = 'transparent';

            const earthMassLabel1 = new CSS2DObject( earthMassDiv );
            earthMassLabel1.position.set( 1.5 * EARTH_RADIUS, 0, 0 );
            earthMassLabel1.center.set( 0, 0 );
            earth1.add( earthMassLabel1 );
            earthMassLabel1.layers.set( 1 );

Run all code here :

2

I’m sorry but I don’t get your problem, when I run the code in the stackoverflow you provided, everything seems to work as expected, the earth label is above the earth sphere, the moon label is above and rotating with the moon sphere, with there respective masses, even the Gui toggles are working as they should… What’s the problem or the expected behavior?

1 Like
3

I have created a separate label “earth1”. But alas, for some reason it is not displayed. And also no errors are displayed that I did wrong.

4

It’s easy to get confused when the variable names are too similar, here is what I found:

set

const earthLabel1 = new CSS2DObject(earthDiv);
const earthMassLabel1 = new CSS2DObject(earthMassDiv);

to

const earthLabel1 = new CSS2DObject(earthDiv1);
const earthMassLabel1 = new CSS2DObject(earthMassDiv1);

Also earth and earth1 labels are overlapping, so visually it will look like there is a single label, but if you check the source in the console you’ll see two labels.

1 Like