Colorful surface

colorful-surface.markdown

Colorful surface

A Pen by Paul on CodePen.

License.

script.typescript

import * as THREE from "https://cdn.skypack.dev/three";

import {OrbitControls} from "https://cdn.skypack.dev/three/examples/jsm/controls/OrbitControls";
import {ImprovedNoise} from "https://cdn.skypack.dev/three/examples/jsm/math/ImprovedNoise"


function main() {
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild(renderer.domElement)

    const fov = 90;
    const aspect = window.innerWidth / window.innerHeight;
    const near = 0.4;
    const far = 100;
    const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
    camera.position.set(10, 8, 10)
    new OrbitControls(camera, renderer.domElement)
    
    const scene = new THREE.Scene();

    const color1 = 0xFFFF00;
    const intensity1 = 0.3;
    const light1 = new THREE.DirectionalLight(color1, intensity1);
    scene.add(light1);
    //scene.add(new THREE.DirectionalLightHelper(light1, 5))

    const color2 = 0xFF00FF;
    const intensity2 = 0.3;
    const light2 = new THREE.DirectionalLight(color2, intensity2);
    scene.add(light2);
    //scene.add(new THREE.DirectionalLightHelper(light2, 5))

    const color3 = 0x00FFFF;
    const intensity3 = 0.3;
    const light3 = new THREE.DirectionalLight(color3, intensity3);
    light2.position.set(10, 2, 4);
    scene.add(light3);
    //scene.add(new THREE.DirectionalLightHelper(light3, 5))


    let noise = new ImprovedNoise()

    function surf(u: number, v: number, target: THREE.Vector3): THREE.Vector3 {
        const z = (noise.noise(u*10, v*10, 0) + 1) * 3

        target.setX(u)
        target.setZ(v)
        target.setY(z)
        return target
    }

    function generateToneMap(count) {
        var canvas = document.createElement('canvas');
      
        canvas.width = count;
        canvas.height = 1;
        var context = canvas.getContext( '2d' );
        var imageData = context.getImageData(0, 0, count, 1);
        
        for (let i = 0; i < count; i++) {
          const value = Math.round(i / (count - 1) * 255);
          imageData.data[i * 4 + 0] = value;
          imageData.data[i * 4 + 1] = value;
          imageData.data[i * 4 + 2] = value;
          imageData.data[i * 4 + 3] = 255;  
        }
      
        context.putImageData(imageData, 0, 0 );
        const src = canvas.toDataURL("image/png");
        const image = new Image();
        image.src = src;
        return image;
      }

    const texture = new THREE.CanvasTexture(generateToneMap(5));
    // IMPORTANT for toon material to work properly.
    texture.minFilter = THREE.NearestFilter;
    texture.magFilter = THREE.NearestFilter;


    const geometry1 = new THREE.ParametricBufferGeometry( surf, 100, 100 );
    const material = new THREE.MeshToonMaterial( {
        gradientMap:texture,
        color: 0xffffff,
        emissive: 0x888888,
        side: THREE.BackSide
    } );
    const surface = new THREE.Mesh( geometry1, material );
    surface.scale.set(20, 1, 20)
    surface.position.set(-10, 0, -10)
    scene.add( surface );

    const clock = new THREE.Clock()
    clock.start()

    function render() {
        renderer.render(scene, camera);
        const t = clock.getElapsedTime() + 1e5

        light1.position.set(
            30*Math.cos(t/41),
            5*Math.cos(t*1.2),
            30*Math.sin(t/41)
        )

        light2.position.set(
            30*Math.cos(t/31),
            5*Math.cos(t*1.3),
            30*Math.sin(t/31)
        )

        light3.position.set(
            30*Math.cos(t/73),
            5*Math.cos(t*1.4),
            30*Math.sin(t/73)
        )

        requestAnimationFrame(render);
    }
    requestAnimationFrame(render);
}

window.addEventListener('load', main)

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r124/three.min.js"></script>