Three.js place an object in rotating camera's fov

Question

I have a fixed-position, perspective camera that rotates around all 3 axes via keyboard input. At random intervals, independent of user input, I need to place objects within the camera's field of view no matter what direction the camera is looking. The objects will also need to be offset specific x and y distances from the center of the camera's fov and offset a specific z distance from the camera's position. I cannot use camera.addChild because once the object is added I need to move the object via tweening independent of the camera's movements.

How can this be done?

WestLangley · Accepted Answer · 2014-11-13 19:08:07Z

3

You want to transform a point from camera space to world space.

In the camera's coordinate system, the camera is located at the origin, and is looking down its negative z-axis.

Place the object in front of the camera (in the camera's coordinate system).

object.position.set( x, y, - z ); // z is the distance in front of the camera, and is positive

Now, transform the object's position from camera space to world space:

object.position.applyMatrix4( camera.matrixWorld );

three.js r.69

answered Nov 13, 2014 at 19:08

WestLangley

105k11 gold badges288 silver badges285 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

atcComm Over a year ago

Thank you, WestLangley! This makes sense. I'll give it a try.

Collectives™ on Stack Overflow

Three.js place an object in rotating camera's fov

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related