Point Sprite

by jmcjc5u

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js">
</script>

CSS

body {
  overflow: hidden
}

JavaScript

var camera, scene, renderer;
var group;
var mapC;

init();
animate();

function init() {

  var width = window.innerWidth;
  var height = window.innerHeight;

  camera = new THREE.PerspectiveCamera(60, width / height, 1, 2100);
  camera.position.z = 1500;

  scene = new THREE.Scene();
  scene.fog = new THREE.Fog(0x000000, 1500, 2100);

  // create sprites
  var amount = 20;
  var radius = 500;

  var loader = new THREE.TextureLoader();
  loader.crossOrigin = '';
  var mapB = loader.load("https://threejs.org/examples/textures/sprite1.png");
  var mapC = loader.load("https://threejs.org/examples/textures/sprite2.png");

  group = new THREE.Group();

  var materialC = new THREE.SpriteMaterial({
    map: mapC,
    color: 0xffffff,
    // fog: true ... not anymore 
  });
  var materialB = new THREE.SpriteMaterial({
    map: mapB,
    color: 0xffffff,
    // fog: true ... not anymore
  });

  for (var a = 0; a < amount; a++) {

    var x = Math.random() - 0.5;
    var y = Math.random() - 0.5;
    var z = Math.random() - 0.5;

    var material;

    if (z < 0) {

      material = materialB.clone();

    } else {

      material = materialC.clone();
      material.color.setHSL(0.5 * Math.random(), 0.75, 0.5);
      material.map.offset.set(-0.5, -0.5);
      material.map.repeat.set(2, 2);

    }

    var sprite = new THREE.Sprite(material);

    sprite.position.set(x, y, z);
    sprite.position.normalize();
    sprite.position.multiplyScalar(radius);

    group.add(sprite);

  }

  scene.add(group);

  // renderer

  renderer = new THREE.WebGLRenderer();
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  //renderer.autoClear = false; // To allow render overlay on top of sprited sphere

  document.body.appendChild(renderer.domElement);
  let controls = new THREE.OrbitControls(camera, renderer.domElement);


  window.addEventListener('resize', onWindowResize, false);

}

function onWindowResize() {

  var width =...