Graphics Reference
In-Depth Information
This creates
THREE.OrthographicCamera
, which is configured with some
default values.
2. The next step is to define the boundaries for this camera:
camera.left = window.innerWidth / -2;
camera.right = window.innerWidth / 2;
camera.top = window.innerHeight / 2;
camera.bottom = window.innerHeight / -
2;
This defines the area that is rendered by this camera. In the
There's moreā¦
section of this recipe, we'll explain how this works.
3. Finally, we have to set the
near
and
far
properties of the camera. These
properties define which distance from the camera is rendered:
camera.near = 0.1;
camera.far = 1500;
4. When we don't pass in the arguments in the constructor, we have to inform
Three.js that we changed the camera's parameter. For this, we have to add
the following line:
camera.updateProjectionMatrix();
5. The final step is to position and align the camera:
camera.position.x = -500;
camera.position.y = 200;
camera.position.z = 300;
camera.lookAt(scene.position);
6. Now, we can just use this camera like any other camera and render a scene
like this:
renderer.render(scene, camera);