Camera for 3D - unsure of location

Using:

import * as THREE from 'three';
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);
camera.position.set(0, 2, 5);
const boxGeometry = new THREE.BoxGeometry();
const boxMaterial = new THREE.MeshBasicMaterial({color: 0x00FF00});
const box = new THREE.Mesh(boxGeometry, boxMaterial);
scene.add(box);
box.rotation.x = 5;
box.rotation.y = 5;
renderer.render(scene, camera);

results in https://snipboard.io/Apqucz.jpg.

I had assumed that changing

camera.position.set(0, 2, 5);

to

camera.position.set(0, 5, 0);

would give me view from the top. Instead, the screen is blank. How do I view the box from the top?

When changing the camera position in three.js to view an object from the top, you also need to adjust the camera’s orientation to ensure it’s looking down at the object. By default, the camera looks toward the negative z-axis. If you just move the camera above the object without changing its orientation, it will not be looking at the object, which can result in a blank screen since the object is not in the camera’s field of view.

To look at the box from the top, you can move the camera above the box and then orient it to look directly downward. You can do this by using the lookAt method provided by the THREE.Camera class, which will orient the camera to look at a specified point in space (in this case, the center of the box, which is at the origin if you haven’t moved it).

Here’s how you can modify your code:

camera.position.set(0, 5, 0); // Move the camera above the box at (0,5,0)
camera.lookAt(0, 0, 0); // Orient the camera to look at the origin (0,0,0), where the box is located

Full code with the adjustments:

import * as THREE from 'three';

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

// Helper to see the axes
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

// Move the camera above the box
camera.position.set(0, 5, 0);
// Orient the camera to look at the center of the scene (where the box is)
camera.lookAt(scene.position); 

const boxGeometry = new THREE.BoxGeometry();
const boxMaterial = new THREE.MeshBasicMaterial({ color: 0x00FF00 });
const box = new THREE.Mesh(boxGeometry, boxMaterial);
scene.add(box);

// Give the box some initial rotation (in radians)
box.rotation.x = Math.PI / 4; // rotating 45 degrees
box.rotation.y = Math.PI / 4;

// You may want to create an animation loop instead of a single render call
function animate() {
  requestAnimationFrame(animate);

  // Any continuous animation logic goes here
  // For example, to rotate the box during the render loop:
  // box.rotation.x += 0.01;
  // box.rotation.y += 0.01;

  renderer.render(scene, camera);
}

animate();

Notice that I changed the static renderer.render(scene, camera); call at the end to an animate function that will continuously render the scene. This is because any transformations applied to objects after the initial render will only be visible if the scene is re-rendered. The animate function will keep re-rendering the scene inside the animation frame loop, making it possible to observe changes in real-time, such as rotations or other animations.

Good luck.

Clear and concise! Thanks!

What defines the camera to look at negative z-axis? At what point on the z-axis?

In three.js, the default orientation for cameras is to look down the negative z-axis due to the right-hand rule, which is a convention in most 3D graphics environments. This is set when the camera is created and hasn’t been rotated or otherwise transformed.

The camera’s lookAt method doesn’t actually define a fixed point on the z-axis that it looks at; rather, it orients the camera so that its forward direction (-z in three.js for a PerspectiveCamera) points directly at the specified coordinates from its current position.

Here is how it works:

  1. Camera Position: When you set the camera’s position, you’re placing it at a point in the 3D space of your scene. In your example, camera.position.set(0, 5, 0) places the camera at 5 units above the origin along the y-axis.

  2. Looking Direction: The camera has a direction vector that defines where it’s looking. By default, this is along the negative z-axis. So if you don’t rotate the camera or use lookAt, it will look straight down the negative z-axis from wherever it’s positioned.

  3. lookAt Method: When you use camera.lookAt(x, y, z), you’re telling the camera to rotate such that its forward direction vector (-z) points directly at the point (x, y, z) in the 3D space. This doesn’t move the camera; it only changes its rotation. So, if your camera is positioned above the box and you want to look down at the top of the box, you would use camera.lookAt(box.position).

  4. At What Point on the Z-Axis: If you haven’t moved your camera or your object, camera.lookAt(0, 0, 0) would make the camera look at the origin of the scene, which is where the z-axis intersects the x and y axes (0,0,0). If your object (e.g., the box) is at the origin, this means the camera will be looking directly at your object.

To summarize, lookAt changes the camera’s rotation so it’s looking towards a specific point in space, regardless of its position. If you move the camera to (0, 5, 0) and then use lookAt(0, 0, 0), it will rotate to look straight down at the origin from above. If you placed an object at (0, 0, -10), you could use camera.lookAt(0, 0, -10) to look at that object instead, and the camera would rotate accordingly to face that point along the negative z-axis.

1 Like

Just to illustrate anon321’s descriptions.

  1. Camera Position: When you set the camera’s position, you’re placing it at a point in the 3D space of your scene. In your example, camera.position.set(0, 5, 0) places the camera at 5 units above the origin along the y-axis.

  1. lookAt Method: When you use camera.lookAt(x, y, z), you’re telling the camera to rotate such that its forward direction vector (-z) points directly at the point (x, y, z) in the 3D space. This doesn’t move the camera; it only changes its rotation. So, if your camera is positioned above the box and you want to look down at the top of the box, you would use camera.lookAt(box.position).

Hopefully that helps. (edit: should be -x not x-, but hopefully it is clear enough)

Just to confuse matters slightly. Anon321 talks about a world axis. In the case of the camera and lookAt, it is rotating on it’s local axis, rather than world axis. This is indicated in the images by the small blue, red and green lines with the white circle in the centre of the camera — the pivot.

Wow! Very interesting and useful information!!!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.