Setting position doesn't seem to work with CSS2DObject inside a WebGLRender'ed world?

Questions
1

I have an object that is being rendered by a CSS2DRenderer that lives inside my canvas which is rendered by a WebGLRendererer. I can see the CSS2D label object in the world but no matter what I use for my XYZ position when I set its position, it always remains at 0,0,0 (see screnshhot). Why is this happening? All the objects rendered by the WebGLRenderer work fine.

    const textureLoader = new THREE.TextureLoader();

    const earthGeometry = new THREE.SphereBufferGeometry( EARTH_RADIUS, useSegments, useSegments );
    const earthMaterial = new THREE.MeshPhongMaterial( {
        specular: 0x333333,
        shininess: 5,
        map: textureLoader.load( '/javascripts/threejs/examples/textures/planets/earth_atmos_2048.jpg' ),
        specularMap: textureLoader.load( '/javascripts/threejs/examples/textures/planets/earth_specular_2048.jpg' ),
        normalMap: textureLoader.load( '/javascripts/threejs/examples/textures/planets/earth_normal_2048.jpg' ),
        normalScale: new THREE.Vector2( useScale, useScale )
    } );

    g_TheEarth = new THREE.Mesh( earthGeometry, earthMaterial );

    g_ThreeJsScene.add( g_TheEarth );

    g_TheEarthDiv = document.createElement( 'div' );
    g_TheEarthDiv.className = 'label';
    g_TheEarthDiv.textContent = 'Earth';
    g_TheEarthDiv.style.marginTop = '-1em';

    g_TheEarthLabel = new CSS2DObject( g_TheEarthDiv );

    g_TheEarthLabel.position.set( 0, 200, -10 ); // This has NO effect.

    g_TheEarth.add( g_TheEarthLabel );

    const labelRenderer = new CSS2DRenderer();
    labelRenderer.setSize( window.innerWidth, window.innerHeight );
    labelRenderer.domElement.style.position = 'absolute';
    labelRenderer.domElement.style.top = '0px';

image
image989×567 85.4 KB

2

This is how I inititate the CSS3D environment, maybe something is missing in your setup?:

		rendererCSS = new CSS3DRenderer();
		rendererCSS.setSize(innerWidth, innerHeight);
		container.appendChild(rendererCSS.domElement);


		// put the mainRenderer on top
		renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
		renderer.setClearColor(0x000000, 0);
		renderer.domElement.style.position = 'absolute';
		renderer.domElement.style.top = 0;
		renderer.domElement.style.zIndex = 1;
		renderer.setSize(innerWidth, innerHeight);
		//renderer.xr.enabled = true;
		rendererCSS.domElement.appendChild(renderer.domElement);
2 Likes