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>
+ </>
+ );
+}