three.js 通过地图数据和灰度图、地形图生成地形地图 代码

以下是使用 three.js 生成地形地图的示例代码：

// 创建一个场景
var scene = new THREE.Scene();

// 创建一个相机
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 10, 20);

// 创建一个渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建一个地形几何体
var terrainGeometry = new THREE.PlaneGeometry(100, 100, 128, 128);
THREE.Terrain.generateHeightmap(terrainGeometry.vertices, {
  after: function() {
    terrainGeometry.verticesNeedUpdate = true;
    terrainGeometry.computeVertexNormals();
  }
});

// 创建一个地形材质
var terrainMaterial = new THREE.MeshPhongMaterial({
  color: 0xaaaaaa,
  shininess: 0,
  flatShading: true
});

// 创建一个地形网格
var terrain = new THREE.Mesh(terrainGeometry, terrainMaterial);
terrain.rotation.x = -Math.PI / 2;
scene.add(terrain);

// 创建一个光源
var light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(0, 1, 0);
scene.add(light);

// 添加一个控制器
var controls = new THREE.OrbitControls(camera, renderer.domElement);

// 渲染场景
function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

render();

上述代码中，我们创建了一个场景、一个相机和一个渲染器，并将渲染器的输出添加到 HTML 页面中。然后，我们创建了一个地形几何体，并使用 `THREE.Terrain.generateHeightmap` 方法生成高度图。接下来，我们创建了一个地形材质和一个地形网格，并将网格添加到场景中。最后，我们创建了一个光源和一个控制器，并使用 `requestAnimationFrame` 方法进行场景渲染。