ThreeJS: Rotate group of objects with decals around center using pivot object

1.2k Views Asked by At

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

0

There are 0 best solutions below