Echarts texture is inverted

Question

I need to draw a picture on ehcarts surface. When I apply texture to the surface series, it is inverted if viewed from the top:

Here's my config:

option = {
xAxis3D: {
    type: 'value'
},
yAxis3D: {
    type: 'value'
},
zAxis3D: {
    type: 'value',
    max: 1,
    min: -1,
},
grid3D: {
},
series: [{
    type: 'surface',
    shading: 'color',
    colorMaterial: {
      detailTexture: 'https://cdn.kapwing.com/final_5bc92c94579a1700125f80f7.jpg',
    },
    data: [
      [1,1,0],
      [1,0,0],
      [0,1,0],
      [0,0,0],
    ],
    itemStyle: {
      color: 'white',
      opacity: .9,
    },
}]
}

How can I apply the texture so it looks like the original image when observed from the top?

Answer 1

To achieve this you need to draw the surface data points in the correct order.

I fixed mine by swapping points from

 data: [
  [1,1,0],
  [1,0,0],
  [0,1,0],
  [0,0,0],
],

to

 data: [
   [0,0,0],
   [1,0,0],
   [0,1,0],
   [1,1,0],
 ],