Working with the Camera - Three.js - page 140

In this example, you can see that we've got a 3D rotating scene with a static 2D over-
lay on top of it.
How to do it...
Let's look at the steps you need to take:
1. Let's start with creating the 2D overlay. The overlay we use in this recipe is
the one with a fixed width and height (800 by 600). So, before we create the
cameras, let's first create the div variable that serves as container for the
rendered scene:
container = document.createElement(
'div' );
container.setAttribute(
"style","width:800px; height:600px");
document.body.appendChild( container );
2. Next, let's create the camera that we use to render the overlay. For this, we
require THREE.OrthographicCamera :
orthoCamera = new
THREE.OrthographicCamera(
WIDTH / - 2, WIDTH / 2, HEIGHT /
2, HEIGHT / - 2, - 500, 1000 );
orthoCamera.position.x = 0;
orthoCamera.position.y = 0;
orthoCamera.position.z = 0;
The WIDTH and HEIGHT properties are defined as constants with values
of 800 and 600. This code fragment creates and positions a standard
THREE.OrthographicCamera object.
3. For the 2D overlay, we create a separate scene where we put the 2D ele-
ments:
orthoScene = new THREE.Scene();