https://github.com/whitestormjs/whs-component-terrain
WhitestormJS Terrain plugin
https://github.com/whitestormjs/whs-component-terrain
Last synced: 5 months ago
JSON representation
WhitestormJS Terrain plugin
- Host: GitHub
- URL: https://github.com/whitestormjs/whs-component-terrain
- Owner: WhitestormJS
- License: mit
- Created: 2016-09-19T13:16:05.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2016-11-16T06:37:30.000Z (over 8 years ago)
- Last Synced: 2025-01-09T17:14:04.945Z (6 months ago)
- Language: JavaScript
- Size: 22 MB
- Stars: 3
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# whs-component-Terrain
WhitestormJS Terrain plugin
# Usage
### With presets
```javascript
const terrain = new WHS.Terrain({
geometry: {
map: 'assets/terrain/default_terrain.png', // Heightmap image.
depth: 100, // Difference between min z and max z.
width: 256, // Terrain x resolution
height: 256 // Terrain y resolution
},
mass: 0, // Make it static.
physics: {
friction: 1,
restitution: 0
},
material: ['default', // Use preset.
[ // Array of textures for preset.
WHS.texture('assets/textures/terrain/dirt-512.jpg'),
WHS.texture('assets/textures/terrain/sand-512.jpg'),
WHS.texture('assets/textures/terrain/grass-512.jpg'),
WHS.texture('assets/textures/terrain/rock-512.jpg'),
WHS.texture('assets/textures/terrain/snow-512.jpg')
]
]
});
```
### Custom
```javascript
const terrain = new WHS.Terrain({
geometry: {
map: 'assets/terrain/default_terrain.png', // Heightmap image.
depth: 100, // Difference between min z and max z.
width: 256, // Terrain x resolution
height: 256 // Terrain y resolution
},
mass: 0, // Make it static.
physics: {
friction: 1,
restitution: 0
},
material: [
{
from: [0.1, 0.25],
to: [0.24, 0.26],
scale: 10.0,
texture: WHS.texture('assets/textures/terrain/dirt-512.jpg')
},
{
from: [0.24, 0.27],
to: [0.28, 0.31],
scale: 10.0,
texture: WHS.texture('assets/textures/terrain/sand-512.jpg')
},
{
from: [0.28, 0.32],
to: [0.35, 0.40],
scale: 20.0,
texture: WHS.texture('assets/textures/terrain/grass-512.jpg')
},
{
from: [0.30, 0.40],
to: [0.40, 0.70],
scale: 20.0,
texture: WHS.texture('assets/textures/terrain/rock-512.jpg')
},
{
from: [0.42, 0.45],
scale: 10.0,
texture: WHS.texture('assets/textures/terrain/snow-512.jpg')
}
]
});
```
- **from** - Gradient start (applied texture).
- **to** - Gradient end (applied texture).
- **scale** - Texture scale.
- **texture** - `THREE.Texture` object.
## Heightmap example
- Should be **grayscale**. (black <-> white).
- Resolution **should be a power of two** (256x256, 512x512, 1024x1024 ...)
# Result
[](whsjs.io/whs-component-terrain/examples/)