asthree-react

A React component that renders 3D models with a real-time ASCII art effect. Drop it into any React project and get an interactive, customizable ASCII render of any .glb model — no configuration required.

Installation

npm i @defu13/asthree-react

Peer dependencies

Make sure these are installed in your project:

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

Quick start

You'll need two assets in your project's public folder:

• HDR lighting file — download a free one from Poly Haven and place it at public/hdr/studio.hdr. I recommend this studio light.
• 3D model — download a free .glb model from Sketchfab and place it at public/models/model.glb

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

export default function App() {
    return (
        <div className="h-screen w-screen">
            <AsthreeRender model="/models/model.glb" hdr="/hdr/studio.hdr" />
        </div>
    );
}

Props

| Prop | Type | Default | Description | |---|---|---|---| | model | string | "/models/model.glb" | Path or URL to a .glb model file | | hdr | string | /hdr/studio.hdr | Path or URL to a .hdr hdr light file | | preset | string | — | Preset code generated by the ASCII 3D Editor | | settings | object | — | Settings object (alternative to preset) | | width | string | "100%" | Canvas width | | height | string | "100%" | Canvas height | | enableOrbit | boolean | true | Allow rotating the model by dragging | | enableZoom | boolean | true | Allow zooming with the scroll wheel or pinch gesture |

Using presets

The easiest way to configure the render is through the ASCII 3D Editor — a visual tool that lets you adjust every parameter in real time and generates a short preset code you can copy and paste directly into the preset prop.

<AsthreeRender
    model="/models/model.glb"
    hdr="/hdr/studio.hdr"
    preset="AQQh_zNmGQwfAfQiANI"
/>

The preset encodes only the values that differ from the defaults, so codes stay short even with many customizations.

Manual settings

If you prefer to pass settings as an object instead of a preset string:

<AsthreeRender
    model="/models/model.glb"
    hdr="/hdr/studio.hdr"
    settings={{
        ascii: {
            cellSize: 12,
            tintColor: "#FF3366",
            glow: true,
            glowIntensity: 5,
        },
        model: {
            autoRotate: true,
            autoRotateSpeed: 0.3,
        },
    }}
/>

Partial objects are merged with the defaults, so you only need to specify what you want to change.

Disabling interaction

// Static render — no orbit, no zoom
<AsthreeRender
    model="/models/model.glb"
    hdr="/hdr/studio.hdr"
    preset="AQQh_zNmGQwfAfQiANI"
    enableOrbit={false}
    enableZoom={false}
/>

Tech stack

• React Three Fiber — React renderer for Three.js
• Three.js — 3D engine
• postprocessing — Post-processing effects pipeline
• Zustand — Lightweight state management

License

MIT © Yubal De Fuente