feat: move Floor component to @react-three/jolt-addons

apps/examples/src/examples/CubeHeap.tsx

@@ -6,10 +6,10 @@ import {
   useJolt,
   useSetInterval,
 } from '@react-three/jolt';
+import { Floor } from '@react-three/jolt-addons';
 import { useControls } from 'leva';
 import { useEffect, useRef } from 'react';
 import * as THREE from 'three';
-import { Floor } from '../components/Floor';
 
 // this is going to be the instancedMesh version
 export function CubeHeap() {
@@ -86,7 +86,10 @@ export function CubeHeap() {
         <boxGeometry args={[1, 1, 1]} />
         <meshStandardMaterial color="#F2CC8F" />
       </InstancedRigidBodyMesh>
-      <Floor position={[0, 0, 0]} size={100} />
+
+      <Floor position={[0, 0, 0]} size={100}>
+        <meshStandardMaterial />
+      </Floor>
     </>
   );
 }

apps/examples/src/examples/JustBoxes.tsx

@@ -1,13 +1,16 @@
 import { RigidBody } from '@react-three/jolt';
-import { Floor } from '../components/Floor';
+import { Floor } from '@react-three/jolt-addons';
 
 export function JustBoxes() {
   //const { physicsSystem } = useJolt();
 
   // draw 5 cubes that land on the floor
   return (
     <>
-      <Floor position={[0, 0, 0]} size={100} />
+      <Floor position={[0, 0, 0]} size={100}>
+        <meshStandardMaterial />
+      </Floor>
+
       <RigidBody position={[0, 1, 0]}>
         <mesh>
           <boxGeometry args={[1, 1, 1]} />

apps/examples/src/examples/RaycastSimpleDemo.tsx

@@ -10,9 +10,9 @@ import {
   useSetTimeout,
   useUnmount,
 } from '@react-three/jolt';
+import { Floor } from '@react-three/jolt-addons';
 import { useEffect, useRef } from 'react';
 import * as THREE from 'three';
-import { Floor } from '../components/Floor';
 
 export function RaycastSimpleDemo() {
   const raycaster: Raycaster = useRaycaster();
@@ -185,7 +185,10 @@ export function RaycastSimpleDemo() {
   // draw 5 cubes that land on the floor
   return (
     <>
-      <Floor position={[0, 0, 0]} color={'#fdf0d5'} size={100} />
+      <Floor position={[0, 0, 0]} size={100}>
+        <meshStandardMaterial color="#fdf0d5" />
+      </Floor>
+
       <RigidBody position={[0, 1, 0]}>
         <mesh castShadow>
           <boxGeometry args={[1, 1, 1]} />

apps/examples/tsconfig.json

@@ -20,6 +20,6 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src", "public/jolt"],
+  "include": ["src", "public/jolt", "../../packages/react-three-jolt-addons/src/components/Floor.tsx"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

packages/react-three-jolt-addons/rollup.config.mjs

@@ -5,6 +5,7 @@ import path from 'path';
 import filesize from 'rollup-plugin-filesize';
 
 const external = [
+    '@react-three/jolt',
     'jolt-physics',
     '@react-three/fiber',
     '@react-three/drei',

packages/react-three-jolt-addons/src/components/Floor.tsx

@@ -0,0 +1,22 @@
+import { ThreeElements } from '@react-three/fiber';
+import { RigidBody, Vector3Tuple } from '@react-three/jolt';
+import React from 'react';
+
+export type FloorProps = {
+    size?: number;
+    position?: Vector3Tuple;
+    rotation?: Vector3Tuple;
+    children?: React.ReactNode;
+} & ThreeElements['mesh'];
+
+export const Floor = (props: FloorProps) => {
+    const { size = 20, position = [0, 0, 0], rotation = [0, 0, 0], ...rest } = props;
+
+    return (
+        <RigidBody position={position} rotation={rotation} type="static">
+            <mesh receiveShadow scale-y={1} {...rest}>
+                <boxGeometry args={[size, 0.5, size]} />
+            </mesh>
+        </RigidBody>
+    );
+};

packages/react-three-jolt-addons/src/components/MeshFloor.tsx

@@ -0,0 +1,44 @@
+// MeshFloor for Jolt
+/* NOTE this WILL NOT work well with a worker version 
+this script creates and uses a JOLT Body and passes it to the
+physics system. In a worker the system will be in isolation and 
+it's unclear if a body is a transferable object.
+EXPECT this to fail in a worker. 
+However, it is a good example of how to create/use jolt directly so I'm using it
+if You really wanted a body like this, probably use the heigtfield instead
+*/
+//import { RigidBody } from './RidgedBody';
+import { RigidBody, createMeshFloor, createMeshFromShape } from '@react-three/jolt';
+import { useEffect, useRef } from 'react';
+import { useJolt } from '@react-three/jolt';
+import * as THREE from 'three';
+import React from 'react';
+
+export const MeshFloor = ({ size = 20, position = [0, 0, 0], ...rest }) => {
+    const meshRef = useRef<THREE.Mesh>(null);
+    const { bodySystem } = useJolt();
+
+    useEffect(() => {
+        // generate the jolt body
+        const floorBodySettings = createMeshFloor(30, 1, 4, 0, 5, 0);
+        const rawBody = bodySystem.bodyInterface.CreateBody(floorBodySettings);
+
+        //now we can make a mesh using the body with the helper
+        const floorMesh = createMeshFromShape(rawBody.GetShape());
+        if (meshRef.current) {
+            meshRef.current.geometry = floorMesh;
+            // push the body onto the system
+            bodySystem.addExistingBody(meshRef.current, rawBody, {
+                bodyType: 'static'
+            });
+        }
+    }, []);
+
+    return (
+        <RigidBody position={position} type="static">
+        <mesh ref={meshRef} position-y={0.1} {...rest}>
+            <boxGeometry args={[size, 0.5, size]} />
+            <meshStandardMaterial color="grey" />
+        </mesh>
+    );
+};

packages/react-three-jolt-addons/src/components/index.ts

@@ -0,0 +1 @@
+export * from './Floor';

packages/react-three-jolt-addons/src/index.ts

@@ -1,3 +1,3 @@
 import * as _fiber from '@react-three/fiber';
 
-export const placeholder = 0;
+export * from './components';

packages/react-three-jolt-controllers/rollup.config.mjs

@@ -5,6 +5,7 @@ import path from 'path';
 import filesize from 'rollup-plugin-filesize';
 
 const external = [
+    '@react-three/jolt',
     'jolt-physics',
     '@react-three/fiber',
     '@react-three/drei',

packages/react-three-jolt/src/index.ts

@@ -5,6 +5,7 @@ export * from './hooks';
 export * from './utils';
 export * from './components';
 export * from './constants';
+export type { Vector3Tuple, Vector4Tuple } from './types'
 
 // move this to own package
 export * from './useCommand';