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

**URL:** <https://discourse.threejs.org/t/css2dobject-label-divs-appear-once-in-console-but-appear-each-appear-twice-within-the-scene/33339>\
**Category:** Questions\
**Tags:** labels, css-renderer, css2dobject, css2drenderer\
**Created:** [January 6, 2022, 11:49am UTC](https://discourse.threejs.org/t/css2dobject-label-divs-appear-once-in-console-but-appear-each-appear-twice-within-the-scene/33339 "2022-01-06T11:49:52Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ian\_Shaw](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ian_shaw/32/23388_2.png) [@Ian\_Shaw](https://discourse.threejs.org/u/Ian_Shaw)\
**Post date:** [January 6, 2022, 11:49am UTC](https://discourse.threejs.org/t/css2dobject-label-divs-appear-once-in-console-but-appear-each-appear-twice-within-the-scene/33339/1 "2022-01-06T11:49:52Z")

</div>

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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/d/4da8dcb009fb6dde65cabc1c50d4e8480e323d71.png)

See full code in sandbox:

> **[THREE.js (forked) - CodeSandbox](https://codesandbox.io/s/three-js-forked-soeut?file=%2Fsrc%2Findex.js:15467-16358)**
>
> THREE.js (forked) by ianshaw93 using @createjs/tweenjs, detect-gpu, three, three-css2drender, three-css2drenderer, three-orbitcontrols, tweenjs

code snippet 1/2:

```javascript
  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:

```javascript
    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);
    }
  }

```

---

<div class="post-metadata">

**Author:** ![Ian\_Shaw](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ian_shaw/32/23388_2.png) [@Ian\_Shaw](https://discourse.threejs.org/u/Ian_Shaw)\
**Post date:** [January 18, 2022, 2:40pm UTC](https://discourse.threejs.org/t/css2dobject-label-divs-appear-once-in-console-but-appear-each-appear-twice-within-the-scene/33339/2 "2022-01-18T14:40:27Z")

</div>

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.

```javascript
    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);
```