How to linke objects and move them relatively in three js? - three.js

Question

I created kind of mannequin with three.js.
I want to make it possible to:
link all objects with connection child-parent
move objects relatively (if hand moved, than elbow whould be moved, but if wrist moved, than other parts should not be moved)
I wrote code below and made jsfiddle example. Not sure whether it is correct way.
var scene, camera, renderer, pivot;
//main
init();
animate();
//init
function init() {
//scene
scene = new THREE.Scene();
scene.background = new THREE.Color(0xf0f0f0);
//camera
camera = new THREE.PerspectiveCamera(140, window.innerWidth / window.innerHeight, 0.1, 10000);
//neck
var geometry = new THREE.BoxBufferGeometry(2, 3, 1);
var material = new THREE.MeshNormalMaterial({
transparent: true,
opacity: 0.5
});
var figure = new THREE.Mesh(geometry, material);
figure.position.set(0, 1.5, 0);
//body
var geometry2 = new THREE.BoxBufferGeometry(0.5, 0.5, 0.5);
/* geometry2.rotateZ(THREE.Math.degToRad(90)); // ROTATE GEOMETRY SO IT'S IN THE CORRECT ORIENTATION */
var figure2 = new THREE.Mesh(geometry2, material);
figure2.position.set(0, 1.5, 0); // MOVE THE GEOMOETRY UP BY HALF SO PIVOT IS AT THE BOTTOM OF THE GEO
/* figure2.rotation.set(0, 0, Math.PI / 2); */
figure.add(figure2);
//head
var geometry3 = new THREE.SphereGeometry(0.75, 32, 32);
var material3 = new THREE.MeshBasicMaterial({
color: 0xffff00
});
var sphere3 = new THREE.Mesh(geometry3, material3);
sphere3.position.set(0, 2.5, 0);
figure.add(sphere3)
//right shoulder
var geometry4 = new THREE.SphereGeometry(0.25, 32, 32);
var material4 = new THREE.MeshBasicMaterial({
color: 0xffff00
});
var sphere4 = new THREE.Mesh(geometry4, material4);
sphere4.position.set(1.25, 1.25, 0);
figure.add(sphere4)
//right hand top
var geometry5 = new THREE.BoxBufferGeometry(0.5, 1.5, 0.5);
var figure5 = new THREE.Mesh(geometry5, material);
figure5.position.set(1.25, 0.25, 0);
figure.add(figure5);
//right elbow
var geometry6 = new THREE.SphereGeometry(0.25, 32, 32);
var sphere6 = new THREE.Mesh(geometry6, material3);
sphere6.position.set(1.25, -0.75, 0);
figure.add(sphere6)
//right hand bottom
var geometry7 = new THREE.BoxBufferGeometry(0.5, 1.5, 0.5);
var figure7 = new THREE.Mesh(geometry7, material);
figure7.position.set(1.25, -1.75, 0);
figure.add(figure7);
//right hand bottom sphere
var geometry8 = new THREE.SphereGeometry(0.25, 32, 32);
var sphere8 = new THREE.Mesh(geometry8, material3);
sphere8.position.set(1.25, -2.75, 0);
figure.add(sphere8);
//right wrist
var geometry9 = new THREE.BoxBufferGeometry(0.5, 0.5, 0.5);
var figure9 = new THREE.Mesh(geometry9, material);
figure9.position.set(1.25, -3.25, 0);
figure.add(figure9);
//left shoulder
var geometry10 = new THREE.SphereGeometry(0.25, 32, 32);
var sphere10 = new THREE.Mesh(geometry10, material4);
sphere10.position.set(-1.25, 1.25, 0);
figure.add(sphere10)
//left hand top
var geometry11 = new THREE.BoxBufferGeometry(0.5, 1.5, 0.5);
var figure11 = new THREE.Mesh(geometry11, material);
figure11.position.set(-1.25, 0.25, 0);
figure.add(figure11);
//left elbow
var geometry12 = new THREE.SphereGeometry(0.25, 32, 32);
var sphere12 = new THREE.Mesh(geometry12, material3);
sphere12.position.set(-1.25, -0.75, 0);
figure.add(sphere12)
//left hand bottom
var geometry13 = new THREE.BoxBufferGeometry(0.5, 1.5, 0.5);
var figure13 = new THREE.Mesh(geometry13, material);
figure13.position.set(-1.25, -1.75, 0);
figure.add(figure13);
//left hand bottom sphere
var geometry14 = new THREE.SphereGeometry(0.25, 32, 32);
var sphere14 = new THREE.Mesh(geometry14, material3);
sphere14.position.set(-1.25, -2.75, 0);
figure.add(sphere14);
//left wrist
var geometry15 = new THREE.BoxBufferGeometry(0.5, 0.5, 0.5);
var figure15 = new THREE.Mesh(geometry15, material);
figure15.position.set(-1.25, -3.25, 0);
figure.add(figure15);
//left hip
var geometry16 = new THREE.SphereGeometry(0.5, 32, 32);
var sphere16 = new THREE.Mesh(geometry16, material3);
sphere16.position.set(-0.5, -2.25, 0);
figure.add(sphere16);
//left haunch
var geometry17 = new THREE.BoxBufferGeometry(1, 1.75, 1);
var figure17 = new THREE.Mesh(geometry17, material);
figure17.position.set(-0.5, -3.65, 0);
figure.add(figure17);
//left knee
var geometry18 = new THREE.SphereGeometry(0.5, 32, 32);
var sphere18 = new THREE.Mesh(geometry18, material3);
sphere18.position.set(-0.5, -5, 0);
figure.add(sphere18);
//left shin
var geometry19 = new THREE.BoxBufferGeometry(1, 1.75, 1);
var figure19 = new THREE.Mesh(geometry19, material);
figure19.position.set(-0.5, -6.35, 0);
figure.add(figure19);
//left ankle
var geometry20 = new THREE.SphereGeometry(0.25, 32, 32);
var sphere20 = new THREE.Mesh(geometry20, material3);
sphere20.position.set(-0.5, -7.5, 0);
figure.add(sphere20);
//left foot
var geometry21 = new THREE.BoxBufferGeometry(1, 0.25, 1.5);
var figure21 = new THREE.Mesh(geometry21, material);
figure21.position.set(-0.5, -7.85, 0.25);
figure.add(figure21);
//right hip
var geometry22 = new THREE.SphereGeometry(0.5, 32, 32);
var sphere22 = new THREE.Mesh(geometry22, material3);
sphere22.position.set(0.5, -2.25, 0);
figure.add(sphere22);
//right haunch
var geometry23 = new THREE.BoxBufferGeometry(1, 1.75, 1);
var figure23 = new THREE.Mesh(geometry23, material);
figure23.position.set(0.5, -3.65, 0);
figure.add(figure23);
//right knee
var geometry24 = new THREE.SphereGeometry(0.5, 32, 32);
var sphere24 = new THREE.Mesh(geometry24, material3);
sphere24.position.set(0.5, -5, 0);
figure.add(sphere24);
//right shin
var geometry25 = new THREE.BoxBufferGeometry(1, 1.75, 1);
var figure25 = new THREE.Mesh(geometry25, material);
figure25.position.set(0.5, -6.35, 0);
figure.add(figure25);
//right ankle
var geometry26 = new THREE.SphereGeometry(0.25, 32, 32);
var sphere26 = new THREE.Mesh(geometry26, material3);
sphere26.position.set(0.5, -7.5, 0);
figure.add(sphere26);
//right foot
var geometry27 = new THREE.BoxBufferGeometry(1, 0.25, 1.5);
var figure27 = new THREE.Mesh(geometry27, material);
figure27.position.set(0.5, -7.85, 0.25);
figure.add(figure27);
//add figure
scene.add(figure);
scene.add(new THREE.AxesHelper());
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
//add grid
/* scene.add(new THREE.GridHelper(10, 20)) */
camera.position.z = 5;
//top view on object
/* camera.position.set(0, 10, 0);
camera.up.set(0, 0, -1);
camera.lookAt(0, 0, 0); */
//controls to rotate camera
controls2 = new THREE.OrbitControls(camera, renderer.domElement);
controls2.minPolarAngle = Math.PI/2;
controls2.maxPolarAngle = Math.PI/2;
//controls to drag object in 3d
/* var cubePoints = [];
cubePoints.push(figure2);
var controls = new THREE.DragControls(cubePoints, camera, renderer.domElement); */
}
//animate
function animate() {
requestAnimationFrame(animate);
render();
};
//render
function render() {
renderer.render(scene, camera);
};

Answer 1

To link meshes in Three.js I usually use groups (see https://threejs.org/docs/#api/en/objects/Group), I also use them to change the pivot point of a mesh by placing the mesh in a group with the wanted pivot point in the center coordinates of the group.
Of course you can nest groups for your case, like a group with the hand mesh which can be inside another group with the forearm mesh and so on.
In order to move the elbow position according to the hand position (if I get what you say right), you should use Inverse Kinematics, there are implementations for Three.js like https://github.com/jsantell/THREE.IK but I never used it so I can't tell you more about it.
Hope you solve your problem.