Recently, after reading a discussion on stackoverflow, I decided to incorporate labels into my canvas. To achieve this, I created a second scene and camera to overlay the labels on top of the first scene.
this.sceneOrtho = new THREE.Scene();//for labels
this.scene = new THREE.Scene();// for Geometry
// Setting up camera for geometry
var SCREEN_WIDTH = window.innerWidth-5, SCREEN_HEIGHT = window.innerHeight-5;
var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20;
this.camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
var r = 4, phi = Math.PI/4, theta = Math.PI/4;
this.camera.position.set(r*Math.cos(phi)*Math.sin(theta),r*Math.sin(phi), r*Math.cos(phi)*Math.cos(theta));
this.camera.lookAt(new THREE.Vector3(0, 0, 0));
// Setting up camera for labels
this.cameraOrtho = new THREE.OrthographicCamera( VIEW_ANGLE, ASPECT, NEAR, FAR );
this.cameraOrtho.position.z = 10;
I proceeded by adding a THREE.Sprite object to the scene with sceneOrtho.add(spritey);. After that, I rendered the scenes as follows:
this.model.clearScene(this.scene);
this.model.populateScene(this.scene,this.sceneOrtho);//<--------
this.renderer.clear();
this.renderer.render(this.scene, this.camera);
this.renderer.clearDepth();
this.renderer.render( this.sceneOrtho, this.cameraOrtho );Despite these steps, only the geometries are visible, not the labels. You can view a live example here; click on the test button to see the issue.