253Echarts - 3D 曲面（皮革材质）

var TILING = [4, 2];
var heightImg = new Image();
heightImg.onload = update;
heightImg.src = './data-gl/asset/leather/leather_height.jpg';
function update() {
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    var width = canvas.width = heightImg.width;
    var height = canvas.height = heightImg.height;
    ctx.drawImage(heightImg, 0, 0, width, height);
    var imgData = ctx.getImageData(0, 0, width, height).data;
    function getScale(u, v) {
        u = (u / Math.PI * 0.5 + 0.5) * TILING[0];
        v = v / Math.PI * TILING[1];
        u = Math.floor((u - Math.floor(u)) * (width - 1));
        v = Math.floor((1 - v + Math.floor(v)) * (height - 1));
        var idx = v * width + u;
        return 1 + imgData[idx * 4] / 255 / 20;
    }
    myChart.setOption({
        xAxis3D: {
            type: 'value',
            min: -1.5,
            max: 1.5
        },
        yAxis3D: {
            type: 'value',
            min: -1.5,
            max: 1.5
        },
        zAxis3D: {
            type: 'value',
            min: -1.5,
            max: 1.5
        },
        grid3D: {
            show: false,
            environment: 'none',
            axisPointer: {
                show: false
            },
            postEffect: {
                enable: true,
                screenSpaceAmbientOcclusion: {
                    enable: true,
                    radius: 10,
                    intensity: 2,
                    quality: 'high'
                },
                screenSpaceReflection: {
                    enable: false
                },
                depthOfField: {
                    enable: false,
                    focalRange: 10,
                    fstop: 4
                }
            },
            temporalSuperSampling: {
                enable: true
            },
            light: {
                main: {
                    intensity: 2,
                    shadow: true
                },
                ambient: {
                    intensity: 0
                },
                ambientCubemap: {
                    texture: './data-gl/asset/pisa.hdr',
                    exposure: 1,
                    diffuseIntensity: 1,
                    specularIntensity: 2
                }
            },
            viewControl: {
                distance: 80
                // projection: 'orthographic'
            }
        },
        series: [{
            type: 'surface',
            parametric: true,
            shading: 'realistic',
            silent: true,
            wireframe: {
                show: false
            },
            realisticMaterial: {
                // detailTexture: 'asset/leather/leather_albedo.jpg',
                roughness: './data-gl/asset/leather/leather_roughness.jpg',
                normalTexture: './data-gl/asset/leather/leather_normal.jpg',
                textureTiling: TILING
            },
            itemStyle: {
                color: '#300'
            },
            parametricEquation: {
                u: {
                    min: -Math.PI,
                    max: Math.PI,
                    step: Math.PI / 100
                },
                v: {
                    min: 0.4,
                    max: Math.PI - 0.4,
                    step: Math.PI / 100
                },
                x: function (u, v) {
                    return Math.sin(v) * Math.sin(u) * getScale(u, v);
                },
                y: function (u, v) {
                    return Math.sin(v) * Math.cos(u) * getScale(u, v);
                },
                z: function (u, v) {
                    return Math.cos(v) * getScale(u, v);
                }
            }
        }]
    });
}