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

here have simple example of object being loaded using mtlloader() , 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 = 0; < 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 anim() code, call action move children object loaded. these items moved in different directions.

var center = new three.vector3(0, 0, 0); var distancetomove = 0.1; if(params.explodeenabled)  { (var = 0; < model2.children.length; i++) {    model2.children[i].position.x =  explodevalue + outlinepass.explode * i;    model2.children[i].position.y = explodevalue + outlinepass.explode * - 0.02;    model2.children[i].position.z =  explodevalue + outlinepass.explode * + 0.06; } } 

but in example items move in same direction seen here. more info

you need move each part along different path center of object. save old position of each part, , calculate direction away center.

var explosioncenter = new three.vector3(0, 0, 0);  (var = 0; < 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 move away center depending on initial position. should use custom direction vectors of big components make sure not cover small ones:

if (i == <index of big component>) {     direction = new three.vector3(1, 1, 0); // custom direction component  }