A-Frame Tiny Terrain Component

Tiny terrain component you can define your own height and color functions. You can also update your location and have the terrain redrawn as the player walks far enough.

Demo

https://tiny-terrain-demo.glitch.me/

Usage

<script src="https://unpkg.com/@tlaukkan/aframe-tiny-terrain-component@0.0.5/dist/terrain.js"></script>

...

<script>
    window.TINY_TERRAIN.heightFunctions.set('hill-with-sine-wave', (x, y) => {
        const d = Math.sqrt(x*x + y*y);
        return 1 * Math.sin(Math.PI * (d * d) / 100) / (1 + d * d / 100) + 20 + 20 * ( -1 + 1 / (1 + d * d / 500));
    });

    window.TINY_TERRAIN.colorFunctions.set('linear', (y, colorPalette, paletteRangeMin, paletteRangeMax, paletteAccuracy, colorCache) => {
        const i = ((y - paletteRangeMin)/(paletteRangeMax-paletteRangeMin)).toFixed(paletteAccuracy);
        if (!colorCache.has(i)) {
            colorCache.set(i, colorPalette(i));
        }
        return colorCache.get(i);
    });
</script>

...

<a-tiny-terrain id="terrain" height-function="hill-with-sine-wave" radius-edge-count="200" edge-length = "1.5" color-function="linear" palette = "#4f654e, #606f4e, #818553, #9b9557, #bab269, #c4bc74" palette-accuracy="3" palette-range-min="0" palette-range-max="20" ></a-tiny-terrain>

Develop

npm run start:dev

Publish package

First publish

npm publish --access public

Update

npm version patch
npm publish