Cannonjs - Change on body position&quaternion not affecting on child shapes

问题

I use cannonjs vs three.js . Ussually in three.js it is easy with 3dObject container. I added a lot of bodies and translate/rotate then in circle but now i wanna rotate them all together.

Any idea...

/* globals CANNON THREE GROUP1 GROUP2 GROUP3 app world scene */

/** From visual JS project */
function orbit(cx, cy, angle, p) {

  var s = Math.sin(angle);
  var c = Math.cos(angle);
  // translate point back to origin:
  p.x -= cx;
  p.y -= cy;
  // rotate point
  // eslint-disable-next-line no-undef
  xnew = p.x * c - p.y * s;
  // eslint-disable-next-line no-undef
  ynew = p.x * s + p.y * c;
  // translate point back:
  // eslint-disable-next-line no-undef
  p.x = xnew + cx;
  // eslint-disable-next-line no-undef
  p.y = ynew + cy;
  return p;

}


// eslint-disable-next-line no-unused-vars
function initWheelRoll(y) {

  var halfExtents = new CANNON.Vec3(1, 0.12, 0.23);
  var boxGeometry = new THREE.BoxGeometry(halfExtents.x*2,halfExtents.y*2,halfExtents.z*2);

  var boxBody = new CANNON.Body({
    mass: 5,
    collisionFilterGroup: GROUP2,
    collisionFilterMask: GROUP1 | GROUP3,
    position: new CANNON.Vec3(0,2,0),
    type: CANNON.Body.STATIC,
  });

  window.boxBody = boxBody;
  app.container.wheelShapes.push(boxBody);
  boxBody.T = 1;

  // Use the preStep callback to apply the gravity force on the moon.
  // This callback is evoked each timestep.
  boxBody.preStep = function() {

    boxBody.T += 1.5;
    boxBody.quaternion.setFromAxisAngle(new CANNON.Vec3(0,1,0), -boxBody.T * Math.PI / 360);
    // this.quaternion.setFromVectors(new CANNON.Vec3(1,1,0), new CANNON.Vec3(0,1,0));

  };

  world.addBody(boxBody);

  for(var i=0;i < 38;i++) {

    var help = { x: 3 , y: 3 , z: 0};
    // eslint-disable-next-line no-undef
    help = orbit(0, 0, i / 6.03  , help);
    var x = help.x;
    y = 6;
    var z = help.y;

    var boxShape = new CANNON.Box(halfExtents);
    var locRot = null;

    if (i == 0) {
      locRot = new CANNON.Quaternion(0,0,0,0);
      locRot.setFromAxisAngle(new CANNON.Vec3(0,1,0), -90 * Math.PI / 360);
    } else {
      var local = -i / 6 - 90 * Math.PI/360;
      locRot = new CANNON.Quaternion(0, 0, 0, 0);
      locRot.setFromAxisAngle(new CANNON.Vec3(0,1,0), local);
    }

    boxBody.addShape(boxShape,  new CANNON.Vec3(x, y, z), locRot);

    var m4 = new THREE.MeshBasicMaterial({color: "rgb(255," + i * 3 +",0)"});
    var boxMesh = new THREE.Mesh(boxGeometry, m4);
    boxMesh.position.set(x,y,z);
    boxMesh.castShadow = true;
    boxMesh.receiveShadow = true;
    scene.add(boxMesh);

    app.updater.wheelMeshes.push(boxMesh);

  }


}

UPDATED:

I get nice arrange (wheel) and after all i want them to rotate (spin) arround center of this 'wheel'.

    // Update wheel
    // eslint-disable-next-line no-redeclare
    for(var i = 0;i < app.container.wheelShapes[0].shapeOffsets.length;i++) {
      app.updater.wheelMeshes[i].position.copy(app.container.wheelShapes[0].shapeOffsets[i]);
      //app.container.wheelShapes[0].shapeOrientations
      app.updater.wheelMeshes[i].quaternion.copy(app.container.wheelShapes[0].shapeOrientations[i]);
    }

I update question with adding more shapes intro one body object. Again i don't get final rotation.

Looks like this line dont work well.

  boxBody.preStep = function() {

    boxBody.T += 1.5;
    boxBody.quaternion.setFromAxisAngle(new CANNON.Vec3(0,1,0), -boxBody.T * Math.PI / 360);
  };

来源：https://stackoverflow.com/questions/60758653/cannonjs-change-on-body-positionquaternion-not-affecting-on-child-shapes