I am trying to rotate a group of objects using a pivot object from the center of the group. Assuming my group of objects are a bunch of car parts like chasis, body, wheels, engine each of which is a 3-D mesh.
Each mesh has a decal that I am adding using the following:
var geometry = new THREE.DecalGeometry(mesh,worldPosition,...);
var decal= new THREE.Mesh(geometry,material)
// Convert decal world transform to mesh local transform
decal.applyMatrix(new THREE.Matrix4().getInverse(mesh.matrixWorld)
mesh.add(decal)
To rotate the car around the center of its bounding box I first put all the meshes in a group object
var car = new THREE.Object3D();
for (var i=0; i < meshes.length; i++)
{
car.add(meshes[i])
}
then translate the car object and add it to pivot
car.position.set(carlength/2,carwidth/2,carheight/2);
var pivot = new THREE.Object3D();
pivot.add(car);
scene.add(pivot)
To rotate the objects I am applying rotation to pivot object on mouse movement using a similar logic
pivot.rotation.x+=1
pivot.rotation.y+=1
pivot.rotation.z+=1
Now here's the issue I am facing, the translation I applied to the car object is inherited by the meshes, but the decals stay in the same position. I am unable to understand what would have possibly gone wrong? Thanks