R3f-package NPM

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

react three.js react-three-fiber 3D

1.0.1

9 months ago

1.0.0

9 months ago