Threejs 颜色插值计算

3色插值计算

const pos = child.geometry.attributes.position;
                    const count = pos.count;
                    const yList = [];
                    for (let i = 0; i < count; i++) {
                        const y = pos.getY(i);
                        yList.push(y);
                    }
                    const sortedYList = yList.sort();
                    // 获取高度 最小值 最大值
                    const minY = sortedYList[0];
                    const maxY = sortedYList[sortedYList.length - 1];
                    const height = maxY - minY;
                    //  颜色插值计算
                    const color1 = new THREE.Color(0xff0000);
                    const color2 = new THREE.Color(0x00ff00);
                    const color3 = new THREE.Color(0x0000ff);
                    const colorList = [];
                    for (let i = 0; i < count; i++) {
                        const y = pos.getY(i);
                        const ratio = (y - minY) / height;
                        let color = null;
                        if (ratio >= 0.5) {
                            color = color2.clone().lerp(color1, (ratio - 0.5) * 2);
                        } else {
                            color = color3.clone().lerp(color2, ratio * 2);
                        }
                        colorList.push(color.r, color.g, color.b)
                    }
                    const colorAttr = new THREE.Float32BufferAttribute(colorList, 3);
                    child.geometry.setAttribute('color', colorAttr);
                    child.material.vertexColors = true;

2色插值计算

var geometry = points.geometry;
            // 1. 获取点云所有点位
            const pos = geometry.attributes.position;
            // 2. 获取点位总数
            const count = pos.count;
            // 3. 获取所有Y坐标的值
            const yArray = [];
            for (let index = 0; index < count; index++) {
              yArray.push(pos.getZ(index));
            }
            // 4. 找到Y坐标的最大值和最小值
            const yArraySorted = yArray.sort();
            const minY = yArraySorted[0];
            const maxY = yArraySorted[yArraySorted.length - 1];
            const height = maxY - minY; // 高度

            // 5. 生成颜色
            const colors1 = new THREE.Color(0xffff99);
            const colors2 = new THREE.Color(0xff4444);
            const colorsBuffer = [];
            for (let index = 0; index < count; index++) {
              // 6. 计算出当前高度和整体高度的比值
              const percent = (pos.getZ(index) - minY) / height;
              // 7. 颜色差值计算
              const colorLerp = colors1.clone().lerp(colors2, percent);
              colorsBuffer.push(colorLerp.r, colorLerp.g, colorLerp.b);
            }
            const colors = new Float32Array(colorsBuffer);
            // 8. 将颜色数组设置到几何体中
            geometry.attributes.color = new THREE.BufferAttribute(colors, 3);
            // 创建材质
            var material = new THREE.PointsMaterial({
              vertexColors: true, // 使用定点颜色
            });