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/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';