Разбор решения canvas

(function(){
  'use strict';
  
  var tau = Math.PI * 2;
  var width, height;
  var mode;
  var scene, camera, renderer, pointCloud;
  
  THREE.ImageUtils.crossOrigin = '';
  
  var SETTINGS = [{
   
    particleCount: 100000,
    material: new THREE.PointCloudMaterial({ 
      size: 0.1, 
      color: 0xfff,
      transparent: true,
      opacity: 0.5
    }),
    initialize: null,
    spawnBehavior: function(index){
      var x, y, z;
 
      x = (Math.random() * 2000) - 1000;
      y = (Math.random() * 2000) - 1000;
      z = (Math.random() * 2000) - 1000;
      return new THREE.Vector3(x, y, z);
    },
    frameBehavior: null,
    sceneFrameBehavior: function(){
      camera.rotation.x -= 0.000015; 
      camera.rotation.y += 0.00005;
      camera.rotation.z += 0.00005;
      camera.translateZ(-1);
    }
  }]
  
  
  function onDocumentReady(){
    initialize();
  }
  
  function addModeButtons(){
    var buttons = document.getElementById('buttons');
    _.forEach(SETTINGS, function(mode){
      var button = document.createElement('button');
      button.textContent = mode.name;
      
      button.addEventListener('click', function(){
        setMode(mode);
      });
      buttons.appendChild(button);
    });
  }
  
  function initialize(){
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(120, width / height, 1, 1000);
    renderer = new THREE.WebGLRenderer();
    document.body.appendChild(renderer.domElement);
    window.addEventListener('resize', onWindowResize);
    onWindowResize();
     
    addModeButtons();
    
    scene.fog = new THREE.Fog(0, 1);
    setMode(SETTINGS[SETTINGS.length-1]);
    
    var controls = new THREE.OrbitControls( camera, renderer.domElement );
      controls.enableDamping = true;
      controls.dampingFactor = 0.25;
      controls.enableZoom = false;
 
    
    AnimationController.registerAnimation(render);
  }
  
  function setMode(_mode){
    mode = _mode;
    scene.remove(pointCloud);
    resetCamera();
    
    var points = createPoints(mode.spawnBehavior);
    var material = mode.material;
    
    pointCloud = new THREE.PointCloud(points, material);
    
    if(mode.initialize && typeof mode.initialize === 'function'){
      mode.initialize();
    }
    scene.add(pointCloud);
  }
  
  function createPoints(spawnBehavior){
    var ret = new THREE.Geometry();
    
    _.times(mode.particleCount, function(index){
      ret.vertices.push(spawnBehavior(index));
    })
    
    return ret;
  }
  
  function onWindowResize(){
    width = window.innerWidth;
    height = window.innerHeight;
    updateRendererSize();
  }
  
  function resetCamera(){
    camera.position.x = camera.position.y = camera.position.z = camera.rotation.x = camera.rotation.y = camera.rotation.z = 0;
  }
  
  function updateRendererSize(){
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
  }
  
  function updateParticles(){
    if(mode.sceneFrameBehavior && typeof mode.sceneFrameBehavior === 'function'){
      mode.sceneFrameBehavior();
    }
    if(mode.frameBehavior && typeof mode.frameBehavior === 'function'){
      _.forEach(pointCloud.geometry.vertices, mode.frameBehavior);
      pointCloud.geometry.verticesNeedUpdate = true;
      pointCloud.geometry.colorsNeedUpdate = true;
    }
  }
  
  function render(){
    updateParticles();
    renderer.render(scene, camera);
  }
  
  document.addEventListener('DOMContentLoaded', onDocumentReady);
})();

    function createPoints(spawnBehavior)
    {
        var ret = new THREE.Geometry();
 
        _.times(mode.particleCount, function (index)
        {
            ret.vertices.push(spawnBehavior(index));
        })
 
        return ret;
    }

    var SETTINGS = [{
 
        particleCount: 100000,
        material: new THREE.PointCloudMaterial({
            size: 1,
            color: 0xfff,
            transparent: true,
            opacity: 0.5
        }),
        initialize: null,
        spawnBehavior: function (index)
        {
            var x, y, z;
 
            x = (Math.random() * 2000) - 1000;
            y = (Math.random() * 2000) - 1000;
            z = (Math.random() * 2000) - 1000;
            return new THREE.Vector3(x, y, z);
        },
        frameBehavior: null,
        sceneFrameBehavior: function ()
        {
            camera.rotation.x -= 0.002;
            camera.rotation.y += 0.0085;
            camera.rotation.z += 0.00425;
            camera.translateZ(-1);
        }
    }]

        spawnBehavior: function (index)
        {
            var x, y, z;
 
            x = (Math.random() * 2000) - 1000;
            y = (Math.random() * 2000) - 1000;
            z = (Math.random() * 2000) - 1000;
            return new THREE.Vector3(x, y, z);
        }

    <script src="js/three.min.js"></script>
    <script src="js/underscore-min.js"></script>
    <script src="js/animation-controller.js"></script>
    <script src="js/controls/OrbitControls2.js"></script>
    <script src="js/lodash.min.js"></script>

        var getTexture = function () {
            var canvas = document.createElement('canvas');
            canvas.width = 32;
            canvas.height = 32;
 
            var ctx = canvas.getContext('2d');
            // the body
            ctx.translate(-81, -84);
 
            ctx.fillStyle = "orange";
            ctx.beginPath();
            ctx.moveTo(83, 116);
            ctx.lineTo(83, 102);
            ctx.bezierCurveTo(83, 94, 89, 88, 97, 88);
            ctx.bezierCurveTo(105, 88, 111, 94, 111, 102);
            ctx.lineTo(111, 116);
            ctx.lineTo(106.333, 111.333);
            ctx.lineTo(101.666, 116);
            ctx.lineTo(97, 111.333);
            ctx.lineTo(92.333, 116);
            ctx.lineTo(87.666, 111.333);
            ctx.lineTo(83, 116);
            ctx.fill();
 
            // the eyes
            ctx.fillStyle = "white";
            ctx.beginPath();
            ctx.moveTo(91, 96);
            ctx.bezierCurveTo(88, 96, 87, 99, 87, 101);
            ctx.bezierCurveTo(87, 103, 88, 106, 91, 106);
            ctx.bezierCurveTo(94, 106, 95, 103, 95, 101);
            ctx.bezierCurveTo(95, 99, 94, 96, 91, 96);
            ctx.moveTo(103, 96);
            ctx.bezierCurveTo(100, 96, 99, 99, 99, 101);
            ctx.bezierCurveTo(99, 103, 100, 106, 103, 106);
            ctx.bezierCurveTo(106, 106, 107, 103, 107, 101);
            ctx.bezierCurveTo(107, 99, 106, 96, 103, 96);
            ctx.fill();
 
            // the pupils
            ctx.fillStyle = "blue";
            ctx.beginPath();
            ctx.arc(101, 102, 2, 0, Math.PI * 2, true);
            ctx.fill();
            ctx.beginPath();
            ctx.arc(89, 102, 2, 0, Math.PI * 2, true);
            ctx.fill();
 
 
            var texture = new THREE.Texture(canvas);
            texture.needsUpdate = true;
            return texture;
        };

        var getTexture = function () {
            var canvas = document.createElement('canvas');
            canvas.width = 32;
            canvas.height = 32;
 
            var ctx = canvas.getContext('2d');
            ctx.translate(-81, -84);
 
            ctx.fillStyle = "white";
            ctx.beginPath();
            ctx.arc(101, 102, 2, 0, Math.PI * 2, true);
            ctx.fill();
 
            var texture = new THREE.Texture(canvas);
            texture.needsUpdate = true;
            return texture;
        };