Loader

The Loader component is a 3D loading animation that comes standard with three different models that can be easily dropped into your project.

3D Loader

The

3D Loader

component comes with two themes: light (default) and dark

Example

<Loader theme="light" />
<Loader theme="dark" />

Color

With the

color

prop, you have the power to define the color of your 3D model.

Scale

By using the

scale

prop, you can enter numerical values that determine the model‘s size.

Rotation Axis and Direction

Specify the model‘s rotation axis (x, y, or z) with the

rotationAxis

prop. Use the

rotationDirection

prop to set the spin direction to either 'positive' or 'negative'.

Animation and Speed

Set the

easeAnimation

prop to true to enable a easing spinning animation. Control the model's rotation speed by inputting numerical values into the

speed

prop.

Theme and Material

Change the model's default color and material with the

theme

prop by choosing either 'dark' or 'light'. For more customization, use the

material

prop to pass any ThreeJS material.

Wireframe and Matcap

The

wireframe

prop, when set to true, enables wireframe rendering for the model (If applicable). Use the

matcapIndex

and

matcapSize

props to apply matcaps with the

useMatcapTexture

function from React-Three-Drei.

Loader Type

The model prop determines the specific child loader component to be rendered. It currently accepts an integer between 1 and 3, with 1 being the default.

Example

<Loader model={2} />

Position

The

Position

prop allows the ability to change the X, Y, and Z properties of the Loader. This prop accepts an Array of 3 values,

[X, Y, Z]

. By default the position is set to

[0,0,0]

Note: The easing animation feature is currently in an experimental phase, and it may behave unpredictably if rendered for a long time.

Note: You can directly import specific loader models like

HexagonLoader

ChipLoader

, and

MeshLoader

for additional customization options without supplying the

model

prop.

Code Sample

Example

Open Sandbox

import { Canvas } from "@react-three/fiber";
import { Loader } from "r3dy";

export default function App() {
  return (
      <Canvas>
        <Loader />
      </Canvas>
  );
}