Canvas as pointsMaterial map

Creates a dynamic canvas to make points circles. Ansers for stackoverflow question: 41509156 http://stackoverflow.com/questions/41509156/three-js-give-particles-round-form

by iDVB

HTML

<script src="https://cdn.rawgit.com/mrdoob/three.js/r83/build/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/stats.js/r17/build/stats.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/r83/examples/js/Detector.js"></script>

CSS

body {
  background-color: #135;
  margin: 0px;
  font-family:Arial;
  font-size: 16px;
  color:#EEE;
}

a {
  color:#0078ff;
}

#info {
  color: #fff;
  position: absolute;
  top: 0px; width: 100%;
  padding: 5px;
  z-index: 100;
}

#content {
  position: absolute;
  width: 70%;
  margin: 30px;
  margin-left: 15%;
  
}

JavaScript

if (!Detector.webgl) Detector.addGetWebGLMessage();

var container, stats;
var camera, scene, renderer, particles, geometry, materials = [],
  parameters, i, h, color, size;
var mouseX = 0,
  mouseY = 0;

var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

init();
animate();

function createCanvasMaterial(color, size) {
	var matCanvas = document.createElement('canvas');
  matCanvas.width = matCanvas.height = size;
  var matContext = matCanvas.getContext('2d');
  // create exture object from canvas.
  var texture = new THREE.Texture(matCanvas);
  // Draw a circle
  var center = size / 2;
  matContext.beginPath();
  matContext.arc(center, center, size/2, 0, 2 * Math.PI, false);
  matContext.closePath();
  matContext.fillStyle = color;
  matContext.fill();
  // need to set needsUpdate
  texture.needsUpdate = true;
  // return a texture made from the canvas
  return texture;
}

function init() {

  container = document.createElement('div');
  container.style.position = "fixed";
  container.style.zIndex = -1;
  document.body.appendChild(container);

  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 2000);
  camera.position.z = 1000;

  scene = new THREE.Scene();
  scene.fog = new THREE.FogExp2(0x000000, 0.0007);

  geometry = new THREE.Geometry();
  
  //geometry = THREE.SphereGeometry( 1, 2, 2 );

  for (i = 0; i < 30; i++) {

    var vertex = new THREE.Vector3();
    vertex.x = Math.random() * 2000 - 1000;
    vertex.y = Math.random() * 2000 - 1000;
    vertex.z = Math.random() * 2000 - 1000;

    geometry.vertices.push(vertex);

  }

 parameters = [
    [
      [1, 1, 0.5], 5
    ],
    [
      [0.95, 1, 0.5], 4
    ],
    [
      [0.0, 0.0, 1.0], 3
    ],
    [
      [0.0, 1.0, 0.0], 2
    ],
    [
      [1.0, 0.0, 0.0], 1
    ]
  ];
  
 /*parameters = [
    [
      [1, 0.5, 0.9], 0.5
    ],
    [
      [0.95, 0.5, 0.9], 0.4
    ],
    [
      [0.90, 0.5, 0.9], 0.3
    ],
    [
      [0.85, 0.5,...