three-edge-projection - GitLite

KO | EN

gitlite — search

#javascript #typescript #llm #go #android #rust #deep-learning #linux #java #windows #vue #security #ios #openai

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

# Installation Guide

1. Get the code

git clone https://github.com/gkjohnson/three-edge-projection

Downloads the entire project code from GitHub to your computer.

cd three-edge-projection

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

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

Downloads and installs the libraries listed in package.json.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

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