three.js灰度图生成3d地形图代码
时间: 2023-10-23 08:09:41 浏览: 131
下面是一个基于Three.js的灰度图生成3D地形图的完整代码示例,包括灰度图像的加载、平面面板的创建、顶点高度的设置、材质和网格的创建、相机和光源的设置等:
```javascript
// 创建场景、相机和渲染器
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 50, 100);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 加载灰度图像
var textureLoader = new THREE.TextureLoader();
textureLoader.load('heightmap.png', function(texture) {
// 创建平面面板
var width = 100; // 面板宽度
var height = 100; // 面板高度
var size = 256; // 面板像素数
var geometry = new THREE.PlaneGeometry(width, height, size - 1, size - 1);
// 设置顶点高度
var grayData = texture.image.data;
var maxHeight = 10; // 最大高度值
for (var i = 0; i < size; i++) {
for (var j = 0; j < size; j++) {
var index = i * size + j;
var grayValue = grayData[index * 4] / 255; // 将像素值转换为0~1之间的高度值
geometry.vertices[index].z = grayValue * maxHeight; // 设置顶点的高度(z轴方向)
}
}
// 创建材质和网格
var material = new THREE.MeshBasicMaterial({ map: texture });
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
// 添加光源
var ambientLight = new THREE.AmbientLight(0x404040, 1);
scene.add(ambientLight);
var directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);
// 渲染场景
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
render();
});
```
在这个代码示例中,灰度图像被保存为`heightmap.png`文件,可以根据实际情况修改文件名和路径。灰度图像加载完成后,创建了一个100x100的平面面板,像素数为256x256,顶点高度根据灰度图像中的像素值设置。最终创建了一个基于灰度图像的3D地形网格,添加了环境光和定向光源,通过渲染器将场景渲染到屏幕上。