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 git@github.com:shaoruu/three-extruded-image.git

cd three-extruded-image
pnpm install

pnpm dev

# visit http://localhost:5173

Shoutout to @manthrax for the help!