Installation

Requirements

• React 18 or newer
• A project that can serve static assets (.glb models, .hdr files) from a public folder — this works out of the box with Next.js, Vite, and Create React App

Install the package

$ npm i @defu13/asthree-react

Install peer dependencies

The component relies on the React Three Fiber ecosystem. These are listed as peer dependencies and must be installed alongside the package:

$ npm i react react-dom three @react-three/fiber @react-three/drei @react-three/postprocessing postprocessing

Assets you'll need

The component doesn't ship with a default model or lighting file — you provide your own.

HDR lighting file

Download a free HDR environment map, recommended from Poly Haven, and place it in your project's public folder:

public/hdr/studio.hdr

3D model file

Download a free .glb model, recommended from Sketchfab, and place it at:

public/models/model.glb

Only .glb is supported — if your model is in another format (.gltf with separate textures, .fbx, .obj), convert it to .glb first. Most 3D software and online converters support this.

It is recommended to use small files (15 MB or less) for better performance.

Verify the installation

Render the component with the default settings to confirm everything is wired up correctly:

import { AsthreeRender } from "@defu13/asthree-react";

export default function App() {
    return (
        <div style={{ width: "100%", height: "100%" }}>
            <AsthreeRender model="/models/model.glb" hdr="/hdr/studio.hdr" />
        </div>
    );
}

If you see a rotating ASCII render of your model, you're set up correctly. Continue to Usage to learn about presets, manual settings, and interaction controls.