Parent container for multiple CSS3D objects

[ser1ze]

I’m working on a Three.js project (not using R3F) where I have a 3D drum-like object consisting of 8 slides. Each slide has a SLIDE_FRONT part where I place HTML content using CSS3DRenderer.

Currently, my implementation looks like this:

// Current approach - separate CSS3D object for each slide
slides.forEach((slide, index) => {
  const htmlElement = createHTMLContent();
  const css3dObject = new THREE.CSS3DObject(htmlElement);
  // Position relative to each SLIDE_FRONT
  slide.getWorldPosition(worldPos);
  slide.getWorldQuaternion(worldQuat);
  css3dObject.position.copy(worldPos);
  css3dObject.quaternion.copy(worldQuat);
});

Issues:

• Every frame, the CSS positions are recalculated for all 8 slides independently

• Each slide’s HTML content requires its own CSS3D object and transform calculations

• During rotation and interaction, all 8 CSS3D objects need to update their positions/rotations

Questions:

Is there a way to optimize this by:

1. Using a single parent container for all HTML content instead of separate CSS3D objects?

2. Reducing the number of transform calculations?

3. Or any other approach to improve performance while maintaining the same visual result?

P. S .The HTML content is correctly positioned and works, but I’m concerned about performance as each slide’s position is recalculated every frame. Looking for best practices or alternative approaches to handle multiple HTML elements in 3D space more efficiently.