Linking two objects in Three.js

Questions
,
1

Hi,
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 https://gojs.net/latest/index.html. In that, we can draw a link between objects.

Is same thing possible in Three.js

2

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)
scene.add(pivot);

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!

3

Just a quick note - instead of

const pivot = new THREE.Object3D();

use

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

4

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.

5

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

1 Like
6

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

7

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!

8

@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.