Merge pull request #83 from pmndrs/controllers

Controllers First Pass

apps/examples/src/App.tsx

@@ -2,7 +2,7 @@
 //import * as THREE from 'three';
 import { Environment, CameraControls } from '@react-three/drei';
 import { Canvas, useThree } from '@react-three/fiber';
-import { Physics, vec3 } from '@react-three/jolt';
+import { vec3 } from '@react-three/jolt';
 import { Perf } from 'r3f-perf';
 import {
   //ReactNode,
@@ -29,14 +29,17 @@ import { RaycastSimpleDemo } from './examples/RaycastSimpleDemo';
 import { JustBoxes } from './examples/JustBoxes';
 import { HeightfieldDemo } from './examples/Heightfield';
 import { CubeHeap } from './examples/CubeHeap';
-
+import { FourWheelDemo } from './examples/FourWheelsWithHeightmap';
+import { CharacterVirtualDemo } from './examples/CharacterVirtualDemo';
 //try to import a local module of jolt
-import initJolt from './jolt/Distribution/jolt-physics.wasm-compat.js';
+// see issue #71
+//import initJolt from './jolt/Distribution/jolt-physics.wasm-compat.js';
 const demoContext = createContext<{
-  setDebug?(f: boolean): void;
-  setPaused?(f: boolean): void;
-  setCameraEnabled?(f: boolean): void;
-}>({});
+  debug: boolean;
+  paused: boolean;
+  interpolate: boolean;
+  physicsKey: number;
+}>({ debug: false, paused: false, interpolate: true, physicsKey: 0 });
 
 export const useDemo = () => useContext(demoContext);
 
@@ -112,13 +115,24 @@ const routes: Routes = {
     background: '#3d405b',
     element: <HeightfieldDemo />,
   },
-  // just for current dev purposes
   CubeHeap: {
     position: [2, 25, 51],
     target: [0, 1, 10],
     background: '#3d405b',
     element: <CubeHeap />,
   },
+  Vehicle: {
+    position: [2, 25, 51],
+    target: [0, 1, 10],
+    background: '#3d405b',
+    element: <FourWheelDemo />,
+  },
+  Character: {
+    position: [2, 25, 51],
+    target: [0, 1, 10],
+    background: '#3d405b',
+    element: <CharacterVirtualDemo />,
+  },
   // just for current dev purposes
   Boxes: {
     position: [-10, 5, 15],
@@ -189,20 +203,15 @@ export const App = () => {
             position={cameraProps?.position}
             target={cameraProps?.target}
           />
-          <Physics
-            module={initJolt}
-            paused={paused}
-            key={physicsKey}
-            interpolate={interpolate}
-            debug={debug}
-            gravity={22}
+          <demoContext.Provider
+            value={{ debug, paused, interpolate, physicsKey }}
           >
             <Routes>
               {Object.keys(routes).map((key) => (
                 <Route path={key} key={key} element={routes[key].element} />
               ))}
             </Routes>
-          </Physics>
+          </demoContext.Provider>
           {perf && <Perf position="top-left" minimal className="perf" />}
         </Canvas>
       </Suspense>

apps/examples/src/examples/Bodies/Arch.tsx

@@ -0,0 +1,23 @@
+// creates a bridge static rigidbody
+import { RigidBody } from "@react-three/jolt";
+
+export function Arch(props: any) {
+	const { position = [0, 0, 0] } = props;
+
+	return (
+		<RigidBody position={position} type={"static"} allowObstruction>
+			<mesh position={[0, 7, 0]}>
+				<boxGeometry args={[7, 1, 3]} />
+				<meshStandardMaterial color="#AD6A6C" />
+			</mesh>
+			<mesh position={[3.5, 3.5, 0]}>
+				<boxGeometry args={[1, 7, 3]} />
+				<meshStandardMaterial color="#AD6A6C" />
+			</mesh>
+			<mesh position={[-3.5, 3.5, 0]}>
+				<boxGeometry args={[1, 7, 3]} />
+				<meshStandardMaterial color="#AD6A6C" />
+			</mesh>
+		</RigidBody>
+	);
+}

apps/examples/src/examples/Bodies/Conveyor.tsx

@@ -0,0 +1,32 @@
+// creates a bridge static rigidbody
+import { BodyState, RigidBody } from "@react-three/jolt";
+import { useRef, useEffect } from "react";
+
+export function Conveyor(props: any) {
+	const rigidBodyRef = useRef();
+	const {
+		size = [5, 0.4, 15],
+		position = [0, 0, 0],
+		target = [0, 0, 3],
+		asSensor = false,
+		rotation = [0, 0, 0],
+		color = "#1EA896",
+		...rest
+	} = props;
+
+	useEffect(() => {
+		if (!rigidBodyRef.current) return;
+		const body = rigidBodyRef.current as BodyState;
+		body.isConveyor = true;
+		body.conveyorVector = target;
+	}, [target]);
+
+	return (
+		<RigidBody ref={rigidBodyRef} position={position} rotation={rotation} type={"static"}>
+			<mesh {...rest}>
+				<boxGeometry args={size} />
+				<meshStandardMaterial color={color} />
+			</mesh>
+		</RigidBody>
+	);
+}

apps/examples/src/examples/Bodies/Stairs.tsx

@@ -0,0 +1,30 @@
+// creates a bridge static rigidbody
+import { RigidBody } from "@react-three/jolt";
+
+export function Stairs(props: any) {
+	const {
+		stairHeight = 0.4,
+		height = 7,
+		stairWidth = 1,
+		position = [0, 0, 0],
+		rotation = [0, 0, 0],
+		color = "#7A9E9F"
+	} = props;
+	const count = Math.ceil(height / stairHeight);
+	return (
+		<RigidBody
+			allowObstruction
+			obstructionTimelimit={2000}
+			position={position}
+			rotation={rotation}
+			type={"static"}
+		>
+			{Array.from({ length: count }, (_, i) => (
+				<mesh key={i} position={[0, 7 - i * stairHeight, i * stairWidth]}>
+					<boxGeometry args={[7, stairHeight, stairWidth]} />
+					<meshStandardMaterial color={color} />
+				</mesh>
+			))}
+		</RigidBody>
+	);
+}

apps/examples/src/examples/Bodies/Teleport.tsx

@@ -0,0 +1,38 @@
+// creates a bridge static rigidbody
+import { BodyState, RigidBody } from "@react-three/jolt";
+import { useRef, useEffect } from "react";
+
+export function Teleport(props: any) {
+	const rigidBodyRef = useRef();
+	const {
+		size = [5, 0.4, 5],
+		position = [0, 0, 0],
+		target = [5, 5, 5],
+		asSensor = false,
+		rotation = [0, 0, 0],
+		color = "#151E3F",
+		...rest
+	} = props;
+
+	useEffect(() => {
+		if (!rigidBodyRef.current) return;
+		const body = rigidBodyRef.current as BodyState;
+		body.isTeleporter = true;
+		body.teleporterVector = target;
+	}, [target]);
+
+	return (
+		<RigidBody
+			ref={rigidBodyRef}
+			isSensor={asSensor}
+			position={position}
+			rotation={rotation}
+			type={"static"}
+		>
+			<mesh {...rest}>
+				<boxGeometry args={size} />
+				<meshStandardMaterial color={color} />
+			</mesh>
+		</RigidBody>
+	);
+}

apps/examples/src/examples/Bodies/Tunnel.tsx

@@ -0,0 +1,29 @@
+// creates a bridge static rigidbody
+import { RigidBody, type BodyState } from "@react-three/jolt";
+import { useRef, useEffect } from "react";
+
+export function Tunnel(props: any) {
+	const { position = [0, 0, 0], rotation = [0, 0, 0], color = "#151E3F" } = props;
+	const rigidBodyRef = useRef();
+	useEffect(() => {
+		if (!rigidBodyRef.current) return;
+		const body = rigidBodyRef.current as BodyState;
+		body.allowObstruction = false;
+	}, []);
+	return (
+		<RigidBody ref={rigidBodyRef} position={position} rotation={rotation} type={"static"}>
+			<mesh position={[0, 7, 0]}>
+				<boxGeometry args={[7, 1, 30]} />
+				<meshStandardMaterial color={color} />
+			</mesh>
+			<mesh position={[3.5, 3.5, 0]}>
+				<boxGeometry args={[1, 7, 30]} />
+				<meshStandardMaterial color={color} />
+			</mesh>
+			<mesh position={[-3.5, 3.5, 0]}>
+				<boxGeometry args={[1, 7, 30]} />
+				<meshStandardMaterial color={color} />
+			</mesh>
+		</RigidBody>
+	);
+}

apps/examples/src/examples/BoundBoxes.tsx

@@ -0,0 +1,154 @@
+import {
+	useConstraint,
+	RigidBody
+	//useSetInterval,
+	//Raw,
+	//useJolt,
+	//BodyState,
+} from "@react-three/jolt";
+import {
+	//useEffect,
+	useRef
+} from "react";
+//import * as THREE from 'three';
+
+/*const rotateQuaternion = (
+  quaternion: THREE.Quaternion,
+  axis: string,
+  rotation: number
+): THREE.Quaternion => {
+  const euler = new THREE.Euler();
+  euler.setFromQuaternion(quaternion);
+
+  switch (axis) {
+    case 'x':
+      euler.x += THREE.MathUtils.degToRad(rotation);
+      break;
+    case 'y':
+      euler.y += THREE.MathUtils.degToRad(rotation);
+      break;
+    case 'z':
+      euler.z += THREE.MathUtils.degToRad(rotation);
+      break;
+    default:
+      console.error('Invalid axis specified');
+      break;
+  }
+
+  const newQuaternion = new THREE.Quaternion();
+  newQuaternion.setFromEuler(euler);
+
+  return newQuaternion;
+};
+*/
+
+export function BoundBoxes() {
+	const body1Ref = useRef(null);
+	const body2Ref = useRef(null);
+	const body3Ref = useRef(null);
+	const body4Ref = useRef(null);
+	const body5Ref = useRef(null);
+	const body6Ref = useRef(null);
+	const body7Ref = useRef(null);
+	const body8Ref = useRef(null);
+	//  const body9Ref = useRef<RigidBody>(null);
+	// const body10Ref = useRef<RigidBody>(null);
+	//const { physicsSystem } = useJolt();
+
+	useConstraint("slider", body1Ref, body2Ref, {
+		min: 6,
+		max: 15
+	});
+
+	useConstraint("distance", body3Ref, body4Ref, {
+		min: 10,
+		max: 30
+	});
+	// distance constraint test for the rigging system
+	useConstraint("distance", body6Ref, body5Ref, {
+		min: 0,
+		max: 2
+	});
+	// motorized slider constraint to test rotation of parent
+	//const sliderRef =
+	useConstraint("slider", body7Ref, body8Ref, {
+		motor: { target: 6 }
+	});
+
+	//const intervals = useSetInterval();
+
+	//let current = 1;
+	/*
+  useEffect(() => {
+    intervals.setInterval(() => {
+      //rotate the slider core
+      // get the current rotation
+      //@ts-ignore
+      const baseQuat = body7Ref.current!.rotation;
+      const newQuat = rotateQuaternion(baseQuat, 'x', 15);
+      //@ts-ignore
+      body7Ref.current!.rotation = newQuat;
+      console.log('rotating', newQuat);
+
+      //@ts-ignore
+      sliderRef.current.SetTargetPosition(current++);
+      console.log('setting target position', current);
+      //@ts-ignore
+      physicsSystem.bodyInterface.ActivateBody(body8Ref.current.body.GetID());
+    }, 3000);
+  }, []);
+  */
+
+	return (
+		<>
+			<RigidBody ref={body1Ref} position={[10, 15, 0]} mass={1}>
+				<mesh>
+					<boxGeometry args={[4, 4, 4]} />
+					<meshStandardMaterial color="#7F055F" />
+				</mesh>
+			</RigidBody>
+			<RigidBody position={[12, 5, 5]} ref={body2Ref} mass={2}>
+				<mesh>
+					<sphereGeometry args={[4, 32, 32]} />
+					<meshStandardMaterial color="#FF9505" />
+				</mesh>
+			</RigidBody>
+			<RigidBody ref={body3Ref} position={[15, 2, 10]} mass={1}>
+				<mesh>
+					<boxGeometry args={[4, 4, 4]} />
+					<meshStandardMaterial color="#EC4E20" />
+				</mesh>
+			</RigidBody>
+			<RigidBody ref={body4Ref} position={[15, 2, 15]} mass={1}>
+				<mesh>
+					<boxGeometry args={[4, 4, 4]} />
+					<meshStandardMaterial color="#45F0DF" />
+				</mesh>
+			</RigidBody>
+			<RigidBody ref={body5Ref} type={"rig"} position={[15, 2, 20]} mass={1}>
+				<mesh>
+					<sphereGeometry args={[4, 8, 8]} />
+					<meshStandardMaterial wireframe color="#ff521b" />
+				</mesh>
+			</RigidBody>
+			<RigidBody ref={body6Ref} position={[15, 2, 20]} mass={1}>
+				<mesh>
+					<sphereGeometry args={[1, 8, 8]} />
+					<meshStandardMaterial color="#69DDFF" />
+				</mesh>
+			</RigidBody>
+			<RigidBody ref={body7Ref} position={[-15, 1, 20]} type={"static"} mass={1}>
+				<mesh>
+					<sphereGeometry args={[1, 8, 8]} />
+					<meshStandardMaterial color="#320A28" />
+				</mesh>
+			</RigidBody>
+			<RigidBody ref={body8Ref} position={[-15, 3, 24]} mass={1}>
+				<mesh>
+					<boxGeometry args={[1, 1, 2]} />
+					<meshStandardMaterial color="#8E443D" />
+				</mesh>
+			</RigidBody>
+		</>
+	);
+}