Window resize > adjust pos of text CSS2DObject

Questions
1

Hi,

Three.js 3D part of course rescales with:

window.addEventListener("resize", function () {
  // Update camera aspect ratio
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();

  // Resize the renderer
  renderer.setSize(window.innerWidth, window.innerHeight);
});

How do I achieve this for text object, as for now it is still with browser rescaling, thus moves away from the spot its supposed to be.

const mainText = document.createElement('span');
mainText.textContent = 'Gate 1';
labelDiv1.appendChild(mainText);

const additionalText = document.createElement('p');
additionalText.textContent = 'Test';
labelDiv1.appendChild(additionalText);

// Create CSS2DObject for Gate 1
const label_gate1 = new CSS2DObject(labelDiv1);
label_gate1.position.set(-8.2, -0.4, 1.05); // update this when browser scale is adjusted?
label_gate1.center.set(0, 1);
scene.add(label_gate1);
label_gate1.layers.set(0);
1 Like
2

Since CSS2DRenderer is a separate renderer, you also have to call setSize on it - example. No need to do any calculations manually besides that.

2 Likes
3

Hi,
I also had this issue recently actually.

if you haven’t you need to set up a separate CSS2DRenderer instance. like so:

const twoDEleRenderer = new CSS2DRenderer();

twoDEleRenderer.setSize(window.innerWidth, window.innerHeight);
twoDEleRenderer.domElement.style.position = "absolute";
twoDEleRenderer.domElement.style.top = "0px";
twoDEleRenderer.domElement.style.left = "0px";
twoDEleRenderer.domElement.style.pointerEvents = "none";
canvas.parentElement.appendChild(twoDEleRenderer.domElement); // in the DOM

and then just like you’re doing with your webgl renderer in your window resize cb, you need to add your CSS2DRenderer logic.
like this:

window.addEventListener("resize", () => {
  // Update sizes
  sizes.width = window.innerWidth;
  sizes.height = window.innerHeight;

  // Update camera
  camera.aspect = sizes.width / sizes.height;
  camera.updateProjectionMatrix();

  // Update renderers
  renderer.setSize(sizes.width, sizes.height);
 // noticed this helps too with normal renderer
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
  twoDEleRenderer.setSize(sizes.width, sizes.height);
});

hopefully this helps you out or puts you down the right path.

1 Like