CODEWITHSUNDEEP
javascriptthree.jscoordinate-transformation
user134055
user134055

Reputation:

three.js: transforming coordinates from camera space to scene space

I'm trying to place a cube relative to the camera, rather than relative to the scene. The thing is, to place it in the scene (which I have to do make it show), I have to know the scene coordinates that correspond to the cubes camera space coordinates. I found this function "projectionMatrixInverse" in THREE.Camera. It has a nice function called "multiplyVector3" which I hoped would enable me to transform a vector (1,1,1) back to scene space like this:

var camera, myvec, multvec; // (and others)
camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, - 2000, 1000 );
camera.position.x = 200;
camera.position.y = 100;
camera.position.z = 200;

myvec = new THREE.Vector3(1,1,1);
console.log("myvec: ", myvec);
multvec = camera.projectionMatrixInverse.multiplyVector3(THREE.Vector3(1,1,1));
console.log("multvec: ", multvec);

the thing is, on the console i get:

myvec: Object { x=1, y=1, z=1}
TypeError: v is undefined
var vx = v.x, vy = v.y, vz = v.z;

multiplyVector3 simply doesn't accept my myvec, or says it's undefined, even though the console says it's an object. I don't get it.

Upvotes: 2

Views: 4594

Answers (2)

WestLangley
WestLangley

Reputation: 104763

The camera is located at the origin of it's coordinate system, and looks down it's negative-Z axis. A point directly in front of the camera has camera coordinates of the form ( 0, 0, z ), where z is a negative number.

You convert a point p

p = new THREE.Vector3(); // create once and reuse if you can

p.set( x, y, z );

from camera coordinates to world coordinates like so:

p.applyMatrix4( camera.matrixWorld );

camera.matrixWorld is by default updated every frame, but if need be, you can update it yourself by calling camera.updateMatrixWorld();

three.js r.95

Upvotes: 4

mrdoob
mrdoob

Reputation: 19592

This may also be what you're after:

scene.add( camera );

brick.position.set( 0, 0, -1 );
camera.add( brick );

Upvotes: 3

Related Questions