CSS2DObject label divs appear once in console but appear each appear twice within the scene?

Questions
, , ,
1

Hi all I am having an issue in my 3D scene where the css2drenderer labels are being shown in the correct position in front of the camera (next to appropriate 3d spheres see left of screenshot); but the labels are rendered for a second time in the wrong position behind the original camera starting position (next to ‘thin air’ see right handside of screenshot). Does anyone know how to show the labels only once, thanks?

image
image785×383 5.32 KB

See full code in sandbox:

code snippet 1/2:

  const canvas = document.getElementById("myCanvasId");
  var container = document.getElementById("universeCanvasDiv");

  const renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true }); //  not sure if antialias (smoothes out sides of 3d objects) is working
  renderer.setSize(canvas.clientWidth, canvas.clientHeight);
  renderer.shadowMap.enabled = true;
  renderer.shadowMap.type = THREE.PCFSoftShadowMap;

  const labelRenderer = new THREE.CSS2DRenderer();
  labelRenderer.setSize(canvas.clientWidth, canvas.clientHeight); //perhaps move into grid??
  labelRenderer.domElement.style.position = "absolute";
  labelRenderer.domElement.style.top = 0;
  container.appendChild(labelRenderer.domElement);

code snippet 2/2:

    var nameDiv = document.createElement("div");
    nameDiv.className = "emotionLabel";
    nameDiv.innerHTML = labelText;
    nameDiv.style.marginTop = "-1em";
    const nameLabel = new THREE.CSS2DObject(nameDiv);
    return nameLabel;
  }

  let stars = new THREE.Group();

  function createSpheres() {
    for (let i = 0; i < mapSphere_x.length; i++) {
      let sphere = new THREE.Mesh(
        new THREE.SphereBufferGeometry(sphereRadius, 32, 32), //buffer geometry appears to be less intensive
        new THREE.MeshPhongMaterial({ color: 0xff00ff })
      );
      sphere.position.set(mapSphere_x[i], mapSphere_y[i], 0); // initial 2D location
      var nameLabel = createTextLabel(sphere, i);
      if (i % 5 == 0) {
        sphere.add(nameLabel);
        sphere.material.color.set(0xff00);
      }

      stars.add(sphere);
    }
  }
2

I fixed the issue, in the end the far setting for the perspective camera was negative and making it positive removed the second rendering of the labels.

    let canvasHeight = canvas.clientHeight;
    // <!-- perspective camera -->
    const fov = 1000;
    const aspect = canvasWidth/canvasHeight;  // 1/1 if width clipped
    const near = 0.1;
    const far = 5; // change from -0.2
    const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);