Merge pull request #437 from Soham1803/feat/quaternion_prop_to_propsT…

…oBody

feat: propsToBody component uses both quaternion and Euler angles to …

.changeset/chilly-mayflies-breathe.md

@@ -0,0 +1,5 @@
+---
+"@pmndrs/cannon-worker-api": minor
+---
+
+feat(props-to-body): support both quaternion and rotation props, prefer quaternion if both provided (@Soham1803)

packages/cannon-worker-api/src/body.ts

@@ -28,6 +28,9 @@ export type BodyProps<T extends any[] = unknown[]> = Partial<AtomicProps> &
     onCollide?: (e: CollideEvent) => void
     onCollideBegin?: (e: CollideBeginEvent) => void
     onCollideEnd?: (e: CollideEndEvent) => void
+    /**
+     * Quaternion is preferred over rotation if both are provided
+     */
     quaternion?: Quad
     rotation?: Triplet
     type?: 'Dynamic' | 'Static' | 'Kinematic'

packages/cannon-worker-api/src/props-to-body.js

@@ -49,6 +49,21 @@ function createShape(type, args) {
   }
 }
 
+/**
+ * @param {THREE.Quaternion} target
+ * @param {{ rotation?: THREE.Vector3Tuple quaternion?: THREE.Vector4Tuple }} props
+ * @returns {THREE.Quaternion}
+ */
+const setQuaternion = (target, { quaternion, rotation }) => {
+  if (quaternion) {
+    target.set(...quaternion)
+  } else if (rotation) {
+    target.setFromEuler(...rotation)
+  }
+
+  return target
+}
+
 /**
  * @function
  * @param {Object} options
@@ -70,7 +85,8 @@ export const propsToBody = (options) => {
     material,
     onCollide,
     position = [0, 0, 0],
-    rotation = [0, 0, 0],
+    rotation,
+    quaternion,
     shapes,
     type: bodyType,
     velocity = [0, 0, 0],
@@ -90,11 +106,11 @@ export const propsToBody = (options) => {
   }
 
   if (type === 'Compound') {
-    shapes.forEach(({ type, args, position, rotation, material, ...extra }) => {
+    shapes.forEach(({ type, args, position, rotation, quaternion, material, ...extra }) => {
       const shapeBody = body.addShape(
         createShape(type, args),
         position ? new Vec3(...position) : undefined,
-        rotation ? new Quaternion().setFromEuler(...rotation) : undefined,
+        setQuaternion(new Quaternion(0, 0, 0, 1), { quaternion, rotation }),
       )
       if (material) shapeBody.material = createMaterial(material)
       Object.assign(shapeBody, extra)
@@ -104,10 +120,11 @@ export const propsToBody = (options) => {
   }
 
   body.position.set(position[0], position[1], position[2])
-  body.quaternion.setFromEuler(rotation[0], rotation[1], rotation[2])
   body.velocity.set(velocity[0], velocity[1], velocity[2])
   body.angularVelocity.set(angularVelocity[0], angularVelocity[1], angularVelocity[2])
   body.linearFactor.set(linearFactor[0], linearFactor[1], linearFactor[2])
   body.angularFactor.set(angularFactor[0], angularFactor[1], angularFactor[2])
+  setQuaternion(body.quaternion, { quaternion, rotation })
+
   return body
 }