Graphics Reference
In-Depth Information
var projector = new THREE.Projector();
2. Next, we use this projector to project the position of the cube onto the cam-
era:
var vector = new THREE.Vector3();
projector.projectVector(
vector.setFromMatrixPosition(
object.matrixWorld ),
camera );
The
vector
variable will now contain the position of the object as it is seen
by the
camera
object.
3. When you project a vector, as we did in step two, the resulting
x
and
y
values
range from -1 to 1. So in this final step, we convert these values to the cur-
rent screen width and height:
var width = window.innerWidth;
var height = window.innerHeight;
var widthHalf = width / 2;
var heightHalf = height / 2;
vector.x = ( vector.x * widthHalf ) +
widthHalf;
vector.y = - ( vector.y * heightHalf )
+ heightHalf;
At this point, the
vector
variable will contain the screen coordinates of
the center of
object
. You can now use these coordinates with standard
JavaScript, HTML, and CSS to add effects.
How it works...
In this recipe, we use the same effect that Three.js uses to render the scene. When
you render a scene, the objects are projected onto a camera, which determines what
area needs to be rendered and where the objects appear. With the projector class,
