@react-three/rapier 0.6.1 → 0.6.2

package/dist/declarations/src/InstancedRigidBodies.d.ts

@@ -5,6 +5,7 @@ import { Vector3Array } from "./types";
 interface InstancedRigidBodiesProps extends Omit<RigidBodyProps, "position" | "rotation" | "onCollisionEnter" | "onCollisionExit"> {
     positions?: Vector3Array[];
     rotations?: Vector3Array[];
+    scales?: Vector3Array[];
 }
 export declare const InstancedRigidBodies: React.ForwardRefExoticComponent<InstancedRigidBodiesProps & React.RefAttributes<InstancedRigidBodyApi>>;
 export {};

package/dist/declarations/src/Physics.d.ts

@@ -10,7 +10,8 @@ export interface RapierContext {
     rigidBodyStates: Map<RigidBodyHandle, {
         mesh: Object3D;
         isSleeping: boolean;
-        setMatrix: (mat: Matrix4) => void;
+        setMatrix(mat: Matrix4): void;
+        getMatrix(): Matrix4;
         worldScale: Vector3;
         invertedMatrixWorld: Matrix4;
     }>;

package/dist/declarations/src/utils.d.ts

@@ -1,11 +1,7 @@
 import { Collider, ColliderDesc, RigidBody, RigidBodyDesc, Vector3 as RapierVector3, Quaternion as RapierQuaternion } from "@dimforge/rapier3d-compat";
 import { BufferGeometry, Matrix4, Object3D, Quaternion, Vector3 } from "three";
 import { RigidBodyApi, RigidBodyAutoCollider, RigidBodyShape, RigidBodyTypeString, UseColliderOptions, UseRigidBodyOptions, Vector3Array, WorldApi } from "./types";
-export declare const vectorArrayToObject: (arr: Vector3Array) => {
-    x: number;
-    y: number;
-    z: number;
-};
+export declare const vectorArrayToVector3: (arr: Vector3Array) => Vector3;
 export declare const vector3ToQuaternion: (v: Vector3) => Quaternion;
 export declare const rapierVector3ToVector3: ({ x, y, z }: RapierVector3) => Vector3;
 export declare const rapierQuaternionToQuaternion: ({ x, y, z, w, }: RapierQuaternion) => Quaternion;

package/dist/react-three-rapier.cjs.dev.js

@@ -36,13 +36,9 @@ const _vector3 = new three.Vector3();
 new three.Object3D();
 const _matrix4 = new three.Matrix4();
 
-const vectorArrayToObject = arr => {
+const vectorArrayToVector3 = arr => {
   const [x, y, z] = arr;
-  return {
-    x,
-    y,
-    z
-  };
+  return new three.Vector3(x, y, z);
 };
 const vector3ToQuaternion = v => {
   return _quaternion.setFromEuler(_euler.setFromVector3(v));
@@ -459,7 +455,7 @@ const Physics = ({
   const worldRef = React.useRef();
   const getWorldRef = React.useRef(() => {
     if (!worldRef.current) {
-      const world = new rapier.World(vectorArrayToObject(_gravity));
+      const world = new rapier.World(vectorArrayToVector3(_gravity));
       worldRef.current = world;
     }
 
@@ -484,7 +480,7 @@ const Physics = ({
     const world = worldRef.current;
 
     if (world) {
-      world.gravity = vectorArrayToObject(_gravity);
+      world.gravity = vectorArrayToVector3(_gravity);
     }
   }, [_gravity]);
   const time = React.useRef(performance.now());
@@ -742,7 +738,8 @@ const useRigidBody = (options = {}) => {
       invertedMatrixWorld: ref.current.parent.matrixWorld.clone().invert(),
       isSleeping: false,
       worldScale: ref.current.getWorldScale(_vector3).clone(),
-      setMatrix: mat => ref.current.matrix.copy(mat)
+      setMatrix: mat => ref.current.matrix.copy(mat),
+      getMatrix: () => ref.current.matrix
     });
     ref.current.matrixAutoUpdate = false;
     return () => {
@@ -812,9 +809,9 @@ const useFixedJoint = (body1, body2, [body1Anchor, body1LocalFrame, body2Anchor,
   const {
     rapier
   } = useRapier();
-  return useImpulseJoint(body1, body2, rapier.JointData.fixed(vectorArrayToObject(body1Anchor), _objectSpread2(_objectSpread2({}, vectorArrayToObject(body1LocalFrame)), {}, {
+  return useImpulseJoint(body1, body2, rapier.JointData.fixed(vectorArrayToVector3(body1Anchor), _objectSpread2(_objectSpread2({}, vectorArrayToVector3(body1LocalFrame)), {}, {
     w: 1
-  }), vectorArrayToObject(body2Anchor), _objectSpread2(_objectSpread2({}, vectorArrayToObject(body2LocalFrame)), {}, {
+  }), vectorArrayToVector3(body2Anchor), _objectSpread2(_objectSpread2({}, vectorArrayToVector3(body2LocalFrame)), {}, {
     w: 1
   })));
 };
@@ -829,7 +826,7 @@ const useSphericalJoint = (body1, body2, [body1Anchor, body2Anchor]) => {
   const {
     rapier
   } = useRapier();
-  return useImpulseJoint(body1, body2, rapier.JointData.spherical(vectorArrayToObject(body1Anchor), vectorArrayToObject(body2Anchor)));
+  return useImpulseJoint(body1, body2, rapier.JointData.spherical(vectorArrayToVector3(body1Anchor), vectorArrayToVector3(body2Anchor)));
 };
 /**
  * The revolute joint prevents any relative movement between two rigid-bodies, except for relative
@@ -841,7 +838,7 @@ const useRevoluteJoint = (body1, body2, [body1Anchor, body2Anchor, axis]) => {
   const {
     rapier
   } = useRapier();
-  return useImpulseJoint(body1, body2, rapier.JointData.revolute(vectorArrayToObject(body1Anchor), vectorArrayToObject(body2Anchor), vectorArrayToObject(axis)));
+  return useImpulseJoint(body1, body2, rapier.JointData.revolute(vectorArrayToVector3(body1Anchor), vectorArrayToVector3(body2Anchor), vectorArrayToVector3(axis)));
 };
 /**
  * The prismatic joint prevents any relative movement between two rigid-bodies, except for relative translations along one axis.
@@ -853,7 +850,7 @@ const usePrismaticJoint = (body1, body2, [body1Anchor, body2Anchor, axis]) => {
   const {
     rapier
   } = useRapier();
-  return useImpulseJoint(body1, body2, rapier.JointData.prismatic(vectorArrayToObject(body1Anchor), vectorArrayToObject(body2Anchor), vectorArrayToObject(axis)));
+  return useImpulseJoint(body1, body2, rapier.JointData.prismatic(vectorArrayToVector3(body1Anchor), vectorArrayToVector3(body2Anchor), vectorArrayToVector3(axis)));
 };
 
 const _excluded$1 = ["children"];
@@ -1054,7 +1051,7 @@ const InstancedRigidBodies = /*#__PURE__*/React.forwardRef((props, ref) => {
     const rigidBodies = instancesRefGetter.current();
 
     if (object.current) {
-      const scale = object.current.getWorldScale(new three.Vector3());
+      const worldScale = object.current.getWorldScale(new three.Vector3());
       let hasOneMesh = false;
       object.current.traverse(mesh => {
         if (mesh instanceof three.InstancedMesh) {
@@ -1065,11 +1062,18 @@ const InstancedRigidBodies = /*#__PURE__*/React.forwardRef((props, ref) => {
 
           hasOneMesh = true;
           mesh.instanceMatrix.setUsage(three.DynamicDrawUsage);
-          const rigidBodyDesc = rigidBodyDescFromOptions(props);
-          const colliderDesc = colliderDescFromGeometry(mesh.geometry, props.colliders || physicsOptions.colliders, scale, false // Collisions currently not enabled for instances
-          );
 
           for (let index = 0; index < mesh.count; index++) {
+            const scale = worldScale.clone();
+            const rigidBodyDesc = rigidBodyDescFromOptions(props);
+
+            if (props.scales && props.scales[index]) {
+              const s = vectorArrayToVector3(props.scales[index]);
+              scale.multiply(s);
+            }
+
+            const colliderDesc = colliderDescFromGeometry(mesh.geometry, props.colliders || physicsOptions.colliders, scale, false // Collisions currently not enabled for instances
+            );
             const rigidBody = world.createRigidBody(rigidBodyDesc);
             const matrix = new three.Matrix4();
             mesh.getMatrixAt(index, matrix);
@@ -1079,7 +1083,7 @@ const InstancedRigidBodies = /*#__PURE__*/React.forwardRef((props, ref) => {
             } = decomposeMatrix4(matrix); // Set positions
 
             if (props.positions && props.positions[index]) {
-              rigidBody.setTranslation(vectorArrayToObject(props.positions[index]), true);
+              rigidBody.setTranslation(vectorArrayToVector3(props.positions[index]), true);
             } else {
               rigidBody.setTranslation(position, true);
             } // Set rotations
@@ -1098,7 +1102,14 @@ const InstancedRigidBodies = /*#__PURE__*/React.forwardRef((props, ref) => {
               isSleeping: false,
               invertedMatrixWorld: object.current.matrixWorld.clone().invert(),
               setMatrix: matrix => mesh.setMatrixAt(index, matrix),
-              worldScale: object.current.getWorldScale(new three.Vector3())
+              getMatrix: () => {
+                const m = new three.Matrix4();
+                mesh.getMatrixAt(index, m);
+                return m;
+              },
+              // Setting the world scale to the scale here, because
+              // we want the scales to be reflected by instance
+              worldScale: scale
             });
             const api = createRigidBodyApi({
               current() {

package/dist/react-three-rapier.cjs.prod.js

@@ -36,13 +36,9 @@ const _vector3 = new three.Vector3();
 new three.Object3D();
 const _matrix4 = new three.Matrix4();
 
-const vectorArrayToObject = arr => {
+const vectorArrayToVector3 = arr => {
   const [x, y, z] = arr;
-  return {
-    x,
-    y,
-    z
-  };
+  return new three.Vector3(x, y, z);
 };
 const vector3ToQuaternion = v => {
   return _quaternion.setFromEuler(_euler.setFromVector3(v));
@@ -459,7 +455,7 @@ const Physics = ({
   const worldRef = React.useRef();
   const getWorldRef = React.useRef(() => {
     if (!worldRef.current) {
-      const world = new rapier.World(vectorArrayToObject(_gravity));
+      const world = new rapier.World(vectorArrayToVector3(_gravity));
       worldRef.current = world;
     }
 
@@ -484,7 +480,7 @@ const Physics = ({
     const world = worldRef.current;
 
     if (world) {
-      world.gravity = vectorArrayToObject(_gravity);
+      world.gravity = vectorArrayToVector3(_gravity);
     }
   }, [_gravity]);
   const time = React.useRef(performance.now());
@@ -742,7 +738,8 @@ const useRigidBody = (options = {}) => {
       invertedMatrixWorld: ref.current.parent.matrixWorld.clone().invert(),
       isSleeping: false,
       worldScale: ref.current.getWorldScale(_vector3).clone(),
-      setMatrix: mat => ref.current.matrix.copy(mat)
+      setMatrix: mat => ref.current.matrix.copy(mat),
+      getMatrix: () => ref.current.matrix
     });
     ref.current.matrixAutoUpdate = false;
     return () => {
@@ -812,9 +809,9 @@ const useFixedJoint = (body1, body2, [body1Anchor, body1LocalFrame, body2Anchor,
   const {
     rapier
   } = useRapier();
-  return useImpulseJoint(body1, body2, rapier.JointData.fixed(vectorArrayToObject(body1Anchor), _objectSpread2(_objectSpread2({}, vectorArrayToObject(body1LocalFrame)), {}, {
+  return useImpulseJoint(body1, body2, rapier.JointData.fixed(vectorArrayToVector3(body1Anchor), _objectSpread2(_objectSpread2({}, vectorArrayToVector3(body1LocalFrame)), {}, {
     w: 1
-  }), vectorArrayToObject(body2Anchor), _objectSpread2(_objectSpread2({}, vectorArrayToObject(body2LocalFrame)), {}, {
+  }), vectorArrayToVector3(body2Anchor), _objectSpread2(_objectSpread2({}, vectorArrayToVector3(body2LocalFrame)), {}, {
     w: 1
   })));
 };
@@ -829,7 +826,7 @@ const useSphericalJoint = (body1, body2, [body1Anchor, body2Anchor]) => {
   const {
     rapier
   } = useRapier();
-  return useImpulseJoint(body1, body2, rapier.JointData.spherical(vectorArrayToObject(body1Anchor), vectorArrayToObject(body2Anchor)));
+  return useImpulseJoint(body1, body2, rapier.JointData.spherical(vectorArrayToVector3(body1Anchor), vectorArrayToVector3(body2Anchor)));
 };
 /**
  * The revolute joint prevents any relative movement between two rigid-bodies, except for relative
@@ -841,7 +838,7 @@ const useRevoluteJoint = (body1, body2, [body1Anchor, body2Anchor, axis]) => {
   const {
     rapier
   } = useRapier();
-  return useImpulseJoint(body1, body2, rapier.JointData.revolute(vectorArrayToObject(body1Anchor), vectorArrayToObject(body2Anchor), vectorArrayToObject(axis)));
+  return useImpulseJoint(body1, body2, rapier.JointData.revolute(vectorArrayToVector3(body1Anchor), vectorArrayToVector3(body2Anchor), vectorArrayToVector3(axis)));
 };
 /**
  * The prismatic joint prevents any relative movement between two rigid-bodies, except for relative translations along one axis.
@@ -853,7 +850,7 @@ const usePrismaticJoint = (body1, body2, [body1Anchor, body2Anchor, axis]) => {
   const {
     rapier
   } = useRapier();
-  return useImpulseJoint(body1, body2, rapier.JointData.prismatic(vectorArrayToObject(body1Anchor), vectorArrayToObject(body2Anchor), vectorArrayToObject(axis)));
+  return useImpulseJoint(body1, body2, rapier.JointData.prismatic(vectorArrayToVector3(body1Anchor), vectorArrayToVector3(body2Anchor), vectorArrayToVector3(axis)));
 };
 
 const _excluded$1 = ["children"];
@@ -1054,7 +1051,7 @@ const InstancedRigidBodies = /*#__PURE__*/React.forwardRef((props, ref) => {
     const rigidBodies = instancesRefGetter.current();
 
     if (object.current) {
-      const scale = object.current.getWorldScale(new three.Vector3());
+      const worldScale = object.current.getWorldScale(new three.Vector3());
       let hasOneMesh = false;
       object.current.traverse(mesh => {
         if (mesh instanceof three.InstancedMesh) {
@@ -1065,11 +1062,18 @@ const InstancedRigidBodies = /*#__PURE__*/React.forwardRef((props, ref) => {
 
           hasOneMesh = true;
           mesh.instanceMatrix.setUsage(three.DynamicDrawUsage);
-          const rigidBodyDesc = rigidBodyDescFromOptions(props);
-          const colliderDesc = colliderDescFromGeometry(mesh.geometry, props.colliders || physicsOptions.colliders, scale, false // Collisions currently not enabled for instances
-          );
 
           for (let index = 0; index < mesh.count; index++) {
+            const scale = worldScale.clone();
+            const rigidBodyDesc = rigidBodyDescFromOptions(props);
+
+            if (props.scales && props.scales[index]) {
+              const s = vectorArrayToVector3(props.scales[index]);
+              scale.multiply(s);
+            }
+
+            const colliderDesc = colliderDescFromGeometry(mesh.geometry, props.colliders || physicsOptions.colliders, scale, false // Collisions currently not enabled for instances
+            );
             const rigidBody = world.createRigidBody(rigidBodyDesc);
             const matrix = new three.Matrix4();
             mesh.getMatrixAt(index, matrix);
@@ -1079,7 +1083,7 @@ const InstancedRigidBodies = /*#__PURE__*/React.forwardRef((props, ref) => {
             } = decomposeMatrix4(matrix); // Set positions
 
             if (props.positions && props.positions[index]) {
-              rigidBody.setTranslation(vectorArrayToObject(props.positions[index]), true);
+              rigidBody.setTranslation(vectorArrayToVector3(props.positions[index]), true);
             } else {
               rigidBody.setTranslation(position, true);
             } // Set rotations
@@ -1098,7 +1102,14 @@ const InstancedRigidBodies = /*#__PURE__*/React.forwardRef((props, ref) => {
               isSleeping: false,
               invertedMatrixWorld: object.current.matrixWorld.clone().invert(),
               setMatrix: matrix => mesh.setMatrixAt(index, matrix),
-              worldScale: object.current.getWorldScale(new three.Vector3())
+              getMatrix: () => {
+                const m = new three.Matrix4();
+                mesh.getMatrixAt(index, m);
+                return m;
+              },
+              // Setting the world scale to the scale here, because
+              // we want the scales to be reflected by instance
+              worldScale: scale
             });
             const api = createRigidBodyApi({
               current() {

package/dist/react-three-rapier.esm.js

@@ -11,13 +11,9 @@ const _vector3 = new Vector3();
 new Object3D();
 const _matrix4 = new Matrix4();
 
-const vectorArrayToObject = arr => {
+const vectorArrayToVector3 = arr => {
   const [x, y, z] = arr;
-  return {
-    x,
-    y,
-    z
-  };
+  return new Vector3(x, y, z);
 };
 const vector3ToQuaternion = v => {
   return _quaternion.setFromEuler(_euler.setFromVector3(v));
@@ -434,7 +430,7 @@ const Physics = ({
   const worldRef = useRef();
   const getWorldRef = useRef(() => {
     if (!worldRef.current) {
-      const world = new rapier.World(vectorArrayToObject(_gravity));
+      const world = new rapier.World(vectorArrayToVector3(_gravity));
       worldRef.current = world;
     }
 
@@ -459,7 +455,7 @@ const Physics = ({
     const world = worldRef.current;
 
     if (world) {
-      world.gravity = vectorArrayToObject(_gravity);
+      world.gravity = vectorArrayToVector3(_gravity);
     }
   }, [_gravity]);
   const time = useRef(performance.now());
@@ -717,7 +713,8 @@ const useRigidBody = (options = {}) => {
       invertedMatrixWorld: ref.current.parent.matrixWorld.clone().invert(),
       isSleeping: false,
       worldScale: ref.current.getWorldScale(_vector3).clone(),
-      setMatrix: mat => ref.current.matrix.copy(mat)
+      setMatrix: mat => ref.current.matrix.copy(mat),
+      getMatrix: () => ref.current.matrix
     });
     ref.current.matrixAutoUpdate = false;
     return () => {
@@ -787,9 +784,9 @@ const useFixedJoint = (body1, body2, [body1Anchor, body1LocalFrame, body2Anchor,
   const {
     rapier
   } = useRapier();
-  return useImpulseJoint(body1, body2, rapier.JointData.fixed(vectorArrayToObject(body1Anchor), _objectSpread2(_objectSpread2({}, vectorArrayToObject(body1LocalFrame)), {}, {
+  return useImpulseJoint(body1, body2, rapier.JointData.fixed(vectorArrayToVector3(body1Anchor), _objectSpread2(_objectSpread2({}, vectorArrayToVector3(body1LocalFrame)), {}, {
     w: 1
-  }), vectorArrayToObject(body2Anchor), _objectSpread2(_objectSpread2({}, vectorArrayToObject(body2LocalFrame)), {}, {
+  }), vectorArrayToVector3(body2Anchor), _objectSpread2(_objectSpread2({}, vectorArrayToVector3(body2LocalFrame)), {}, {
     w: 1
   })));
 };
@@ -804,7 +801,7 @@ const useSphericalJoint = (body1, body2, [body1Anchor, body2Anchor]) => {
   const {
     rapier
   } = useRapier();
-  return useImpulseJoint(body1, body2, rapier.JointData.spherical(vectorArrayToObject(body1Anchor), vectorArrayToObject(body2Anchor)));
+  return useImpulseJoint(body1, body2, rapier.JointData.spherical(vectorArrayToVector3(body1Anchor), vectorArrayToVector3(body2Anchor)));
 };
 /**
  * The revolute joint prevents any relative movement between two rigid-bodies, except for relative
@@ -816,7 +813,7 @@ const useRevoluteJoint = (body1, body2, [body1Anchor, body2Anchor, axis]) => {
   const {
     rapier
   } = useRapier();
-  return useImpulseJoint(body1, body2, rapier.JointData.revolute(vectorArrayToObject(body1Anchor), vectorArrayToObject(body2Anchor), vectorArrayToObject(axis)));
+  return useImpulseJoint(body1, body2, rapier.JointData.revolute(vectorArrayToVector3(body1Anchor), vectorArrayToVector3(body2Anchor), vectorArrayToVector3(axis)));
 };
 /**
  * The prismatic joint prevents any relative movement between two rigid-bodies, except for relative translations along one axis.
@@ -828,7 +825,7 @@ const usePrismaticJoint = (body1, body2, [body1Anchor, body2Anchor, axis]) => {
   const {
     rapier
   } = useRapier();
-  return useImpulseJoint(body1, body2, rapier.JointData.prismatic(vectorArrayToObject(body1Anchor), vectorArrayToObject(body2Anchor), vectorArrayToObject(axis)));
+  return useImpulseJoint(body1, body2, rapier.JointData.prismatic(vectorArrayToVector3(body1Anchor), vectorArrayToVector3(body2Anchor), vectorArrayToVector3(axis)));
 };
 
 const _excluded$1 = ["children"];
@@ -1029,7 +1026,7 @@ const InstancedRigidBodies = /*#__PURE__*/forwardRef((props, ref) => {
     const rigidBodies = instancesRefGetter.current();
 
     if (object.current) {
-      const scale = object.current.getWorldScale(new Vector3());
+      const worldScale = object.current.getWorldScale(new Vector3());
       let hasOneMesh = false;
       object.current.traverse(mesh => {
         if (mesh instanceof InstancedMesh) {
@@ -1040,11 +1037,18 @@ const InstancedRigidBodies = /*#__PURE__*/forwardRef((props, ref) => {
 
           hasOneMesh = true;
           mesh.instanceMatrix.setUsage(DynamicDrawUsage);
-          const rigidBodyDesc = rigidBodyDescFromOptions(props);
-          const colliderDesc = colliderDescFromGeometry(mesh.geometry, props.colliders || physicsOptions.colliders, scale, false // Collisions currently not enabled for instances
-          );
 
           for (let index = 0; index < mesh.count; index++) {
+            const scale = worldScale.clone();
+            const rigidBodyDesc = rigidBodyDescFromOptions(props);
+
+            if (props.scales && props.scales[index]) {
+              const s = vectorArrayToVector3(props.scales[index]);
+              scale.multiply(s);
+            }
+
+            const colliderDesc = colliderDescFromGeometry(mesh.geometry, props.colliders || physicsOptions.colliders, scale, false // Collisions currently not enabled for instances
+            );
             const rigidBody = world.createRigidBody(rigidBodyDesc);
             const matrix = new Matrix4();
             mesh.getMatrixAt(index, matrix);
@@ -1054,7 +1058,7 @@ const InstancedRigidBodies = /*#__PURE__*/forwardRef((props, ref) => {
             } = decomposeMatrix4(matrix); // Set positions
 
             if (props.positions && props.positions[index]) {
-              rigidBody.setTranslation(vectorArrayToObject(props.positions[index]), true);
+              rigidBody.setTranslation(vectorArrayToVector3(props.positions[index]), true);
             } else {
               rigidBody.setTranslation(position, true);
             } // Set rotations
@@ -1073,7 +1077,14 @@ const InstancedRigidBodies = /*#__PURE__*/forwardRef((props, ref) => {
               isSleeping: false,
               invertedMatrixWorld: object.current.matrixWorld.clone().invert(),
               setMatrix: matrix => mesh.setMatrixAt(index, matrix),
-              worldScale: object.current.getWorldScale(new Vector3())
+              getMatrix: () => {
+                const m = new Matrix4();
+                mesh.getMatrixAt(index, m);
+                return m;
+              },
+              // Setting the world scale to the scale here, because
+              // we want the scales to be reflected by instance
+              worldScale: scale
             });
             const api = createRigidBodyApi({
               current() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/rapier",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "source": "src/index.ts",
   "main": "dist/react-three-rapier.cjs.js",
   "module": "dist/react-three-rapier.esm.js",

package/readme.md

@@ -1,5 +1,5 @@
 <p align="center">
-<img src="misc/hero.svg" />
+  <img src="https://raw.githubusercontent.com/pmndrs/react-three-rapier/HEAD/packages/react-three-rapier/misc/hero.svg" alt="@react-three/rapier" />
 </p>
 
 <p align="center">⚠️ Under heavy development. All APIs are subject to change. ⚠️</p>
@@ -139,7 +139,8 @@ const Scene = () => {
     });
   }, []);
 
-  // We can set the initial positions, and rotations, of the instances by providing an array equal to the instance count
+  // We can set the initial positions, and rotations, and scales, of
+  // the instances by providing an array equal to the instance count
   const positions = Array.from({ length: COUNT }, (_, index) => [index, 0, 0]);
 
   const rotations = Array.from({ length: COUNT }, (_, index) => [
@@ -148,11 +149,18 @@ const Scene = () => {
     Math.random(),
   ]);
 
+  const scales = Array.from({ length: COUNT }, (_, index) => [
+    Math.random(),
+    Math.random(),
+    Math.random(),
+  ]);
+
   return (
     <InstancedRigidBodies
       ref={instancedApi}
       positions={positions}
       rotations={rotations}
+      scales={scales}
       colliders="ball"
     >
       <instancedMesh args={[undefined, undefined, COUNT]}>