How does the point cloud rendered by vtkPolyData interact with each point?

Web
8 
const pointsNumber = points.getNumberOfPoints();

const colors = new Uint8Array(pointsNumber * 4);

for (let i = 0; i < pointsNumber; i += 1) {
    colors[i * 4 + 0] = 0;
    colors[i * 4 + 1] = 255;
    colors[i * 4 + 2] = 0;
    colors[i * 4 + 3] =  0.5;
}

polyData.getPointData().addArray(
    vtkDataArray.newInstance({
      name: 'Colors',
      numberOfComponents: 4,
      values: colors,
    })
);

Render the correct point cloud：
image

With transparency, the color does not render.
image

Excuse me, where was it written incorrectly？

Sorry, the assignment is wrong when the color data is cycled, data[i*3+0] should be data[i*4+0].
However, using the addArray method does not work. Instead, use the setScalars method. Why?