使用 Three.js 和自定义着色器噪声函数生成 3D 地形，实现程序化地形生成和高度映射效果。

const generate_terrain = async () => {
  const planeGeo = new PlaneGeometry(50, 50, 500, 500);
  planeGeo.rotateX(-Math.PI / 2);
  
  const material = new THREE.ShaderMaterial({
    uniforms: {
      time: { value: 0 }
    },
    vertexShader: `
      vec3 hash(vec3 p) {
        p = vec3( dot(p, vec3(127.1, 311.7, 74.7)),
                  dot(p, vec3(269.5, 183.3, 246.1)),
                  dot(p, vec3(113.5, 271.9, 124.6)) );
        return fract(sin(p) * 43758.5453123);
      }

      float noise(in vec3 x) {
        vec3 p = floor(x);
        vec3 w = fract(x);
        vec3 u = w*w*w*(w*(w*6.0-15.0)+10.0);
        
        vec3 g = hash(p) - 0.5;
        float n = g.x;
        
        return n;
      }

      float fbm(vec3 p) {
        float f = 0.0;
        float w = 0.5;
        for (int i = 0; i < 5; i++) {
          f += w * noise(p);
          p *= 2.0;
          w *= 0.5;
        }
        return f;
      }

      varying float vHeight;
      
      void main() {
        vec3 pos = position;
        float height = fbm(pos * 0.1) * 5.0;
        pos.y += height;
        vHeight = height;
        
        gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
      }
    `,
    fragmentShader: `
      varying float vHeight;
      
      void main() {
        vec3 color = mix(vec3(0.2, 0.5, 0.2), vec3(0.8, 0.7, 0.5), vHeight / 5.0);
        gl_FragColor = vec4(color, 1.0);
      }
    `
  });
  
  const terrain = new THREE.Mesh(planeGeo, material);
  scene.add(terrain);
};

vec3 hash(vec3 p) {
  p = vec3( dot(p, vec3(127.1, 311.7, 74.7)),
            dot(p, vec3(269.5, 183.3, 246.1)),
            dot(p, vec3(113.5, 271.9, 124.6)) );
  return fract(sin(p) * 43758.5453123);
}

float noise(in vec3 x) {
  vec3 p = floor(x);
  vec3 w = fract(x);
  vec3 u = w*w*w*(w*(w*6.0-15.0)+10.0);
  
  vec3 g = hash(p) - 0.5;
  float n = g.x;
  
  return n;
}

float fbm(vec3 p) {
  float f = 0.0;
  float w = 0.5;
  for (int i = 0; i < 5; i++) {
    f += w * noise(p);
    p *= 2.0;
    w *= 0.5;
  }
  return f;
}

function animate() {
  requestAnimationFrame(animate);
  
  material.uniforms.time.value += 0.01;
  
  renderer.render(scene, camera);
}