javascript - three.js: transforming coordinates from camera space to scene space - Stack Overflow

admin管理员组

文章数量:1417271

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.

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.

• javascript
• three.js
• coordinate-transformation

Share Improve this question Follow edited Jun 13, 2017 at 13:46 asked Aug 26, 2012 at 13:38 user134055user134055 2

• You want to add a box in front of the camera? – mrdoob Commented Aug 26, 2012 at 14:30
• Yes. The point is to move a semi transparent brick around, following the camera. When the user has found the place he wants the brick to be, he left clicks, and the brick gets added too that spot In the scene space. A bit like minecraft actually, except in minecraft you don't see the brick you're about to add/destroy. I'll let the scroll wheel determine the bricks position in the front/back axis. – user134055 Commented Aug 26, 2012 at 20:38

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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

This may also be what you're after:

scene.add( camera );

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

本文标签： javascriptthreejs transforming coordinates from camera space to scene spaceStack Overflow