Updating CSS2DObject Position on Window Resize

When working with CSS2DObjects in Three.js, you need to update the CSS2DRenderer's size alongside the WebGLRenderer to ensure that your HTML elements remain properly aligned with your 3D scene after window resizing.

The Missing Piece

Your current resize event handler updates the camera and WebGLRenderer, but it's missing the update for the CSS2DRenderer. Here's how to fix it:

JAVASCRIPTCopied
// Assuming you've created your CSS2DRenderer like this:
const labelRenderer = new CSS2DRenderer();
labelRenderer.setSize(window.innerWidth, window.innerHeight);
labelRenderer.domElement.style.position = 'absolute';
labelRenderer.domElement.style.top = '0px';
document.body.appendChild(labelRenderer.domElement);

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

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

Why This Works

The CSS2DRenderer needs to know the new dimensions of the viewport to correctly position HTML elements in relation to your 3D objects. The setSize() method ensures that the renderer's internal calculations for projecting 3D positions to 2D screen coordinates are updated.

Additional Considerations

1. You don't need to update the position of your CSS2DObject (label_gate1) if it's attached to a specific point in your 3D scene. The renderer will handle the projection correctly as long as both renderers are properly sized.

2. Make sure you're rendering your CSS2D elements in your animation loop:

JAVASCRIPTCopied
function animate() {
  requestAnimationFrame(animate);
  
  // Update controls if you have any
  controls.update();
  
  // Render WebGL scene
  renderer.render(scene, camera);
  
  // Render CSS2D elements
  labelRenderer.render(scene, camera);
}

By ensuring both renderers are properly sized and rendered, your CSS2DObjects should maintain their correct positioning relative to your 3D objects when the window is resized.