https://github.com/shaoruu/three-extruded-image

Extrude any transparent background PNG to ThreeJS mesh
https://github.com/shaoruu/three-extruded-image

baltaazr bruh shaoruu threejs typescript voxelize webdev

Last synced: about 1 month ago
JSON representation

Extrude any transparent background PNG to ThreeJS mesh

• Host: GitHub
• URL: https://github.com/shaoruu/three-extruded-image
• Owner: shaoruu
• Created: 2024-06-21T22:40:58.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-07-12T03:04:45.000Z (6 months ago)
• Last Synced: 2024-07-13T01:51:56.171Z (6 months ago)
• Topics: baltaazr, bruh, shaoruu, threejs, typescript, voxelize, webdev
• Language: TypeScript
• Homepage: https://extrude.create.town
• Size: 5.58 MB
• Stars: 3
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        



# `three-extruded-image`

[View it here!!](https://extrude.create.town)

Given a transparent background `*.png`, construct a [ThreeJS](https://threejs.org) mesh of that image, extruded. 

![NPM Version](https://img.shields.io/npm/v/three-extruded-image)

![](/assets/animation.gif)



> [!NOTE]

> This library is in serving of [Voxelize](https://github.com/voxelize/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

```bash

pnpm install three-extruded-image

```

# Usage

```typescript

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

```bash

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

cd three-extruded-image

pnpm install

pnpm dev

# visit http://localhost:5173

```

Shoutout to [@manthrax](https://discourse.threejs.org/u/manthrax/summary) for the help!