three.js 使用灰度图 通过ShaderMaterial 生成地形

可以使用three.js中的ShaderMaterial来生成地形，通过灰度图来控制地形的高度和颜色。具体步骤如下：

1. 加载灰度图作为地形的高度图和纹理贴图。

var heightmapTexture = new THREE.TextureLoader().load('heightmap.jpg');
var texture = new THREE.TextureLoader().load('texture.jpg');

2. 编写着色器，利用灰度图来控制顶点的高度和颜色。

var terrainShader = {
  uniforms: {
    heightmap: { type: 't', value: heightmapTexture },
    texture: { type: 't', value: texture },
  },
  vertexShader: `
    uniform sampler2D heightmap;
    varying vec2 vUv;

    void main() {
      vUv = uv;
      vec4 heightColor = texture2D(heightmap, uv);
      float height = heightColor.r * 255.0;
      vec3 newPosition = position + vec3(0.0, height, 0.0);
      gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
    }
  `,
  fragmentShader: `
    uniform sampler2D texture;
    varying vec2 vUv;

    void main() {
      vec4 color = texture2D(texture, vUv);
      gl_FragColor = color;
    }
  `
};

3. 创建地形网格，并将着色器材质应用到网格上。

var geometry = new THREE.PlaneGeometry(100, 100, 100, 100);
var material = new THREE.ShaderMaterial({
  uniforms: terrainShader.uniforms,
  vertexShader: terrainShader.vertexShader,
  fragmentShader: terrainShader.fragmentShader,
});
var terrain = new THREE.Mesh(geometry, material);

通过这种方式，可以利用灰度图来生成逼真的地形效果。