Skip to content

shaoruu/three-extruded-image

Repository files navigation

three-extruded-image

View it here!!

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

NPM Version

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!