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

WebGPU

Rover edge projection

Installation

npm install github:@gkjohnson/three-edge-projection

API

See API.md for full API documentation.

Use

Generator

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

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

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( scene );
const mesh = new Mesh( result.getVisibleLineGeometry(), material );
scene.add( mesh );

Visibility Culling

To visibility cull a scene before generation you can use MeshVisibilityCuller before running the projection step.

const input = new MeshVisibilityCuller( renderer ).cull( scene );
const result = await generator.generateAsync( scene );
const mesh = new Mesh( result.getVisibleLineGeometry(), material );
scene.add( mesh );