My objective is to create a simple HUD by overlaying a 2D scene on top of a 3D scene. However, in the example provided in this jsFiddle, only the perspective camera appears to render.
var camera, scene, renderer, geometry, material, mesh, sprite, rtcamera, rtscene, texture, spmaterial;
init();
update();
function init() {
var width = window.innerWidth - 80,
height = window.innerHeight - 80;
scene = new THREE.Scene();
rtscene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(50, width/height, 1, 10000);
camera.position.z = 500;
scene.add(camera);
rtcamera = new THREE.OrthographicCamera(-width/2, width/2, height/2, -height/2, 0.1, 1000);
geometry = new THREE.BoxGeometry(200, 200, 200);
material = new THREE.MeshNormalMaterial();
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
var texture = THREE.ImageUtils.loadTexture('../img/logo.png');
var spmaterial = new THREE.SpriteMaterial({
map: texture
});
sprite = new THREE.Sprite(spmaterial);
sprite.scale.set(50, 200, 1);
rtscene.add(sprite);
renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
renderer.autoClear = false;
document.body.appendChild(renderer.domElement);
}
function update() {
requestAnimationFrame(update);
render();
}
function render() {
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.02;
renderer.clear();
renderer.render(scene, camera);
renderer.clearDepth();
renderer.render(rtscene, rtcamera);
}
I am utilizing three.js r71 and WebGLRenderer. When I attempt to render a perspective scene on top of another perspective scene, both are visible.
Is there an important element that I might be overlooking?
Thank you in advance.