three-extruded-image

View it here!!

Given a transparent background *.png, construct a ThreeJS mesh of that image, extruded.

[!NOTE] This library is in serving of Voxelize, a fullstack voxel engine. Although basic needs is met, there is still some work needed to make it perfect, any PRs are welcomed!

Installation

pnpm install three-extruded-image

Usage

import { ExtrudedImage, type ExtrudedImageOptions } from 'three-extruded-image';

const options: ExtrudedImageOptions = {
  thickness: 0.3,
  size: 3,
  alphaThreshold: 128,
};
const extrudedImage = new ExtrudedImage(image, options);

scene.add(extrudedImage);

| Option | Type | Description | |--------|------|-------------| | thickness | number | The depth of the extrusion | | size | number | The overall size of the extruded image | | alphaThreshold | number | The alpha value threshold for determining transparency | | materialParams? | object | Additional material parameters | | materialParams.color? | THREE.ColorRepresentation | The color of the material | | customMaterial? | THREE.MeshBasicMaterial | THREE.MeshStandardMaterial | Custom material to override default material |

Development

git clone [email protected]:shaoruu/three-extruded-image.git

cd three-extruded-image
pnpm install

pnpm dev

# visit http://localhost:5173

Shoutout to @manthrax for the help!