three-edge-projection

KO | EN

gitlite — search

#python #react #ai #typescript #llm #golang #go #linux #java #nodejs #awesome-list #vue #security #open-source

three-edge-projection

(★ 349)

Visible geometry edge projection and flattening based on three-mesh-bvh.

File Explorer

Download Latest Version (.zip)

- - examples-build.yml
  - node.js.yml
- FUNDING.yml
- banner.png
- - metal.frag
- bimProjection.html
- bimProjection.js
- edgeProjection.html
- edgeProjection.js
- edgeProjectionWebGPU.html
- edgeProjectionWebGPU.js
- floorProjection.html
- floorProjection.js
- perspectiveProjection.html
- perspectiveProjection.js
- planarIntersection.html
- planarIntersection.js
- silhouetteProjection.html
- silhouetteProjection.js
- - bvhcastEdges.js
  - compressPoints.js
  - generateEdges.js
  - generateIntersectionEdges.js
  - geometryUtils.js
  - getAllMeshes.js
  - getProjectedLineOverlap.js
  - getProjectedOverlaps.js
  - getSizeSortedTriList.js
  - LineObjectsBVH.js
  - nextFrame.js
  - overlapUtils.js
  - planeUtils.js
  - ProjectionEdge.js
  - triangleIsInsidePaths.js
  - triangleLineUtils.js
  - trimToBeneathTriPlane.js
- - index.js
  - MeshVisibilityCuller.js
  - ProjectionGenerator.js
  - ProjectionGeneratorBVHComputeData.js
- - silhouetteAsync.worker.js
  - SilhouetteGeneratorWorker.js
- EdgeGenerator.js
- index.js
- MeshVisibilityCuller.js
- PlanarIntersectionGenerator.js
- ProjectionGenerator.js
- SilhouetteGenerator.js
- Utils.getProjectedLineOverlap.test.js
- Utils.triangleLineUtils.test.js
- Utils.trimToBeneathTriPlane.test.js
.editorconfig
.gitignore
API.md
CHANGELOG.md
eslint.config.js
jsdoc2md.config.js
LICENSE
package-lock.json
package.json
README.md
vite.config.js
vitest.config.js

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# three-edge-projection

[![build](https://img.shields.io/github/actions/workflow/status/gkjohnson/three-edge-projection/node.js.yml?style=flat-square&label=build&branch=main)](https://github.com/gkjohnson/three-edge-projection/actions)
[![github](https://flat.badgen.net/badge/icon/github?icon=github&label)](https://github.com/gkjohnson/three-edge-projection/)
[![twitter](https://flat.badgen.net/badge/twitter/@garrettkjohnson/?icon&label)](https://twitter.com/garrettkjohnson)
[![sponsors](https://img.shields.io/github/sponsors/gkjohnson?style=flat-square&color=1da1f2)](https://github.com/sponsors/gkjohnson/)

![](https://raw.githubusercontent.com/gkjohnson/three-edge-projection/main/docs/banner.png)

Edge projection based on [three-mesh-bvh](https://github.com/gkjohnson/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](https://www.npmjs.com/package/clipper2-js) to merge flattened triangles.

# Examples

[Rover edge projection](https://gkjohnson.github.io/three-edge-projection/edgeProjection.html)

[Lego edge projection](https://gkjohnson.github.io/three-edge-projection/edgeProjection.html#lego)

[Silhouette projection](https://gkjohnson.github.io/three-edge-projection/silhouetteProjection.html)

[Floor plan projection](https://gkjohnson.github.io/three-edge-projection/floorProjection.html)

[Planar intersection](https://gkjohnson.github.io/three-edge-projection/planarIntersection.html)

### WebGPU

[Rover edge projection](https://gkjohnson.github.io/three-edge-projection/edgeProjectionWebGPU.html)

# Installation

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

# API

See [API.md](./API.md) for full API documentation.

# Use

**Generator**

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

```js
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.

```js
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.

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

three-edge-projection

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

three-edge-projection

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

Download README