three-edge-projection

Edge projection based on three-mesh-bvh to extract visible projected lines along the y-axis into flattened line segments for scalable 2d rendering. Additonally includes a silhouette mesh generator based on clipper2-js to merge flattened triangles.

Examples

Rover edge projection

Lego edge projection

Silhouette projection

Floor plan projection

Planar intersection

Use

Generator

More granular API with control over when edge trimming work happens.

const generator = new ProjectionGenerator();
generator.generate( geometry );

let result = task.next();
while ( ! result.done ) {

	result = task.next();

}

const lines = new LineSegments( result.value.getVisibleLineGeometry(), material );
scene.add( lines );

Promise

Simpler API with less control over when the work happens.

const generator = new ProjectionGenerator();
const result = await generator.generateAsync( geometry );
const mesh = new Mesh( result.getVisibleLineGeometry(), material );
scene.add( mesh );

API

ProjectionGenerator

.sortEdges

sortEdges = true : Boolean

Whether to sort edges along the Y axis before iterating over the edges.

.iterationTime

iterationTime = 30 : Number

How long to spend trimming edges before yielding.

.angleThreshold

angleThreshold = 50 : Number

The threshold angle in degrees at which edges are generated.

.includeIntersectionEdges

includeIntersectionEdges = true : Boolean

Whether to generate edges representing the intersections between triangles.

.generate

*generate(
	geometry: Object3D | BufferGeometry,
	options: {
		onProgress: ( message: string ) => void,
	}
): {
	getVisibleLineGeometry(): BufferGeometry,
	getHiddenLineGeometry(): BufferGeometry,
}

Generate the edge geometry using a generator function.

.generateAsync

generateAsync(
	geometry: Object3D | BufferGeometry,
	options: {
		onProgress: ( message: string ) => void,
		signal: AbortSignal,
	}
): Promise<{
	getVisibleLineGeometry(): BufferGeometry,
	getHiddenLineGeometry(): BufferGeometry,
}>

Generate the geometry with a promise-style API.

SilhouetteGenerator

Used for generating a projected silhouette of a geometry using the clipper2-js project. Performing these operations can be extremely slow with more complex geometry and not always yield a stable result.

.iterationTime

iterationTime = 10 : Number

How long to spend trimming edges before yielding.

.doubleSided

doubleSided = false : Boolean

If false then only the triangles facing upwards are included in the silhouette.

.sortTriangles

sortTriangles = false : Boolean

Whether to sort triangles and project them large-to-small. In some cases this can cause the performance to drop since the union operation is best performed with smooth, simple edge shapes.

.output

output = OUTPUT_MESH | OUTPUT_LINE_SEGMENTS | OUTPUT_BOTH

Whether to output mesh geometry, line segments geometry, or both in an array ( [ mesh, line segments ] );

.generate

*generate(
	geometry : BufferGeometry,
	options : {
		onProgress: ( percent : Number ) => void,
	}
) : BufferGeometry

Generate the geometry using a generator function.

.generateAsync

generateAsync(
	geometry : BufferGeometry,
	options : {
		onProgress: ( percent : Number ) => void,
		signal: AbortSignal,
	}
) : Promise<BufferGeometry>

Generate the silhouette geometry with a promise-style API.

PlanarIntersectionGenerator

.plane

plane : Plane

Plane that defaults to y up plane at the origin.

.generate

generate( geometry : MeshBVH | BufferGeometry ) : BufferGeometry

Generates a geometry of the resulting line segments from the planar intersection.