@react-three/rapier 0.14.0 → 0.15.0-canary.0

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

@@ -1,10 +1,10 @@
 import { ActiveEvents, ColliderDesc, EventQueue, RigidBodyDesc } from '@dimforge/rapier3d-compat';
 export { CoefficientCombineRule, Collider as RapierCollider, RigidBody as RapierRigidBody } from '@dimforge/rapier3d-compat';
 import { useFrame, useThree } from '@react-three/fiber';
-import React, { useRef, useMemo, useEffect, useContext, useState, memo, createContext, useCallback, forwardRef, useImperativeHandle, Fragment } from 'react';
-import { Quaternion, Euler, Vector3, Object3D, Matrix4, MathUtils, BufferAttribute, DynamicDrawUsage } from 'three';
+import React, { useRef, useEffect, memo, useMemo, useContext, useState, createContext, useCallback, forwardRef, useImperativeHandle, Fragment } from 'react';
+import { Quaternion, Euler, Vector3, Object3D, Matrix4, BufferAttribute, MathUtils, DynamicDrawUsage } from 'three';
 import { useAsset } from 'use-asset';
-import { mergeVertices, VertexNormalsHelper } from 'three-stdlib';
+import { mergeVertices } from 'three-stdlib';
 
 function _defineProperty(obj, key, value) {
   if (key in obj) {
@@ -153,6 +153,61 @@ function useConst(initialValue) {
   return ref.current.value;
 }
 
+const useRaf = callback => {
+  const cb = useRef(callback);
+  const raf = useRef(0);
+  const lastFrame = useRef(0);
+  useEffect(() => {
+    cb.current = callback;
+  }, [callback]);
+  useEffect(() => {
+    const loop = () => {
+      const now = performance.now();
+      const delta = now - lastFrame.current;
+      raf.current = requestAnimationFrame(loop);
+      cb.current(delta / 1000);
+      lastFrame.current = now;
+    };
+
+    raf.current = requestAnimationFrame(loop);
+    return () => cancelAnimationFrame(raf.current);
+  }, []);
+};
+
+const UseFrameStepper = ({
+  onStep,
+  updatePriority
+}) => {
+  useFrame((_, dt) => {
+    onStep(dt);
+  }, updatePriority);
+  return null;
+};
+
+const RafStepper = ({
+  onStep
+}) => {
+  useRaf(dt => {
+    onStep(dt);
+  });
+  return null;
+};
+
+const FrameStepper = ({
+  onStep,
+  type,
+  updatePriority
+}) => {
+  return type === "independent" ? /*#__PURE__*/React.createElement(RafStepper, {
+    onStep: onStep
+  }) : /*#__PURE__*/React.createElement(UseFrameStepper, {
+    onStep: onStep,
+    updatePriority: updatePriority
+  });
+};
+
+var FrameStepper$1 = /*#__PURE__*/memo(FrameStepper);
+
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
@@ -581,146 +636,27 @@ const useChildColliderProps = (ref, options, ignoreMeshColliders = true) => {
   return colliderProps;
 };
 
-const calcForceByType = {
-  static: (s, m2, r, d, G) => s,
-  linear: (s, m2, r, d, G) => s * (d / r),
-  newtonian: (s, m2, r, d, G) => G * s * m2 / Math.pow(d, 2)
-};
-const applyAttractorForceOnRigidBody = (rigidBody, {
-  object,
-  strength,
-  range,
-  gravitationalConstant,
-  collisionGroups,
-  type
-}) => {
-  const rbPosition = rigidBody.translation();
-
-  _position.set(rbPosition.x, rbPosition.y, rbPosition.z);
-
-  const worldPosition = object.getWorldPosition(new Vector3());
-  const distance = worldPosition.distanceTo(_position);
-
-  if (distance < range) {
-    let force = calcForceByType[type](strength, rigidBody.mass(), range, distance, gravitationalConstant); // Prevent wild forces when Attractors collide
-
-    force = force === Infinity ? strength : force; // Naively test if the rigidBody contains a collider in one of the collision groups
-
-    let isRigidBodyInCollisionGroup = collisionGroups === undefined ? true : false;
-
-    if (collisionGroups !== undefined) {
-      for (let i = 0; i < rigidBody.numColliders(); i++) {
-        const collider = rigidBody.collider(i);
-        const colliderCollisionGroups = collider.collisionGroups();
-
-        if ((collisionGroups >> 16 & colliderCollisionGroups) != 0 && (colliderCollisionGroups >> 16 & collisionGroups) != 0) {
-          isRigidBodyInCollisionGroup = true;
-          break;
-        }
-      }
-    }
-
-    if (isRigidBodyInCollisionGroup) {
-      _vector3.set(0, 0, 0).subVectors(worldPosition, _position).normalize().multiplyScalar(force);
-
-      rigidBody.applyImpulse(_vector3, true);
-    }
-  }
-};
-const Attractor = /*#__PURE__*/memo(props => {
-  const {
-    position = [0, 0, 0],
-    strength = 1,
-    range = 10,
-    type = "static",
-    gravitationalConstant = 6.673e-11,
-    collisionGroups
-  } = props;
+const Debug = /*#__PURE__*/memo(() => {
   const {
-    attractorStates
+    world
   } = useRapier();
-  const object = useRef(null);
-  useEffect(() => {
-    var _object$current;
-
-    let uuid = ((_object$current = object.current) === null || _object$current === void 0 ? void 0 : _object$current.uuid) || "_";
-
-    if (object.current) {
-      attractorStates.set(uuid, {
-        object: object.current,
-        strength,
-        range,
-        type,
-        gravitationalConstant,
-        collisionGroups
-      });
-    }
-
-    return () => {
-      attractorStates.delete(uuid);
-    };
-  }, [props]);
-  return /*#__PURE__*/React.createElement("object3D", {
-    ref: object,
-    position: position
+  const ref = useRef(null);
+  useFrame(() => {
+    const mesh = ref.current;
+    if (!mesh) return;
+    const buffers = world.debugRender();
+    mesh.geometry.setAttribute("position", new BufferAttribute(buffers.vertices, 3));
+    mesh.geometry.setAttribute("color", new BufferAttribute(buffers.colors, 4));
   });
+  return /*#__PURE__*/React.createElement("group", null, /*#__PURE__*/React.createElement("lineSegments", {
+    ref: ref,
+    frustumCulled: false
+  }, /*#__PURE__*/React.createElement("lineBasicMaterial", {
+    color: 0xffffff,
+    vertexColors: true
+  }), /*#__PURE__*/React.createElement("bufferGeometry", null)));
 });
 
-const useRaf = callback => {
-  const cb = useRef(callback);
-  const raf = useRef(0);
-  const lastFrame = useRef(0);
-  useEffect(() => {
-    cb.current = callback;
-  }, [callback]);
-  useEffect(() => {
-    const loop = () => {
-      const now = performance.now();
-      const delta = now - lastFrame.current;
-      raf.current = requestAnimationFrame(loop);
-      cb.current(delta / 1000);
-      lastFrame.current = now;
-    };
-
-    raf.current = requestAnimationFrame(loop);
-    return () => cancelAnimationFrame(raf.current);
-  }, []);
-};
-
-const UseFrameStepper = ({
-  onStep,
-  updatePriority
-}) => {
-  useFrame((_, dt) => {
-    onStep(dt);
-  }, updatePriority);
-  return null;
-};
-
-const RafStepper = ({
-  onStep
-}) => {
-  useRaf(dt => {
-    onStep(dt);
-  });
-  return null;
-};
-
-const FrameStepper = ({
-  onStep,
-  type,
-  updatePriority
-}) => {
-  return type === "independent" ? /*#__PURE__*/React.createElement(RafStepper, {
-    onStep: onStep
-  }) : /*#__PURE__*/React.createElement(UseFrameStepper, {
-    onStep: onStep,
-    updatePriority: updatePriority
-  });
-};
-
-var FrameStepper$1 = /*#__PURE__*/memo(FrameStepper);
-
 const rapierContext = /*#__PURE__*/createContext(undefined);
 
 const getCollisionPayloadFromSource = (target, other) => {
@@ -764,7 +700,8 @@ const Physics = ({
   paused: _paused = false,
   interpolate: _interpolate = true,
   updatePriority,
-  updateLoop: _updateLoop = "follow"
+  updateLoop: _updateLoop = "follow",
+  debug: _debug = false
 }) => {
   const rapier = useAsset(importRapier);
   const {
@@ -784,7 +721,6 @@ const Physics = ({
   const rigidBodyEvents = useConst(() => new Map());
   const colliderEvents = useConst(() => new Map());
   const eventQueue = useConst(() => new EventQueue(false));
-  const attractorStates = useConst(() => new Map());
   const beforeStepCallbacks = useConst(() => new Set());
   const afterStepCallbacks = useConst(() => new Set()); // Init world
 
@@ -853,13 +789,7 @@ const Physics = ({
     const clampedDelta = MathUtils.clamp(dt, 0, 0.2);
 
     const stepWorld = () => {
-      // Apply attractors
-      world.forEachRigidBody(body => {
-        attractorStates.forEach(attractorState => {
-          applyAttractorForceOnRigidBody(body, attractorState);
-        });
-      }); // Trigger beforeStep callbacks
-
+      // Trigger beforeStep callbacks
       beforeStepCallbacks.forEach(callback => {
         callback.current(api);
       });
@@ -1065,12 +995,12 @@ const Physics = ({
     colliderStates,
     rigidBodyEvents,
     colliderEvents,
-    attractorStates,
     beforeStepCallbacks,
     afterStepCallbacks,
     isPaused: _paused,
+    isDebug: _debug,
     step
-  }), [_paused, step]);
+  }), [_paused, step, _debug, _colliders, _gravity]);
   const stepCallback = useCallback(delta => {
     if (!_paused) {
       step(delta);
@@ -1082,7 +1012,7 @@ const Physics = ({
     onStep: stepCallback,
     type: _updateLoop,
     updatePriority: updatePriority
-  }), children);
+  }), _debug && /*#__PURE__*/React.createElement(Debug, null), children);
 };
 
 function _extends() {
@@ -1598,96 +1528,6 @@ const MeshCollider = /*#__PURE__*/memo(props => {
 });
 MeshCollider.displayName = "MeshCollider";
 
-function mapsEqual(map1, map2) {
-  var testVal;
-
-  if (map1.size !== map2.size) {
-    return false;
-  }
-
-  for (var [key, val] of map1) {
-    testVal = map2.get(key);
-
-    if (testVal !== val || testVal === undefined && !map2.has(key)) {
-      return false;
-    }
-  }
-
-  return true;
-}
-
-const AttractorHelper = props => {
-  const {
-    scene
-  } = useThree();
-  const ref = useRef(null);
-  const normalsHelper = useRef();
-  const color = props.strength > 0 ? 0x0000ff : 0xff0000;
-  useEffect(() => {
-    if (ref.current) {
-      normalsHelper.current = new VertexNormalsHelper(ref.current, props.range, color);
-      normalsHelper.current.frustumCulled = false;
-      scene.add(normalsHelper.current);
-    }
-
-    return () => {
-      if (normalsHelper.current) {
-        scene.remove(normalsHelper.current);
-      }
-    };
-  }, [props]);
-  useFrame(() => {
-    if (ref.current) {
-      var _normalsHelper$curren;
-
-      const worldPosition = props.object.getWorldPosition(_vector3);
-      ref.current.position.copy(worldPosition);
-      (_normalsHelper$curren = normalsHelper.current) === null || _normalsHelper$curren === void 0 ? void 0 : _normalsHelper$curren.update();
-    }
-  });
-  return /*#__PURE__*/React.createElement("mesh", {
-    ref: ref,
-    position: props.object.position,
-    frustumCulled: false
-  }, /*#__PURE__*/React.createElement("sphereGeometry", {
-    args: [0.2, 6, 6]
-  }), /*#__PURE__*/React.createElement("meshBasicMaterial", {
-    color: color,
-    wireframe: true
-  }));
-};
-
-const Debug = /*#__PURE__*/memo(() => {
-  const {
-    world,
-    attractorStates
-  } = useRapier();
-  const ref = useRef(null);
-  const [attractors, setAttractors] = useState([]);
-  const currMap = useRef(new Map());
-  useFrame(() => {
-    const mesh = ref.current;
-    if (!mesh) return;
-    const buffers = world.debugRender();
-    mesh.geometry.setAttribute("position", new BufferAttribute(buffers.vertices, 3));
-    mesh.geometry.setAttribute("color", new BufferAttribute(buffers.colors, 4)); // Update attractors
-
-    if (!mapsEqual(currMap.current, attractorStates)) {
-      setAttractors([...attractorStates.values()]);
-      currMap.current = new Map(attractorStates);
-    }
-  });
-  return /*#__PURE__*/React.createElement("group", null, /*#__PURE__*/React.createElement("lineSegments", {
-    ref: ref,
-    frustumCulled: false
-  }, /*#__PURE__*/React.createElement("lineBasicMaterial", {
-    color: 0xffffff,
-    vertexColors: true
-  }), /*#__PURE__*/React.createElement("bufferGeometry", null)), attractors.map((attractor, i) => /*#__PURE__*/React.createElement(AttractorHelper, _extends({
-    key: attractor.object.uuid
-  }, attractor))));
-});
-
 const _excluded = ["children", "instances", "colliderNodes", "position", "rotation", "quaternion", "scale"];
 const InstancedRigidBodies = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((props, ref) => {
   const object = useRef(null);
@@ -1903,4 +1743,4 @@ const interactionGroups = (memberships, filters) => (bitmask(memberships) << 16)
 
 const bitmask = groups => [groups].flat().reduce((acc, layer) => acc | 1 << layer, 0);
 
-export { AnyCollider, Attractor, BallCollider, CapsuleCollider, ConeCollider, ConvexHullCollider, CuboidCollider, CylinderCollider, Debug, HeightfieldCollider, InstancedRigidBodies, MeshCollider, Physics, RigidBody, RoundCuboidCollider, TrimeshCollider, euler, interactionGroups, quat, useAfterPhysicsStep, useBeforePhysicsStep, useFixedJoint, useImpulseJoint, usePrismaticJoint, useRapier, useRevoluteJoint, useSphericalJoint, vec3 };
+export { AnyCollider, BallCollider, CapsuleCollider, ConeCollider, ConvexHullCollider, CuboidCollider, CylinderCollider, HeightfieldCollider, InstancedRigidBodies, MeshCollider, Physics, RigidBody, RoundCuboidCollider, TrimeshCollider, euler, interactionGroups, quat, useAfterPhysicsStep, useBeforePhysicsStep, useFixedJoint, useImpulseJoint, usePrismaticJoint, useRapier, useRevoluteJoint, useSphericalJoint, vec3 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/rapier",
-  "version": "0.14.0",
+  "version": "0.15.0-canary.0",
   "source": "src/index.ts",
   "main": "dist/react-three-rapier.cjs.js",
   "module": "dist/react-three-rapier.esm.js",
@@ -18,12 +18,12 @@
     "@types/react-dom": "18.0.2",
     "@types/three": "0.139.0",
     "@vitejs/plugin-react": "^2.1.0",
-    "@vitest/ui": "0.25.2",
+    "@vitest/ui": "0.29.7",
     "happy-dom": "7.5.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "three": "0.146.0",
-    "vitest": "0.25.2"
+    "vitest": "0.29.7"
   },
   "peerDependencies": {
     "@react-three/fiber": "8.9.1",

package/readme.md

@@ -21,6 +21,7 @@ For available APIs, see <a href="https://pmndrs.github.io/react-three-rapier/">
 
 The goal of this library to is to provide a fast physics engine with minimal friction and small, straight forward API.
 
+<!-- omit from toc -->
 ## Basic Usage
 
 ```tsx
@@ -32,14 +33,12 @@ const App = () => {
   return (
     <Canvas>
       <Suspense>
-        <Physics>
+        <Physics debug>
           <RigidBody colliders={"hull"} restitution={2}>
             <Torus />
           </RigidBody>
 
           <CuboidCollider position={[0, -2, 0]} args={[20, .5, 20]} />
-
-          <Debug />
         </Physics>
       </Suspense>
     </Canvas>
@@ -49,17 +48,16 @@ const App = () => {
 
 ---
 
+<!-- omit from toc -->
 ## 📝 Readme note
 Below follows a guide on core concepts for `react-three/rapier`.  
 For full API outline and documentation, see 🧩 [API Docs](https://pmndrs.github.io/react-three-rapier/).
 
 ---
 
+<!-- omit from toc -->
 ## Readme Topics
 
-- [Basic Usage](#basic-usage)
-- [📝 Readme note](#-readme-note)
-- [Readme Topics](#readme-topics)
 - [The Physics Component](#the-physics-component)
 - [The RigidBody Component](#the-rigidbody-component)
 - [Automatic Colliders](#automatic-colliders)
@@ -73,8 +71,6 @@ For full API outline and documentation, see 🧩 [API Docs](https://pmndrs.githu
 - [Contact force events](#contact-force-events)
 - [Sensors](#sensors)
   - [🖼 Sensors Example](#-sensors-example)
-- [Attractors](#attractors)
-  - [🖼 Attractors Example](#-attractors-example)
 - [Configuring Time Step Size](#configuring-time-step-size)
 - [Joints](#joints)
   - [Fixed Joint](#fixed-joint)
@@ -334,17 +330,15 @@ const Scene = () => {
 
 ## Debug
 
-Use the Debug component to see live representations of all colliders in a scene, using the live debug buffer from the physics engine.
+Set the `debug` prop on `<Physics />` to see live representations of all colliders in a scene, using the live debug buffer from the physics engine.
 
 ```tsx
 import { Box, Sphere } from "@react-three/drei";
-import { RigidBody, Debug } from "@react-three/rapier";
+import { RigidBody } from "@react-three/rapier";
 
 const Scene = () => {
   return (
-    <Physics>
-      <Debug />
-
+    <Physics debug>
       <RigidBody>
         <Box />
       </RigidBody>
@@ -605,45 +599,6 @@ To detect when a collider enters or leaves another collider, you can use the `on
 ### 🖼 Sensors Example
 <a href="https://codesandbox.io/s/react-three-rapier-sensors-byjmsk"><img src="https://raw.githubusercontent.com/pmndrs/react-three-rapier/HEAD/packages/react-three-rapier/misc/example-sensors.jpg" width="240" /></a>
 
-## Attractors
-
-An attractor simulates a source of gravity. Any `RigidBody` within range will be _pulled_ (attracted) toward the attractor.  
-Setting the `strength` to a negative value will cause the `RigidBody` to be _pushed_ (repelled) away from the attractor.
-
-The force applied to rigid-bodies within range is calculated differently depending on the `type`.
-
-🧩 See [Attractor docs](https://pmndrs.github.io/react-three-rapier/interfaces/AttractorProps.html) for all available props.
-
-```tsx
-// Standard attractor
-<Attractor range={10} strength={5} type="linear" position={[5, -5, 0]} />
-
-// An attractor with negative strength, repels RigidBodies
-<Attractor range={10} strength={-5} position={[5, -5, 0]} />
-
-// You can also assign InteractionGroups.
-// An attractor belonging to group 0 only affecting bodies in group 2, and 3
-<Attractor range={10} strength={10} position={[5, -5, 0]} collisionGroups={interactionGroups(0, [2,3])} />
-```
-
-Gravity types:
-
-- "static" (Default)  
-  Static gravity means that the same force (`strength`) is applied on all rigid-bodies within range, regardless of distance.
-
-- "linear"  
-  Linear gravity means that force is calculated as `strength * distance / range`. That means the force applied decreases the farther a rigid-body is from the attractor position.
-
-- "newtonian"  
-  Newtonian gravity uses the traditional method of calculating gravitational force (`F = GMm/r^2`) and as such force is calculated as `gravitationalConstant * mass1 * mass2 / Math.pow(distance, 2)`.
-  - `gravitationalConstant` defaults to 6.673e-11 but you can provide your own
-  - `mass1` here is the "mass" of the Attractor, which is just the `strength` property
-  - `mass2` is the mass of the rigid-body at the time of calculation. Note that rigid-bodies with colliders will use the mass provided to the collider. This is not a value you can control from the attractor, only from wherever you're creating rigid-body components in the scene.
-  - `distance` is the distance between the attractor and rigid-body at the time of calculation
-
-### 🖼 Attractors Example
-<a href="https://codesandbox.io/s/react-three-rapier-attractors-oyj640"><img src="https://raw.githubusercontent.com/pmndrs/react-three-rapier/HEAD/packages/react-three-rapier/misc/example-attractors.jpg" width="240" /></a>
-
 ## Configuring Time Step Size
 
 By default, `<Physics>` will simulate the physics world at a fixed rate of 60 frames per second. This can be changed by setting the `timeStep` prop on `<Physics>`:

package/dist/declarations/src/components/Attractor.d.ts

@@ -1,50 +0,0 @@
-import { InteractionGroups, RigidBody } from "@dimforge/rapier3d-compat";
-import { FC } from "react";
-import { Object3D } from "three";
-import { Object3DProps } from "@react-three/fiber";
-export declare type AttractorGravityType = "static" | "linear" | "newtonian";
-export interface AttractorProps {
-    /**
-     * The relative position of this attractor
-     */
-    position?: Object3DProps["position"];
-    /**
-     * The strength of the attractor.
-     * Positive values attract, negative values repel.
-     *
-     * @defaultValue 1
-     */
-    strength?: number;
-    /**
-     * The range of the attractor. Will not affect objects outside of this range.
-     *
-     * @defaultValue 10
-     * @min 0
-     */
-    range?: number;
-    /**
-     * The type of gravity to use.
-     * - static: The gravity is constant and does not change over time.
-     * - linear: The gravity is linearly interpolated the closer the object is to the attractor.
-     * - newtonian: The gravity is calculated using the newtonian gravity formula.
-     * @defaultValue "static"
-     */
-    type?: AttractorGravityType;
-    /**
-     * The mass of the attractor. Used when type is `newtonian`.
-     * @defaultValue 6.673e-11
-     */
-    gravitationalConstant?: number;
-    /**
-     * The collision groups that this attractor will apply effects to. If a RigidBody contains one or more colliders that are in one of the mask group, it will be affected by this attractor.
-     * If not specified, the attractor will apply effects to all RigidBodies.
-     */
-    collisionGroups?: InteractionGroups;
-}
-export interface AttractorState extends Required<Omit<AttractorProps, "position" | "collisionGroups">> {
-    object: Object3D;
-    collisionGroups?: InteractionGroups;
-}
-export declare type AttractorStateMap = Map<Object3D["uuid"], AttractorState>;
-export declare const applyAttractorForceOnRigidBody: (rigidBody: RigidBody, { object, strength, range, gravitationalConstant, collisionGroups, type }: AttractorState) => void;
-export declare const Attractor: FC<AttractorProps>;