https://github.com/mcgode/three-js-edge-split-modifier

A geometry modifier for generating an indexed THREE.BufferGeometry, with faces split on sharp edges
https://github.com/mcgode/three-js-edge-split-modifier

Last synced: 2 months ago
JSON representation

A geometry modifier for generating an indexed THREE.BufferGeometry, with faces split on sharp edges

• Host: GitHub
• URL: https://github.com/mcgode/three-js-edge-split-modifier
• Owner: Mcgode
• License: mit
• Created: 2020-10-16T13:52:03.000Z (about 5 years ago)
• Default Branch: main
• Last Pushed: 2020-12-08T11:06:19.000Z (almost 5 years ago)
• Last Synced: 2025-07-09T14:05:39.882Z (4 months ago)
• Language: JavaScript
• Homepage:
• Size: 2.65 MB
• Stars: 7
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# three.js edge split modifier

**This library has been deprecated.**

It was added to [three.js examples](https://threejs.org/examples/#webgl_modifier_edgesplit), 

and will only be maintained there.

This package is a geometry modifier for three.js

This modifier takes a geometry as input, and outputs an indexed BufferGeometry

with faces split at sharp edges.

## Example

We take a flat shaded model:

![Flat shading](./screenshots/flatShading.png?raw=true)

Using the classic smooth shading doesn't give us the type of result we expect

(the sharp edges are smoothed, while they shouldn't):

![Smooth shading](./screenshots/smoothShading.png?raw=true)

Using the edge split modifier, we split the faces sharp edges to achieve a 

better smooth shading:

![Edge split + smooth shading](./screenshots/edgeSplitSmooth.png?raw=true) 

## Browser dependencies

If you want to use this package in a browser, you will need to import three.js

along its BufferGeometryUtils example JS file.