Fun with moving a camera in threejs

Every now and then I like to play around with threejs a little, it is a fun project to work with and life is short after all. One thing that is fun is working out expressions for handing the movement of a camera in a scene. So in this post I will be writing about some threejs examples that have to do with using the position and rotation properties along with expressions as a way to move a camera around in a scene.

1 - Basic threejs camera movement example that moves the camera via javaScript code

In this section I will be starting out with a basic threejs example that has to do with moving a camera. I pulled everything that has to do with moving the camera into a function to help keep things more fine grain with this kind of task, and for now it is a move camera method that is always looking at the origin of the scene.

1.1 - A move camera method

Here is the move camera method for this example. I made it so that I just have to pass a reference to the camera that I want to move, and then a percent value in the form of a value between zero. The percent value is what is used to set the position of the camera by making it so a radian value is set between 0 and PI2. This radians value is then used in additional expressions to find x y and z.

1
2
3
4
5
6
7
8
9
10
11
12
var moveCamera = function (camera, per) {
var rad = Math.PI * 2 * per,
x = Math.cos(rad) * 3,
y = -3 + 6 * (1 - Math.abs(per - 0.5) / 0.5),
z = Math.sin(rad) * 3;
// position property can be used to set
// the position of a camera
camera.position.set(x, y, z);
// the rotation property or the lookAt method
// can be used to set rotation
camera.lookAt(0, 0, 0);
};

1.2 - Create a camera

Now that I have a move camera method worked out I need to create a camera.

1
2
3
4
5
6
7
8
// CAMERA
var width = 360,
height = 180,
fieldOfView = 40,
aspectRatio = width / height,
near = 0.1,
far = 1000,
camera = new THREE.PerspectiveCamera(fieldOfView, aspectRatio, near, far);

1.3 The rest of the example

So then now I just need to work out the rest of the example when it comes to a scene, renderer, a mesh to look at, and a main app loop that makes use of the move camera method.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// SCENE
var scene = new THREE.Scene();
// RENDER
var renderer = new THREE.WebGLRenderer();
document.getElementById('demo').appendChild(renderer.domElement);
renderer.setSize(width, height);
// MESH
scene.add(new THREE.Mesh(
new THREE.BoxGeometry(1, 1, 1),
new THREE.MeshBasicMaterial({
color: 0xff0000,
wireframe: true
})));
// APP
var frame = 0,
frameMax = 100;
var loop = function () {
requestAnimationFrame(loop);
moveCamera(camera, frame / frameMax);
renderer.render(scene, camera);
frame += 1;
frame %= frameMax;
};
loop();