src/Background/mountains.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

import * as THREE from 'https://unpkg.com/three@0.160.0/build/three.module.js';

export function createMountains() {
    const mountainCount = 100;     // number of peaks
    const mountainWidth = 2;       // horizontal spacing
    const mountainHeight = 5;      // max height of peaks
    const baseHeight = 0;          // ground level
    const mountainDepth = -50;     // far behind grid

    // Create a 2D shape for the mountain silhouette
    const shape = new THREE.Shape();
    shape.moveTo(-mountainCount * mountainWidth / 2, baseHeight);

    for (let i = -mountainCount / 2; i <= mountainCount / 2; i++) {
        const x = i * mountainWidth;
        const y = Math.random() * mountainHeight + 5; // peak height
        shape.lineTo(x, y);
    }

    // Close shape at the far right base
    shape.lineTo(mountainCount * mountainWidth / 2, baseHeight);
    shape.lineTo(-mountainCount * mountainWidth / 2, baseHeight);

    // Convert shape to geometry
    const geometry = new THREE.ShapeGeometry(shape);

    // Rotate so it lies in XZ plane
    // geometry.rotateX(-Math.PI / 2);
    geometry.translate(0, 0, mountainDepth);

    const material = new THREE.MeshBasicMaterial({
        color: 0xff0077,
        side: THREE.DoubleSide,
        transparent: true,
        opacity: 1
    });

    const mesh = new THREE.Mesh(geometry, material);
    return mesh;
}