How to perform child displacement on 3D object, Three.js? - three.js

Question

Here I have a simple example of an object being loaded using MTLLoader() and OBJLoader() in Three.js
var loader = new THREE.MTLLoader();
loader.load(<?php echo "'".$mPart."'"; ?>, function (materials) {
materials.preload();
var objLoaderOfficeChair = new THREE.OBJLoader();
objLoaderOfficeChair.setMaterials(materials);
objLoaderOfficeChair.load(<?php echo "'".$oPart."'"; ?>, function (object) {
object.traverse( function ( child ) {
if ( child instanceof THREE.Mesh ){
x=document.getElementsByClassName("popup");
for(var i = 0; i < x.length; i++){
x[i].innerHTML += "<li class='mi_child'>"+child.name+"</li>";
var timer = performance.now();
geometry = child.geometry;
geometry.dynamic = true;
material = child.material;
mesh = new THREE.Mesh(geometry, material);
model = object.children[i].geometry;
model2 = object;
scene.add(mesh);
}
Now later in the anim() code, I call another action which will move the children the object loaded. Now I would like these items to be moved in all different directions.
var center = new THREE.Vector3(0, 0, 0);
var distanceToMove = 0.1;
if(params.explodeEnabled) {
for (var i = 0; i < model2.children.length; i++) {
model2.children[i].position.x = explodeValue + outlinePass.Explode * i;
model2.children[i].position.y = explodeValue + outlinePass.Explode * i - 0.02;
model2.children[i].position.z = explodeValue + outlinePass.Explode * i + 0.06;
}
}
But in this example all the items move together in the same direction as seen here.
More Info

Answer 1

You need to move each part along a different path from the center of the object. Save the old position of each part, and calculate its direction away from the center.
var explosionCenter = new THREE.Vector3(0, 0, 0);
for (var i = 0; i < model2.children.length; i++) {
var child = model2.children[i];
if (!child.geometry.boundingSphere) child.computeBoundingSphere();
child.oldPosition = child.oldPosition || geometry.boundingSphere.center.clone();
var direction = child.oldPosition.clone().sub(explosionCenter).normalize();
child.position.x = child.oldPosition.x + explodeValue + outlinePass.Explode * direction.x;
child.position.y = child.oldPosition.y + explodeValue + outlinePass.Explode * direction.y;
child.position.z = child.oldPosition.z + explodeValue + outlinePass.Explode * direction.z;
}
This way, each component will move away from the center depending on its initial position. You should use custom direction vectors for some of the big components to make sure they do not cover the small ones:
if (i == <index of big component>) {
direction = new THREE.Vector3(1, 1, 0); // Custom direction for a component
}