CSS2DObject Positioning Issue When Scrolling

Based on your code, I can see a few potential issues that might be causing your CSS2DObject tag to shift position when scrolling.

Main Issues

1. Position Parameter: In your code, you're setting the position to new THREE.Vector3(0, 0, 0) || position. The logical OR operator here means it will always use new THREE.Vector3(0, 0, 0) since that's not a falsy value.

2. Parent-Child Relationship: When you add the tag to the object with object.add(tag), the tag's position becomes relative to the object. This means you should use local coordinates, not world coordinates.

Solution

Here's how you can fix your code:

JAVASCRIPTCopied
let object = TE.scene.getObjectByName(channel.modelName);

if (object) {
  // Calculate bounding box
  const box = new THREE.Box3().setFromObject(object);
  const boxSize = box.getSize(new THREE.Vector3());
  
  // Since we're adding the tag as a child of the object,
  // we need to use local coordinates (relative to the object)
  const localPosition = new THREE.Vector3(0, boxSize.y / 2 + 0.1, 0.1);
  
  let tag = TE.createTag({
    html: channel.channelValues ? `<div class="tag-container">${channel.channelValues}</div>` : "关闭",
    className: "",
    position: localPosition,
  });
  
  object.add(tag);
}

Additional Considerations

1. CSS2DRenderer Update: Make sure you're updating the CSS2DRenderer in your animation loop:

JAVASCRIPTCopied
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
  css2DRenderer.render(scene, camera);
}

2. Renderer Resize: Ensure your CSS2DRenderer is being resized when the window resizes:

JAVASCRIPTCopied
window.addEventListener('resize', () => {
  // Update camera and WebGL renderer
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
  
  // Update CSS2DRenderer
  css2DRenderer.setSize(window.innerWidth, window.innerHeight);
});

3. Scroll Event Handling: If you're using a custom scroll implementation, make sure the CSS2DRenderer's DOM element is properly positioned and updated during scroll events.

By making these adjustments, your CSS2DObject tag should maintain its correct position relative to the 3D model, even when scrolling.