About

Solid mesh modeling for three.js.

Featrues

• Manipulate BufferGeometry directly.
• Support vertex color and mutli-material.
• Dump mesh with indexed BufferGeometry.

Examples

• Gradient Crown (vertex color)
• Gallery Frame (mutli-material)
• Extrude Inwards (set operations)

Installation

Via npm ( npm i ycw/three-csg-modeller#v0.1.10 )

import { CSGModeller } from "three-csg-modeller"

Via cdn

import { CSGModeller } from "https://cdn.jsdelivr.net/gh/ycw/[email protected]/dist/lib.esm.js"

Usage

// Ex. Subtract a box from a sphere.
const modeller = new CSGModeller(THREE);
const sphereModel = modeller.model(new THREE.Mesh(
  new THREE.SphereBufferGeometry(0.5),
  new THREE.MeshLambertMaterial({ color: "black" })
));
const boxModel = modeller.model(new THREE.Mesh(
  new THREE.BoxBufferGeometry(0.5, 0.5, 1),
  new THREE.MeshLambertMaterial({ color: "white" })
));
const model = sphereModel.subtract(boxModel);
const mesh = model.build();

Live result: Basic Subtract. See also: Basic Multi-Material.

API

CSGModeller

new CSGModeller(THREE)

• Construct a modeller. THREE is the three.js lib.

.model(mesh)

• Create a Model instance from a mesh whose .geometry must be a BufferGeometry.

Model

.union(model)

• Return a new model holding result of this ∪ model.

.subtract(model)

• Return a new model holding result of this − model.

.intersect(model)

• Return a new model holding result of this ∩ model.

.applyMatrix4(matrix)

• Return a new transformed model. Param matrix is a THREE.Matrix4.

.build()

• Build and return a mesh holding an indexed BufferGeometry.

Credits

• evanw/csg.js
• mrdoob/three.js

License

MIT