Graphics Reference
In-Depth Information
renderer = new THREE.WebGLRenderer();
renderer.setClearColor( 0xf0f0f0 );
renderer.setSize( 800, 600 );
renderer.autoClear = false;
container.appendChild(
renderer.domElement );
On
THREE.WebGLRenderer
, we set the
autoclear
property to
false
.
This means that the screen isn't automatically cleared before renderer
renders a scene.
7. The final step is to alter the render loop. We first want to render the 3D scene,
and without clearing the 3D-rendered output, render the overlay on the top:
function render() {
renderer.clear();
renderer.render( persScene,
persCamera );
renderer.clearDepth();
renderer.render( orthoScene,
orthoCamera );
}
The first thing we do in the render loop is clear the current output by calling
the
clear
function on the renderer. We need to do this, as we disabled
autoclear
on renderer. Now, we render the 3D scene, and before we
render the 2D overlay, we call the
clearDepth
function on the renderer.
This makes sure the 2D overlay is rendered completely on top and won't in-
tersect at places with the 3D scene. So finally, we render the 2D overlay by
passing in
orthoScene
and
orthoCamera
.
How it works...
How this recipe works is actually very simple. We can use the same renderer to
render multiple scenes with multiple different cameras in the same render loop.
This way, we can position various render results on top of each other. With a
THREE.OrthoGraphic
camera and
THREE.Sprite
, it is easy to position an object
