The Object3D Base Class in three.js

The Object3D base class in three.js is one of the most important classes to be aware of when making some kind of project involving three.js. It is in use in many objects in three.js including things like cameras, lights, and the the Meshes that are placed in a Scene. This base class adds a whole bunch of common properties, and methods for any kind of object in the project. Once you know a thing or two about Object3D the same methods will work with any and all objects that inherent from Object3D, which is a lot.

What to know before hand

This is not a getting started post on three.js, or javaScript in general. This post is on an advanced topic on three.js and I expect that you have some basic working knowledge of where there is to know before hand. As with any post on three.js the version number matters a lot, in this post I am using three.js r91.

Basic example of Object3d using the position property

Typically I do not work with the class directly, I work with something that inherits properties and methods from Object3d. Still if for some reason I want to work with the class directly I can do so via the THREE.Object3d constructor.

1
2
3
4
5
6
7
8
9
10
// Object 3d position
var obj3d = new THREE.Object3D();
// {"x":0,"y":0,"z":0}
console.log(JSON.stringify(obj3d.position));
obj3d.position.set(3, 4, 5);
// {"x":3,"y":4,"z":5}
console.log(JSON.stringify(obj3d.position));

Here I made just a simple example where I am just playing with the position property, which is an instance of Vector3. This can be used to set the center point of the object in a Scene. In the case that the Object is a child of another object it would be the position relative to the parent Object.

Rotation of an Object

Another property of the Object3D base class that I use often is the rotation property. This property expects an instance of the Euler Class, Which is the Class used in three.js that has anything to do with a set of Euler Angles.

1
2
3
4
5
6
7
8
9
10
// creating an instance of Object3D
var obj = new THREE.Object3D();
//{"_x":0,"_y":0,"_z":0,"_order":"XYZ"}
console.log(JSON.stringify(obj.rotation));
obj.rotation.set(0, 0, Math.PI * 1.75);
// {"_x":0,"_y":0,"_z":5.497787143782138,"_order":"XYZ"}
console.log(JSON.stringify(obj.rotation));

I will not get into the Euler Class in detail here, but it is similar to Vector3 only when using the set method you want to give radians rather than, and x,y,z position.

Examples of use in other constructors

There are many objects in three.js that inherit from object3D, which is why this is a good class to have a solid understanding of.

Camera’s such as the perspective camera inherit from Object3D

1
2
3
4
// Camera
var camera = new THREE.PerspectiveCamera(45, 4 / 3, .5, 100);
// changing position of a camera
camera.position.set(3, 1, 3);

So does something made with a mesh

1
2
3
4
5
6
7
var low = new THREE.Mesh(
new THREE.BoxGeometry(1, 1, 1),
new THREE.MeshStandardMaterial({
emissive: 0x002a00
}));
// changing position of a mesh
low.position.y = -1;

Full demo of Object3D

I try to make it a habit to have at least one copy and past working demo of what it is that I am writing about in each blog post of mine. In this demo i am making use of an instance of Object3D to group some cubes together. I am also working with many other objects that inherit from Object3D, using the position, and rotation properties often.

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
(function () {
// Scene
var scene = new THREE.Scene();
// Camera
var camera = new THREE.PerspectiveCamera(45, 4 / 3, .5, 100);
camera.position.set(3, 1, 3);
// Orbit Controls
var controls = new THREE.OrbitControls(camera);
camera.lookAt(0, - .5, 0);
// creating an instance of Object3D
var obj = new THREE.Object3D();
// a mesh that inherits from Object3D
var low = new THREE.Mesh(
new THREE.BoxGeometry(1, 1, 1),
new THREE.MeshStandardMaterial({
emissive: 0x002a00
}));
low.position.y = -1;
obj.add(low);
var high = new THREE.Mesh(
new THREE.BoxGeometry(1, 1, 1),
new THREE.MeshStandardMaterial({
emissive: 0x00002a
}));
high.rotation.set(0, 1, 0);
obj.add(high);
scene.add(obj);
// Render
var renderer = new THREE.WebGLRenderer();
renderer.setSize(320, 240);
document.getElementById('demo').appendChild(renderer.domElement);
// loop
var frame = 0,
maxFrame = 100;
var loop = function () {
var per = frame / maxFrame,
bias = Math.abs(.5 - per) / .5;
requestAnimationFrame(loop);
renderer.render(scene, camera);
high.rotation.set(0, Math.PI * 2 * per, 0);
low.rotation.set(0, -Math.PI * 2 * per, 0);
obj.position.set(0, -1 + 2 * bias, 0);
frame += 1;
frame = frame % maxFrame;
};
renderer.render(scene, camera);
loop();
}
());

It may be true that Object3D by itself is not intended to be used from grouping as there is a separate constructor for that, called simply enough Group. Still Object3D by itself seems to work okay be itself good enough for this simple demo on Object3D.

Conclusion

From here you might choose to make some more demos that have to do with exercising the use of working with objects in three.js. If you enjoyed this post you might also like to check out my many other posts on the subject.