← Mike Higgins Home
Custom Code Experiment •

Simple Polygon Terrain (Three.js)

Source Code View HTML / CSS / JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Colorful Terrain Animation</title>
    <style>
        html, body {
            border: 0;
            padding: 0;
            margin: 0;
            overflow: hidden;
            height: 100%;
            width: 100%;
            background: #000;
        }

        #container {
            height: 100vh;
            width: 100%;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="container"></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js"></script>
    <script>
        var container = document.getElementById('container')

        var vertexHeight = 15000,
            planeDefinition = 100,
            planeSize = 1245000,
            totalObjects = 1,
            background = "#001a33",
            meshColor = "#ff6b6b";

        var camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 1, 400000)
        camera.position.z = 10000;
        camera.position.y = 10000;
        var scene = new THREE.Scene();
        scene.fog = new THREE.Fog(background, 1, 300000);
        var light = new THREE.AmbientLight(0x404040);
        scene.add(light);
        var directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
        directionalLight.position.set(0, 1, 0);
        scene.add(directionalLight);
        var planeGeo = new THREE.PlaneGeometry(planeSize, planeSize, planeDefinition, planeDefinition);
        var plane = new THREE.Mesh(planeGeo, new THREE.MeshBasicMaterial({
            color: meshColor,
            wireframe: true
        }));
        plane.rotation.x -= Math.PI * .5;
        scene.add(plane);
        var renderer = new THREE.WebGLRenderer({alpha: false});
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setClearColor(background, 1);
        container.appendChild(renderer.domElement);
        updatePlane();
        function updatePlane() {
            for (var i = 0; i < planeGeo.vertices.length; i++) {
                planeGeo.vertices[i].z += Math.random() * vertexHeight - vertexHeight;
                planeGeo.vertices[i]._myZ = planeGeo.vertices[i].z
            }
        };
        var count = 0
        function render() {
            requestAnimationFrame(render);
            var x = camera.position.x;
            var z = camera.position.z;
            camera.position.x = x * Math.cos(0.001) + z * Math.sin(0.001) - 10;
            camera.position.z = z * Math.cos(0.001) - x * Math.sin(0.001) - 10;
            camera.lookAt(new THREE.Vector3(0, 8000, 0))
            for (var i = 0; i < planeGeo.vertices.length; i++) {
                var z = +planeGeo.vertices[i].z;
                planeGeo.vertices[i].z = Math.sin(( i + count * 0.00002)) * (planeGeo.vertices[i]._myZ - (planeGeo.vertices[i]._myZ* 0.6))
                planeGeo.verticesNeedUpdate = true;
            }

            var hue = (count * 0.0001) % 1;
            plane.material.color.setHSL(hue, 0.8, 0.5);
            var angle = count * 0.01;
            directionalLight.position.x = Math.cos(angle) * 10000;
            directionalLight.position.z = Math.sin(angle) * 10000;
            count += 0.1
            renderer.render(scene, camera);
        }

        render();

        window.addEventListener('resize', onWindowResize, false);

        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }
    </script>
</body>
</html>