Package Exports

r3f-package
r3f-package/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (r3f-package) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

R3F Package

A reusable React Three Fiber scene component package.

Installation

npm install r3f-package

Usage

import { Canvas } from '@react-three/fiber';
import { Scene3D } from 'r3f-package';

function App() {
  return (
    <Canvas>
      <Scene3D 
        boxColor="#ff0000"
        sphereColor="#0000ff"
        rotationSpeed={1}
        position={[0, 0, 0]}
        scale={1}
        lights={true}
      />
    </Canvas>
  );
}

Props

Scene3D Component

Prop	Type	Default	Description
boxColor	string	'#ff0000'	Color of the animated box
sphereColor	string	'#0000ff'	Color of the animated sphere
rotationSpeed	number	1	Speed of rotation animations
position	[x, y, z]	[0, 0, 0]	Position of the entire scene
scale	number	1	Scale of the entire scene
lights	boolean	true	Whether to include default lighting

Features

Animated rotating box
Floating animated sphere
Ground plane
Default lighting setup
Configurable colors and animations
Responsive scaling and positioning

Development

Install dependencies:

npm install

Build the package:

npm run build

For development with hot reload:

npm run dev