Three.js shaderMaterial add texture to particles

Question

I am trying to add a texture to the particles i create using BufferGeometry in three.js.

I believe I am loading the material correctly, and that the issue is in my fragment shader but cannot figure this out as I am new to three.js. I managed to get the effect I wanted using Geometry rather than BufferGeometry: https://codepen.io/phillip-hogan/pen/mMJdXY/?editors=0010

...but I really need to use BufferGeometry ideally. Below is my code:

 var shaderMaterial = new THREE.ShaderMaterial({
  uniforms: particleUniforms,
  vertexShader: vertexshaderSource, // need to fill this variable with source of vertex-shader
  fragmentShader: fragmentshaderSource, // similarly, source of the fragment-shader

  blending: THREE.AdditiveBlending,
  depthTest: false,
  depthWrite: false,
  transparent: true
});

...and my vertex and fragment shader code:

    var vertexshaderSource = [
    "attribute float size;",
    "attribute vec3 customColor;",
    "varying vec3 vColor;",
    "void main() {",
    "vColor = customColor;",
    "vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",
    "gl_PointSize = size * ( 30.0 / -mvPosition.z );",
    "gl_Position = projectionMatrix * mvPosition;",
    "}"
  ].join("\n");

  var vertexshaderSource = [
    "attribute float size;",
    "attribute vec3 customColor;",
    "varying vec3 vColor;",
    "void main() {",
    "vColor = customColor;",
    "vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",
    "gl_PointSize = size * ( 30.0 / -mvPosition.z );",
    "gl_Position = projectionMatrix * mvPosition;",
    "}"
  ].join("\n");

  var fragmentshaderSource = [
    "uniform vec3 color;",
    "varying vec3 vColor;",
    "void main() {",
    "gl_FragColor = vec4( color * vColor, 1.0 );",
    "}"
  ].join("\n");

https://codepen.io/phillip-hogan/pen/VzaqEV/?editors=0010