square textures for circular particles in three.js
<p>I'm having trouble rendering particles properly in three.js. I'm trying to follow <a href="https://aerotwist.com/tutorials/creating-particles-with-three-js/" rel="nofollow noreferrer">this tutorial</a> to set up particles. Unfortunately, while they're placed correctly and are displayed, they are clearly rectangular, rather than circular. 
<a href="https://i.stack.imgur.com/5mO8c.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5mO8c.png" alt="enter image description here"></a>
Here's the code for the material</p>

<pre><code>var texture = new THREE.TextureLoader().load(   
"textures/disc.png",
function(texture) {

  var material = new THREE.PointsMaterial({
    color: 0xFFFFFF,
    size: 16,
    map: texture,
    transparent: true,
    blending: THREE.AdditiveBlending,
  });

  particles = new THREE.Points( geometry, material );
});
</code></pre>

<p>and <a href="http://codepen.io/anon/pen/jAGRkk" rel="nofollow noreferrer">here</a>'s a pen with complete code. </p>

<p>I honestly have no idea why they're rendered like that, when it's working perfectly in the example in the tutorial. </p>