https://github.com/nieyuyao/three-utils-simple-example
https://github.com/nieyuyao/three-utils-simple-example
geojson loop-subdivision subdivision threejs
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/nieyuyao/three-utils-simple-example
- Owner: nieyuyao
- Created: 2024-02-20T08:34:55.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-06T06:08:52.000Z (about 2 years ago)
- Last Synced: 2025-09-06T15:52:29.194Z (10 months ago)
- Topics: geojson, loop-subdivision, subdivision, threejs
- Language: TypeScript
- Homepage:
- Size: 2.18 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
An simple example of smooth GeoJSON and Loop Subdivision
#### Steps
```
pnpm i
pnpm dev
```
#### Loop Subdivision
```javascript
// ...
const geo = new THREE.BoxGeometry(10, 10, 10)
const subdividedGeo = loopSubdivide(geo.toNonIndexed(), params)
subdividedBox.geometry = subdividedGeo
// ...
```
- before
- after
#### Simplify GeoJSON
```javascript
// ...
const group = new THREE.Group()
const simplified = simplifyGeo(geoJson)
simplified.features.forEach(feature => {
const geometry = feature.geometry as Polygon
const projection = d3
.geoMercator()
.center(feature.properties?.center as [number, number] ?? [0, 0])
.translate([0, 0])
geometry.coordinates.forEach((line) => {
const positions: number[] = []
line.forEach(position => {
const proj = projection(position as [number, number]) || [0, 0]
const [x, y] = proj
positions.push(x, -y, 0)
})
const geo = new LineGeometry()
geo.setPositions(positions)
const mesh = new Line2(geo, mat)
mesh.computeLineDistances()
group.add(mesh)
})
})
scene.add(group)
// ...
```
- before
- after
