0

I'm trying to get some 3D text to follow a moving cube. I want the text to appear flat on to the screen at all times as if moving in screen space (even though it will move on all axis). So it needs to be rotation corrected towards the camera as it moves. I'm trying to adapt the answer by meirm here (Converting 3D position to 2d screen position [r69!]) to do the positioning and its sort of working but my calculation at the end (*1000) is complete guess work (see function below). What should it be? And how do I tackle the rotation correction towards the camera?

function toScreenPosition(obj, camera)
{
var vector = new THREE.Vector3();

//var widthHalf = 0.5*renderer.context.canvas.width;
//var heightHalf = 0.5*renderer.context.canvas.height;

obj.updateMatrixWorld();
vector.setFromMatrixPosition(obj.matrixWorld);
vector.project(camera);

//vector.x = ( vector.x * widthHalf ) + widthHalf;
//vector.y = - ( vector.y * heightHalf ) + heightHalf;

//how should I be calculating position here?
vector.x = vector.x * 1000;
vector.y = - vector.y * 1000;

console.log(vector.x + 'px, ' + vector.y + 'px');

return { 
    x: vector.x,
    y: vector.y
};

}

My full working example is here: http://www.asquare.org/in-progress/webgldemo/rotation-test.html

Community
  • 1
  • 1
garrettlynchirl
  • 790
  • 8
  • 23

1 Answers1

0

You just need to set the lookAt of your obj, towards the camera:

obj.lookAt( camera.position );
TheWebDesignerPro
  • 91
  • 6