I'm trying to implement an orthographic camera overlay for a heads-up display on top of my main camera. I'm having trouble getting any text to show up, here's the code snippet:
function setupHUD()
{
var width = window.innerWidth;
var height = window.innerHeight;
cameraOrtho = new THREE.OrthographicCamera(-width/2, width/2, height/2, -height/2, -10, 10);
cameraOrtho.position.z = 10;
sceneHUD = new THREE.Scene();
var textGeometry = new THREE.TextGeometry("hello world", {size: 20});
var textMaterial = new THREE.MeshBasicMaterial({color: 0xff0000});
var textMesh = new THREE.Mesh(textGeometry, textMaterial);
sceneHUD.add(textMesh);
}
function render()
{
renderer.render(scene, camera);
renderer.render(sceneHUD, cameraOrtho);
}
function initialize()
{
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x0088FF, 1);
renderer.autoClear = false;
document.body.appendChild(renderer.domElement);
setupHUD();
camera.position.z += 5;
camera.position.y += 1;
...