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

WebGPU

Rover edge projection

Installation

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

API

See the docs site for full API documentation.

The same documentation is also available as markdown in API.md.

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 );