关于编辑器:ThreeJS教程山脉地形高度可视化

https://www.mvrlink.com/threejs-visualization-of-mountain-ter…

举荐：将 NSDT 场景编辑器退出你的 3D
工具链 3D 工具集：NSDT 简石数字孪生

山脉地形高度可视化一个山脉地形的高度可视化，具体说就是地形不同的高度设置不同的色彩值。有多种形式，上面就举一个设置顶点色彩.attributes.color 的例子

本节课算是一个练习题，用到的知识点后面几节都将解说过，所以视频次要把思路给大家说一遍，而后大家依据课程课程思路本人手写一遍。1. 山脉几何体 y 坐标范畴 loader.load(“../ 地形.glb”, function (gltf) {

model.add(gltf.scene);
const mesh = gltf.scene.children[0];
const pos = mesh.geometry.attributes.position;
const count = pos.count;

// 1. 计算模型 y 坐标高度差
const yArr = [];// 顶点所有 y 坐标，也就是地形高度
for (let i = 0; i < count; i++) {yArr.push(pos.getY(i));// 获取顶点 y 坐标，也就是地形高度
}
yArr.sort();// 数组元素排序，从小到大
const miny = yArr[0];// y 最小值
const maxy = yArr[yArr.length - 1];// y 最大值
const height = maxy - miny; // 山脉整体高度 

})
2. 依据山脉顶点高度设置突变色彩借助色彩对象的色彩插值办法.lerp(), 计算山脉不同高度地位点的色彩。// 2. 计算每个顶点的色彩值
const colorsArr = [];
const c1 = new THREE.Color(0x0000ff);// 山谷色彩
const c2 = new THREE.Color(0xff0000);// 山顶色彩
for (let i = 0; i < count; i++) {

// 以后高度和整体高度比值
const percent = (pos.getY(i) - miny) / height;
const c = c1.clone().lerp(c2, percent);// 色彩插值计算
colorsArr.push(c.r, c.g, c.b); 

}
const colors = new Float32Array(colorsArr);
// 设置几何体 attributes 属性的色彩 color 属性
mesh.geometry.attributes.color = new THREE.BufferAttribute(colors, 3);

3. Mesh 渲染山脉顶点色彩 // 3. 设置材质，应用顶点色彩渲染
   mesh.material = new THREE.MeshLambertMaterial({
   vertexColors:true,
   });