CODEWITHSUNDEEP
javascripttextthree.jsorthographic
An0nx
An0nx

Reputation: 19

three.js orthographic camera text

I'm attempting to set up an orthographic camera on top of my regular camera to use as a heads up display. I can't seem to get any text to display, here is my code:

function createHUD() 
{
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 init()
{
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x0088FF, 1);
renderer.autoClear = false;
document.body.appendChild(renderer.domElement);
createHUD();
camera.position.z += 5;
camera.position.y += 1;
...

Upvotes: 1

Views: 1210

Answers (1)

raphaelRauwolf
raphaelRauwolf

Reputation: 324

Try to rotate the text 90° to the camera by using the lookAt function:

   var textMesh = new THREE.Mesh(textGeometry, textMaterial);
   textMesh.lookAt(cameraOrtho.position); // Rotate the mesh so the face is fully visible by the camera
   sceneHUD.add(textMesh);

Also the ortographic camera worked best for me when I did not change its position, maybe try different positions and rotations. You could also use orbit controls, so you can play with the values.

Upvotes: 2

Related Questions