planeGeometry

* index14
const heatVertex = `
    uniform sampler2D heightMap;
    uniform float heightRatio;
    varying vec2 vUv;
    varying float hValue;
    void main() {
        vUv = uv;
        vec3 pos = position;
        hValue = texture2D(heightMap, vUv).r;
        pos.y = hValue * heightRatio;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(pos,1.0);
    }
`;

var heatFragment = `
    varying float hValue;

    vec3 heatmapGradient(float t) {
        return clamp((pow(t, 1.5) * 0.8 + 0.2) * vec3(smoothstep(0.0, 0.35, t) + t * 0.5, smoothstep(0.5, 1.0, t), max(1.0 - t * 1.7, t * 7.0 - 6.0)), 0.0, 1.0);
    }

    void main() {
        float v = abs(hValue - 1.);
        gl_FragColor = vec4(heatmapGradient(hValue), 1. - v * v) ;
    }
`;

const heightMap = createHeightMap();
function createHeightMap(){
    var canvas = document.createElement("canvas");
    canvas.width = 256;
    canvas.height = 256;
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "blue";
    ctx.fillRect(0, 0, 256, 256);
    for(let i = 0; i < 100; i++){
        var x = Math.floor(Math.random() * 255);
        var y = Math.floor(Math.random() * 255);
        var radius = 50;
        var grd = ctx.createRadialGradient(x, y, 1, x, y, radius);
        var h8 = Math.floor(Math.random() * 255);
        grd.addColorStop(0, "rgb("+ h8 + "," + h8 + "," + h8 +")");
        grd.addColorStop(1, "transparent");
        ctx.fillStyle = grd;
        ctx.fillRect(0, 0, 256, 256);
    }
    return new THREE.CanvasTexture(canvas);
}

//화면 생성
const scene = new THREE.Scene();

//카메라 설정
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(21, 34, 155);

//렌더링 설정
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);

//컨트롤 설정
const controls = new THREE.OrbitControls(camera, renderer.domElement);

//그리드 헬퍼 설정
//scene.add(new THREE.GridHelper(50, 25, 0x000040, 0x000040));

//지오메트리
const planeGeometry = new THREE.PlaneBufferGeometry(100, 1000, 1000, 1000);
planeGeometry.rotateX(-Math.PI * 0.5);

const heat = new THREE.Mesh(planeGeometry, new THREE.ShaderMaterial({
    uniforms: {
        heightMap: {value: heightMap},
        heightRatio: {value: 50}
    },
    vertexShader: heatVertex,
    fragmentShader: heatFragment,
    transparent: true
}));

scene.add(heat);

//애니메이션 설정
var clock = new THREE.Clock();
function animate(a) {
    requestAnimationFrame(animate);

    heat.rotation.y += 0.0005;

    renderer.render(scene, camera);
}
animate();

//화면 사이즈 설정
function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}
window.addEventListener('resize', onWindowResize);