three-deformer

A lightweight and flexible library for applying geometric deformers to 3D meshes in Three.js.

Supports common deformations like bend, twist, and taper, and allows you to create custom deformers with ease.

Live Example

Features

• Built-in deformers: Bend, Twist, Taper
• Custom deformer support with simple function-based interface
• Chain multiple deformers together
• Fully typed (TypeScript)
• Works with BufferGeometry and SkinnedMesh

Installation

npm install three-deformer

Usage

Simple usage

import * as THREE from 'three';
import { Deformer } from 'three-deformer';

// Create your mesh
const mesh = new THREE.Mesh(geometry, material);

// Create a deformer instance
const deformer = new Deformer(mesh);

// Add Deformer
deformer.addBendDeformer();

// Apply Deformers
deformer.applyDeformers();

// change weight
deformer.setWeight('bend', 0.5);

Update matrix / option

Use updateMatrix and updateOption to change the transformation matrix or options of a specific deformer dynamically.

deformer.addTwistDeformer(
  { axis: 'x', invert: true, strength: 2 },
  new THREE.Matrix4().makeTranslation(0, 1, 0),
);
deformer.applyDeformers();

deformer.updateMatrix('twist', new THREE.Matrix4().makeTranslation(1, 1, 1));
deformer.updateOption('twist', { axis: 'y', strength: 1 });

deformer.setWeight('twist', 0.5);

Custom deformer

You can define your own deformation logic using addCustomDeformer:

deformer.addCustomDeformer(
  'wave',
  (vertex, option) => {
    const { amplitude = 0.5, frequency = 2 } = option;
    vertex.y += Math.sin(vertex.x * frequency) * amplitude;
    return vertex;
  },
  { amplitude: 0.5, frequency: 2 },
);
deformer.applyDeformers();