THREE JS CSS2DRENDERER

by erlandazakaria

JavaScript

import * as THREE from "https://threejs.org/build/three.module.js";
import { CSS2DRenderer, CSS2DObject } from 'https://threejs.org/examples/jsm/renderers/CSS2DRenderer.js';
import { OrbitControls } from "https://threejs.org/examples/jsm/controls/OrbitControls.js";

var camera, scene, renderer, labelRenderer;

function init() {
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 1000 );
  camera.position.set( 0, 5, 20 );
  renderer = new THREE.WebGLRenderer();
  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );

  labelRenderer = new CSS2DRenderer();
  labelRenderer.setSize( window.innerWidth, window.innerHeight );
  labelRenderer.domElement.style.position = 'absolute';
  labelRenderer.domElement.style.top = '0px';
  document.body.appendChild( labelRenderer.domElement );
  var controls = new OrbitControls( camera, labelRenderer.domElement );
  camera.layers.enableAll();
}

function addLayer1() {
// box layer 1
var boxGeo1 = new THREE.BoxGeometry( 2,2,2 );
var boxMat1 = new THREE.MeshBasicMaterial({color: 'red'});
var box1 = new THREE.Mesh(boxGeo1, boxMat1);
box1.position.set(2, 0, 0)
scene.add(box1)
// box layer 2
var labelDiv1 = document.createElement( 'div' );
	labelDiv1.className = 'label';
	labelDiv1.textContent = 'This is Box 1';
	labelDiv1.style.marginTop = '-1em';
  labelDiv1.style.color = 'white';
var label1 = new CSS2DObject(labelDiv1)
label1.position.set( 0, 2, 0 );
box1.add( label1 );
box1.layers.set(0);
label1.layers.set(0);
}

function addLayer2() {
// box layer 2
var boxGeo2 = new THREE.BoxGeometry( 2,2,2 );
var boxMat2 = new THREE.MeshBasicMaterial({color: 'blue'});
var box2 = new THREE.Mesh(boxGeo2, boxMat2);
box2.position.set(-2, 0, 0)
scene.add(box2)
// label layer 2
var labelDiv2 = document.createElement( 'div' );
	labelDiv2.className = 'label';
	labelDiv2.textContent...