Skip to content

Commit

Permalink
Merge remote-tracking branch 'upstream/main'
Browse files Browse the repository at this point in the history
  • Loading branch information
driescroons committed Aug 17, 2024
2 parents 770e7fa + 47bbc3c commit 45087bf
Show file tree
Hide file tree
Showing 22 changed files with 822 additions and 159 deletions.
4 changes: 2 additions & 2 deletions demo/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@
"@react-three/csg": "1.1.5",
"@react-three/drei": "9.74.14",
"@react-three/fiber": "8.9.1",
"@react-three/rapier": "1.2.1",
"@react-three/rapier-addons": "3.0.3",
"@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",
Expand Down
37 changes: 22 additions & 15 deletions demo/src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
import { Box, Environment, OrbitControls } from "@react-three/drei";
import { Canvas } from "@react-three/fiber";
import { Physics, RigidBody, useRapier } from "@react-three/rapier";
import { Physics, RigidBody } from "@react-three/rapier";
import { Perf } from "r3f-perf";
import {
createContext,
ReactNode,
StrictMode,
Suspense,
createContext,
useContext,
useState,
StrictMode,
useEffect
useState
} from "react";
import { NavLink, NavLinkProps, Route, Routes } from "react-router-dom";
import { ActiveCollisionTypesExample } from "./examples/active-collision-types/ActiveCollisionTypesExample";
import { AllCollidersExample } from "./examples/all-colliders/AllCollidersExample";
import { AllShapesExample } from "./examples/all-shapes/AllShapesExample";
import { ApiUsage } from "./examples/api-usage/ApiUsageExample";
Expand All @@ -22,24 +22,27 @@ import { Colliders } from "./examples/colliders/CollidersExample";
import { CollisionEventsExample } from "./examples/collision-events/CollisionEventsExample";
import { ComponentsExample } from "./examples/components/ComponentsExample";
import { ContactForceEventsExample } from "./examples/contact-force-events/ContactForceEventsExample";
import { ContactSkinExample } from "./examples/contact-skin/ContactSkinExample";
import { CradleExample } from "./examples/cradle/CradleExample";
import { Damping } from "./examples/damping/DampingExample";
import { DynamicTypeChangeExample } from "./examples/dynamic-type-change/DynamicTypeChangeExample";
import { ImmutablePropsExample } from "./examples/immutable-props/ImmutablePropsExample";
import { InstancedMeshes } from "./examples/instanced-meshes/InstancedMeshesExample";
import { InstancedMeshesCompound } from "./examples/instances-meshes-compound/InstancedMeshesCompoundExample";
import { Joints } from "./examples/joints/JointsExample";
import { Kinematics } from "./examples/kinematics/KinematicsExample";
import { LockedTransformsExample } from "./examples/locked-transforms/LockedTransformsExample";
import { ManualStepExample } from "./examples/manual-step/ManualStepExamples";
import { MeshColliderTest } from "./examples/mesh-collider-test/MeshColliderExample";
import { SensorsExample } from "./examples/sensors/SensorsExample";
import Shapes from "./examples/plinko/ShapesExample";
import { Transforms } from "./examples/transforms/TransformsExample";
import { LockedTransformsExample } from "./examples/locked-transforms/LockedTransformsExample";
import { OneWayPlatform } from "./examples/one-way-platform/OneWayPlatform";
import { PerformanceExample } from "./examples/performance/PeformanceExample";
import { DynamicTypeChangeExample } from "./examples/dynamic-type-change/DynamicTypeChangeExample";
import { StutteringExample } from "./examples/stuttering/StutteringExample";
import { ImmutablePropsExample } from "./examples/immutable-props/ImmutablePropsExample";
import Shapes from "./examples/plinko/ShapesExample";
import { RopeJointExample } from "./examples/rope-joint/RopeJointExample";
import { SensorsExample } from "./examples/sensors/SensorsExample";
import { SnapshotExample } from "./examples/snapshot/SnapshotExample";
import { OneWayPlatform } from "./examples/one-way-platform/OneWayPlatform";
import { SpringExample } from "./examples/spring/SpringExample";
import { StutteringExample } from "./examples/stuttering/StutteringExample";
import { Transforms } from "./examples/transforms/TransformsExample";

const demoContext = createContext<{
setDebug?(f: boolean): void;
Expand Down Expand Up @@ -92,6 +95,7 @@ const Floor = () => {

const routes: Record<string, ReactNode> = {
"": <OneWayPlatform />,
shapes: Shapes,
joints: <Joints />,
components: <ComponentsExample />,
cradle: <CradleExample />,
Expand All @@ -117,7 +121,11 @@ const routes: Record<string, ReactNode> = {
"dynamic-type-changes": <DynamicTypeChangeExample />,
stuttering: <StutteringExample />,
"immutable-props": <ImmutablePropsExample />,
snapshot: <SnapshotExample />
snapshot: <SnapshotExample />,
spring: <SpringExample />,
"rope-joint": <RopeJointExample />,
"active-collision-types": <ActiveCollisionTypesExample />,
"contact-skin": <ContactSkinExample />,
};

export const App = () => {
Expand Down Expand Up @@ -150,7 +158,6 @@ export const App = () => {
interpolate={interpolate}
debug={debug}
timeStep={1 / 60}
// erp={0.2}
>
<directionalLight
castShadow
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import { ActiveCollisionTypes } from "@dimforge/rapier3d-compat";
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";

const activeCollisionTypes =
ActiveCollisionTypes.DEFAULT | ActiveCollisionTypes.KINEMATIC_FIXED;

const Ball = () => {
const rb = useRef<RapierRigidBody>(null);

const [color, setColor] = useState("blue");

useFrame(({ clock: { elapsedTime } }) => {
if (!rb.current) return;

rb.current.setTranslation(
{ x: Math.sin(elapsedTime) * 3, y: 0, z: 0 },
true
);
});

return (
<RigidBody
ref={rb}
colliders="ball"
type="kinematicPosition"
activeCollisionTypes={activeCollisionTypes}
onCollisionEnter={() => setColor("green")}
onCollisionExit={() => setColor("blue")}
>
<Sphere>
<meshStandardMaterial color={color} />
</Sphere>
</RigidBody>
);
};

const Wall = () => {
return (
<RigidBody type="fixed" colliders="cuboid">
<Box args={[0.5, 5, 2]}>
<meshStandardMaterial color="white" transparent opacity={0.5} />
</Box>
</RigidBody>
);
};

export const ActiveCollisionTypesExample = () => {
return (
<group>
<Ball />
<Wall />
</group>
);
};
34 changes: 34 additions & 0 deletions demo/src/examples/contact-skin/ContactSkinExample.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import { Box, Sphere } from "@react-three/drei";
import { RapierRigidBody, RigidBody } from "@react-three/rapier";
import { useRef } from "react";

const Ball = () => {
const rb = useRef<RapierRigidBody>(null);

return (
<RigidBody ref={rb} colliders="ball" position={[0, 1, 0]} contactSkin={0.5}>
<Sphere castShadow>
<meshStandardMaterial color="orange" />
</Sphere>
</RigidBody>
);
};

const Floor = () => {
return (
<RigidBody type="fixed" colliders="cuboid" position={[0, -2, 0]}>
<Box args={[20, 1, 20]} receiveShadow>
<meshStandardMaterial color="white" />
</Box>
</RigidBody>
);
};

export const ContactSkinExample = () => {
return (
<group>
<Ball />
<Floor />
</group>
);
};
9 changes: 1 addition & 8 deletions demo/src/examples/cradle/CradleExample.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,9 @@ import {
RapierRigidBody,
RigidBody,
RigidBodyOptions,
useRapier,
useSphericalJoint
} from "@react-three/rapier";
import { useEffect, useRef } from "react";
import { useRef } from "react";
import { Demo } from "../../App";

const Rod = (props: RigidBodyOptions) => {
Expand All @@ -20,12 +19,6 @@ const Rod = (props: RigidBodyOptions) => {
[0, 0, 0]
]);

const { world } = useRapier();

useEffect(() => {
world.maxStabilizationIterations = 10;
}, []);

return (
<group>
<RigidBody ref={anchor} {...props} />
Expand Down
120 changes: 120 additions & 0 deletions demo/src/examples/rope-joint/RopeJointExample.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
import { Sphere, Box } from "@react-three/drei";
import {
BallCollider,
RapierRigidBody,
RigidBody,
RigidBodyOptions,
useRopeJoint
} from "@react-three/rapier";
import { useRef } from "react";
import { Demo } from "../../App";
import { Vector3 } from "@react-three/fiber";

const WALL_COLORS = ["#50514F", "#CBD4C2", "#FFFCFF", "#247BA0", "#C3B299"];

interface BoxRigidBodyProps extends RigidBodyOptions {
color: string;
}

interface BoxWallProps extends RigidBodyOptions {
height: number;
width: number;
}

interface RopeJointProps {
anchorPosition: Vector3;
ballPosition: Vector3;
ropeLength: number;
}

const Floor = (props: RigidBodyOptions) => {
return (
<RigidBody type="fixed" colliders="cuboid" position={[0, -1, 0]} {...props}>
<Box args={[20, 1, 20]}>
<meshStandardMaterial color="white" />
</Box>
</RigidBody>
);
};

const BoxRigidBody = (props: BoxRigidBodyProps) => {
return (
<RigidBody {...props}>
<Box castShadow receiveShadow>
<meshStandardMaterial color={props.color} />
</Box>
</RigidBody>
);
};

const BoxWall = ({ height, width, ...props }: BoxWallProps) => {
const wall = [];

for (let i = 0; i < height; i++) {
for (let j = 0; j < width; j++) {
const position: [number, number, number] = [j, i, 0];
wall.push(
<BoxRigidBody
key={`${i}-${j}`}
{...props}
density={2}
color={WALL_COLORS[i % 5]}
position={position}
/>
);
}
}

return (
<group name="wall" rotation-y={-0.7853982} position={[-1.8, 0, -1.8]}>
{wall.map((box, i) => box)}
</group>
);
};

const RopeJoint = ({
anchorPosition,
ballPosition,
ropeLength
}: RopeJointProps) => {
const anchor = useRef<RapierRigidBody>(null);
const ball = useRef<RapierRigidBody>(null);

useRopeJoint(anchor, ball, [[0, 0, 0], [0, 0, 0], ropeLength]);

return (
<group>
{/* Anchor */}
<RigidBody ref={anchor} position={anchorPosition} />

{/* Wrecking Ball */}
<RigidBody
position={ballPosition}
ref={ball}
restitution={1.2}
density={30}
colliders={false}
>
<Sphere args={[2]} receiveShadow castShadow>
<meshStandardMaterial metalness={1} roughness={0.3} />
</Sphere>

<BallCollider args={[2]} />
</RigidBody>
</group>
);
};

export const RopeJointExample: Demo = () => {
return (
<group position={[0, 0, 0]} scale={3}>
<Floor />
<BoxWall height={10} width={6} />
<RopeJoint
ropeLength={35}
anchorPosition={[0, 15, 0]}
ballPosition={[-8, 15, 8]}
/>
</group>
);
};
Loading

0 comments on commit 45087bf

Please sign in to comment.