Linking two objects in Three.js



In Three.js, is it possible to link two objects?

We are planning to convert our existing application to Three.js.
Previously we have used this library In that, we can draw a link between objects.

Is same thing possible in Three.js


I’m not sure if this is what you are looking for, but I have “linked” some objects together. E.g. a camera to a pivot, so that I can rotate the camera independently, but also around its pivot. That would look like this:

const camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 );

const pivot = new THREE.Object3D(); // Will be at scene origin by default
pivot.add(camera); // Add the camera object to the pivot object (parent-child relationship)

camera.position.set(0, 250, 500); // Place the camera at x: 0, y: 250, z: 500
camera.lookAt(pivot.position); // Point camera towards the pivot

Of course this would work with other objects as well

const cubeGeo = new THREE.BoxGeometry(5, 5, 5);
const cubeMat = new THREE.MeshBasicMaterial({ color: 0xff00ff });
const cube = new THREE.Mesh(cubeGeo, cubeMat);
cube.position.x = 5;  // Translate the cube to the right

const sphereGeo = new THREE.SphereGeometry(2.5, 12, 8);
const sphereMat = new THREE.MeshBasicMaterial({ color: 0x00ff00 }): 
const sphere = new THREE.Mesh(sphereGeo, sphereMat);
sphere.position.x = -5; // Offset the sphere to the left

sphere.add(cube); // Add  the "cube" object to the sphere (parent-child relationship)

scene.add(sphere); // Add the sphere (and its child) to the scene.

The code might not completely work, as it is from the top of my head. Hopefully that’s what you’re looking for!


Just a quick note - instead of

const pivot = new THREE.Object3D();


const pivot = new THREE.Group();

Group is basically a wrapper for Object3D but the syntax is clearer and as far as I know there are some optimisations performed by the renderer on group objects (perhaps someone else could chime in on this?) @mrdoob @Mugen87


Ah, yes, my apologies. It was an example!

I think I googled it some time ago and I believe @mrdoob or someone else on Github mentioned that THREE.Group() did not perform checks for material or geometry, but I am not sure anymore.


As far as i know there is now specific optimization logic for THREE.Group. As you said, it just provides a clearer syntax.


Good to know - thought I had heard it mentioned somewhere but I couldn’t find anything in the renderer code so thanks for clarifying!


I couldn’t find anything in the renderer code

Same here, but I did find the post I was thinking about, but I don’t know whether it still applies. I assume @mrdoob would know!


@imjasonmiller right, that is where I saw it.

From @mrdoob’s comment in that thread:

THREE.Group (which extends THREE.Object3D) is just a nicer API and it also hints the renderer to not look for geometries or materials inside.