[WIP ]Kinematic character controller

demo/package.json

@@ -10,20 +10,20 @@
   },
   "dependencies": {
     "@react-three/csg": "1.1.5",
-    "@react-three/drei": "9.74.14",
-    "@react-three/fiber": "8.9.1",
+    "@react-three/drei": "9.112.0",
+    "@react-three/fiber": "8.17.7",
     "@react-three/rapier": "1.4.0",
     "@react-three/rapier-addons": "4.0.1",
-    "@types/three": "^0.152.1",
-    "leva": "0.9.34",
-    "r3f-perf": "6.4.2",
+    "@types/three": "^0.168.0",
+    "leva": "0.9.35",
+    "r3f-perf": "7.2.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-router-dom": "6.4.3",
-    "three": "0.146.0"
+    "three": "0.168.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-react": "^4.0.3",
+    "@vitejs/plugin-react": "^4.3.1",
     "typescript": "^4.6.3",
     "vite": "3.0.3"
   },

demo/src/App.tsx

@@ -8,6 +8,8 @@ import {
   Suspense,
   createContext,
   useContext,
+  useEffect,
+  useRef,
   useState
 } from "react";
 import { NavLink, NavLinkProps, Route, Routes } from "react-router-dom";
@@ -42,12 +44,18 @@ import { SpringExample } from "./examples/spring/SpringExample";
 import { StutteringExample } from "./examples/stuttering/StutteringExample";
 import { Transforms } from "./examples/transforms/TransformsExample";
 import { ActiveCollisionTypesExample } from "./examples/active-collision-types/ActiveCollisionTypesExample";
+import { OrbitControls as OrbitControlsImpl } from "three-stdlib";
+import { resetOrbitControl } from "./hooks/resetOrbitControl";
+import { KinematicCharacterControllerExample } from "./examples/kinematic-character-controller/KinematicCharacterControllerExample";
 
-const demoContext = createContext<{
-  setDebug?(f: boolean): void;
-  setPaused?(f: boolean): void;
-  setCameraEnabled?(f: boolean): void;
-}>({});
+type DemoContextType = {
+  setDebug: (f: boolean) => void;
+  setPaused: (f: boolean) => void;
+  setCameraEnabled: (f: boolean) => void;
+  orbitControlRef: React.RefObject<OrbitControlsImpl>;
+};
+
+const demoContext = createContext<Partial<DemoContextType>>({});
 
 export const useDemo = () => useContext(demoContext);
 
@@ -104,6 +112,7 @@ const routes: Record<string, ReactNode> = {
   car: <Car />,
   "api-usage": <ApiUsage />,
   kinematics: <Kinematics />,
+  kinematicCharacterController: <KinematicCharacterControllerExample />,
   "mesh-collider-test": <MeshColliderTest />,
   colliders: <Colliders />,
   "instanced-meshes": <InstancedMeshes />,
@@ -123,7 +132,7 @@ const routes: Record<string, ReactNode> = {
   spring: <SpringExample />,
   "rope-joint": <RopeJointExample />,
   "active-collision-types": <ActiveCollisionTypesExample />,
-  "contact-skin": <ContactSkinExample />,
+  "contact-skin": <ContactSkinExample />
 };
 
 export const App = () => {
@@ -133,6 +142,9 @@ export const App = () => {
   const [interpolate, setInterpolate] = useState<boolean>(true);
   const [physicsKey, setPhysicsKey] = useState<number>(0);
   const [cameraEnabled, setCameraEnabled] = useState<boolean>(true);
+  const orbitControlRef = useRef<OrbitControlsImpl>(null);
+
+  resetOrbitControl();
 
   const updatePhysicsKey = () => {
     setPhysicsKey((current) => current + 1);
@@ -169,13 +181,18 @@ export const App = () => {
               />
               <Environment preset="apartment" />
 
-              <OrbitControls enabled={cameraEnabled} />
+              <OrbitControls
+                // @ts-ignore
+                ref={orbitControlRef}
+                enabled={cameraEnabled}
+              />
 
               <demoContext.Provider
                 value={{
                   setDebug,
                   setPaused,
-                  setCameraEnabled
+                  setCameraEnabled,
+                  orbitControlRef
                 }}
               >
                 <Routes>

demo/src/examples/active-collision-types/ActiveCollisionTypesExample.tsx

@@ -3,6 +3,7 @@ import { Box, Sphere } from "@react-three/drei";
 import { useFrame } from "@react-three/fiber";
 import { RapierRigidBody, RigidBody } from "@react-three/rapier";
 import { useRef, useState } from "react";
+import { resetOrbitControl } from "../../hooks/resetOrbitControl";
 
 const activeCollisionTypes =
   ActiveCollisionTypes.DEFAULT | ActiveCollisionTypes.KINEMATIC_FIXED;
@@ -48,6 +49,7 @@ const Wall = () => {
 };
 
 export const ActiveCollisionTypesExample = () => {
+  resetOrbitControl(10);
   return (
     <group>
       <Ball />

demo/src/examples/all-colliders/AllCollidersExample.tsx

@@ -19,6 +19,7 @@ import { useSuzanne } from "../all-shapes/AllShapesExample";
 import { RoundedBoxGeometry } from "three-stdlib";
 import { PlaneGeometry } from "three";
 import { useEffect, useRef } from "react";
+import { resetOrbitControl } from "../../hooks/resetOrbitControl";
 
 const CuteBox = (props: Omit<MeshProps, "args">) => (
   <Box castShadow receiveShadow {...props}>
@@ -64,8 +65,7 @@ const heightFieldGeometry = new PlaneGeometry(
 );
 
 heightField.forEach((v, index) => {
-  (heightFieldGeometry.attributes.position.array as number[])[index * 3 + 2] =
-    v;
+  heightFieldGeometry.attributes.position.array[index * 3 + 2] = v;
 });
 heightFieldGeometry.scale(1, -1, 1);
 heightFieldGeometry.rotateX(-Math.PI / 2);
@@ -82,6 +82,8 @@ export const AllCollidersExample = () => {
     console.log("roundCuboidCollider", roundCuboidCollider.current);
   }, []);
 
+  resetOrbitControl(30);
+
   return (
     <group>
       <RigidBody colliders={false}>

demo/src/examples/all-shapes/AllShapesExample.tsx

@@ -12,6 +12,7 @@ import {
 
 import { Demo } from "../../App";
 import { Mesh } from "three";
+import { resetOrbitControl } from "../../hooks/resetOrbitControl";
 
 export const useSuzanne = () => {
   // @ts-ignore
@@ -61,6 +62,7 @@ const OffsetTorus = () => {
 
 export const AllShapesExample: Demo = () => {
   const { nodes } = useSuzanne();
+  resetOrbitControl();
 
   return (
     <>

demo/src/examples/api-usage/ApiUsageExample.tsx

@@ -2,10 +2,11 @@ import { Torus } from "@react-three/drei";
 import { RigidBody, RapierRigidBody } from "@react-three/rapier";
 import { useEffect, useRef } from "react";
 import { Demo } from "../../App";
+import { resetOrbitControl } from "../../hooks/resetOrbitControl";
 
 export const ApiUsage: Demo = () => {
   const torus = useRef<RapierRigidBody>(null);
-
+  resetOrbitControl();
   useEffect(() => {
     if (torus.current) {
       torus.current.applyTorqueImpulse(

demo/src/examples/attractors/AttractorsExample.tsx

@@ -9,11 +9,13 @@ import { RapierRigidBody } from "@react-three/rapier";
 import { createRef, useEffect, useRef } from "react";
 import { Demo } from "../../App";
 import { Attractor } from "@react-three/rapier-addons";
+import { resetOrbitControl } from "../../hooks/resetOrbitControl";
 
 const BALLS = 100;
 
 export const AttractorExample: Demo = () => {
   const api = useRef<RapierRigidBody[]>(null);
+  resetOrbitControl(40);
 
   return (
     <group>

demo/src/examples/car/CarExample.tsx

@@ -8,6 +8,7 @@ import {
 } from "@react-three/rapier";
 import { createRef, RefObject, useRef } from "react";
 import { Demo } from "../../App";
+import { resetOrbitControl } from "../../hooks/resetOrbitControl";
 
 const WheelJoint = ({
   body,
@@ -48,6 +49,7 @@ export const Car: Demo = () => {
   const wheelRefs = useRef(
     wheelPositions.map(() => createRef<RapierRigidBody>())
   );
+  resetOrbitControl(30);
 
   return (
     <group>

demo/src/examples/cluster/ClusterExample.tsx

@@ -8,11 +8,13 @@ import {
 import { useEffect, useRef } from "react";
 import { Color, InstancedMesh } from "three";
 import { Demo } from "../../App";
+import { resetOrbitControl } from "../../hooks/resetOrbitControl";
 
 const BALLS = 1000;
 
 export const Cluster: Demo = () => {
   const api = useRef<RapierRigidBody[]>(null);
+  resetOrbitControl();
 
   const { isPaused } = useRapier();
 

demo/src/examples/colliders/CollidersExample.tsx

@@ -9,6 +9,7 @@ import {
 } from "@react-three/rapier";
 import { useEffect, useRef } from "react";
 import { Demo } from "../../App";
+import { resetOrbitControl } from "../../hooks/resetOrbitControl";
 
 const Ball = () => {
   const ball = useRef<RapierRigidBody>(null);
@@ -40,6 +41,7 @@ const Ball = () => {
 
 export const Colliders: Demo = () => {
   const cuboid = useRef<RapierCollider>(null);
+  resetOrbitControl(30);
 
   useEffect(() => {
     console.log(cuboid.current);

demo/src/examples/collision-events/CollisionEventsExample.tsx

@@ -20,6 +20,7 @@ import {
 } from "react";
 import { PlaneGeometry } from "three";
 import { useSuzanne } from "../all-shapes/AllShapesExample";
+import { resetOrbitControl } from "../../hooks/resetOrbitControl";
 
 const Suzanne = ({ color }: { color: string }) => {
   const { nodes: suzanne } = useSuzanne();
@@ -51,7 +52,7 @@ const heightFieldGeometry = new PlaneGeometry(
 );
 
 heightField.forEach((v, index) => {
-  (heightFieldGeometry.attributes.position.array as number[])[index * 3 + 2] =
+  (heightFieldGeometry.attributes.position.array)[index * 3 + 2] =
     v;
 });
 heightFieldGeometry.scale(1, -1, 1);
@@ -218,6 +219,7 @@ const Explosions = () => {
 
 export const CollisionEventsExample = () => {
   const [explosions, setExplosions] = useState<ReactNode[]>([]);
+  resetOrbitControl(30);
 
   return (
     <explosionContext.Provider value={{ explosions, setExplosions }}>

demo/src/examples/components/ComponentsExample.tsx

@@ -5,6 +5,7 @@ import { RigidBody, TrimeshCollider } from "@react-three/rapier";
 import { GroupProps, Object3DNode, useFrame } from "@react-three/fiber";
 import { Mesh } from "three";
 import { Demo } from "../../App";
+import { resetOrbitControl } from "../../hooks/resetOrbitControl";
 
 const Map = () => {
   const { nodes } = useGLTF(
@@ -88,6 +89,7 @@ const CompoundShape = () => {
 };
 
 export const ComponentsExample: Demo = () => {
+  resetOrbitControl();
   return (
     <group>
       <CompoundShape />

demo/src/examples/contact-force-events/ContactForceEventsExample.tsx

@@ -9,6 +9,7 @@ import {
 import { useCallback, useRef, useState } from "react";
 import { Color } from "three";
 import { Demo } from "../../App";
+import { resetOrbitControl } from "../../hooks/resetOrbitControl";
 
 type BallProps = { onContactForce: RigidBodyProps["onContactForce"] };
 const Ball = ({ onContactForce }: BallProps) => {
@@ -63,6 +64,8 @@ export const ContactForceEventsExample: Demo = () => {
     []
   );
 
+  resetOrbitControl(10);
+
   // magic number: this is the start force for where the ball drops from
   // and is used to calculate the color change
   const startForce = 6500;

demo/src/examples/contact-skin/ContactSkinExample.tsx

@@ -1,6 +1,7 @@
 import { Box, Sphere } from "@react-three/drei";
 import { RapierRigidBody, RigidBody } from "@react-three/rapier";
 import { useRef } from "react";
+import { resetOrbitControl } from "../../hooks/resetOrbitControl";
 
 const Ball = () => {
   const rb = useRef<RapierRigidBody>(null);
@@ -25,6 +26,7 @@ const Floor = () => {
 };
 
 export const ContactSkinExample = () => {
+  resetOrbitControl(10);
   return (
     <group>
       <Ball />

demo/src/examples/cradle/CradleExample.tsx

@@ -9,6 +9,7 @@ import {
 } from "@react-three/rapier";
 import { useRef } from "react";
 import { Demo } from "../../App";
+import { resetOrbitControl } from "../../hooks/resetOrbitControl";
 
 const Rod = (props: RigidBodyOptions) => {
   const anchor = useRef<RapierRigidBody>(null);
@@ -44,6 +45,7 @@ const Rod = (props: RigidBodyOptions) => {
 };
 
 export const CradleExample: Demo = () => {
+  resetOrbitControl();
   return (
     <group rotation={[1, 0, 0]} scale={3}>
       <Rod position={[0, 0, 0]} />

demo/src/examples/damping/DampingExample.tsx

@@ -2,6 +2,7 @@ import { Box, Sphere, useTexture } from "@react-three/drei";
 import { RigidBody } from "@react-three/rapier";
 import { RepeatWrapping } from "three";
 import { Demo } from "../../App";
+import { resetOrbitControl } from "../../hooks/resetOrbitControl";
 
 export const Damping: Demo = () => {
   const floor = useTexture(new URL("./white.png", import.meta.url).toString());
@@ -12,6 +13,8 @@ export const Damping: Demo = () => {
 
   const balls = Array.from(Array(10).keys());
 
+  resetOrbitControl(40, [0, 0.25, 0.75]);
+
   return (
     <>
       <group>

demo/src/examples/dynamic-type-change/DynamicTypeChangeExample.tsx

@@ -4,6 +4,7 @@ import { RapierRigidBody, RigidBody } from "@react-three/rapier";
 import { useEffect, useRef, useState } from "react";
 import { useDemo } from "../../App";
 import { useSuzanne } from "../all-shapes/AllShapesExample";
+import { resetOrbitControl } from "../../hooks/resetOrbitControl";
 
 export const DynamicTypeChangeExample = () => {
   const { setCameraEnabled } = useDemo();
@@ -18,6 +19,7 @@ export const DynamicTypeChangeExample = () => {
   } = useSuzanne();
 
   const { mouse } = useThree();
+  resetOrbitControl(30);
 
   useEffect(() => {
     if (dragging) {

demo/src/examples/immutable-props/ImmutablePropsExample.tsx

@@ -1,20 +1,15 @@
-import { Box, Sphere, Torus } from "@react-three/drei";
+import { Box } from "@react-three/drei";
 import { useFrame } from "@react-three/fiber";
-import {
-  MeshCollider,
-  RapierRigidBody,
-  RigidBody,
-  euler,
-  quat
-} from "@react-three/rapier";
+import { RapierRigidBody, RigidBody, euler, quat } from "@react-three/rapier";
 import { Demo } from "../../App";
-import { useEffect, useRef, useState } from "react";
+import { useRef, useState } from "react";
 import { useControls } from "leva";
+import { resetOrbitControl } from "../../hooks/resetOrbitControl";
 
 export const ImmutablePropsExample: Demo = () => {
   const [canSleep, setCanSleep] = useState(true);
   const rb = useRef<RapierRigidBody>(null);
-
+  resetOrbitControl(30);
   useControls({
     canSleep: {
       value: canSleep,