Interstellar Shuttle

by mingjian sun

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/99/three.min.js"></script>

CSS

body canvas {
  background-color: black;
}

JavaScript

var width = 800;
var height = 600;

function getCanvasTexture() {
  var width = 128,
    height = 128;
  var canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;
  var ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.fillStyle = "#ffffff";
  ctx.arc(width / 2, height / 2, Math.min(width / 2, height / 2), 0, 2 * Math.PI, true);
  ctx.fill();
  return canvas;
}

var texture = new THREE.Texture(getCanvasTexture());
texture.needsUpdate = true;
var material = new THREE.SpriteMaterial({
  map: texture
});

function Sprite(scene, z) {
  this.element = new THREE.Sprite(material);
  this.element.position.x = 1000 * Math.random() - 500;
  this.element.position.y = 1000 * Math.random() - 500;
  this.element.position.z = z || 0;
  this.element.scale.x = 1;
  this.element.scale.y = 1;
  scene.add(this.element);
}
Sprite.prototype.update = function() {
  this.element.position.z += 1;
  if (this.element.position.z > 1000) {
    this.element.position.z -= 1000;
  }
}
Sprite.prototype.draw = function() {}

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(85, width / height, 1, 4000);

var renderer = new THREE.WebGLRenderer({
  alpha: true
});
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);

camera.position.z = 1000;
scene.add(camera);

var sprites = [];
for (var i = 0; i < 1000; i++) {
  sprites.push(new Sprite(scene, i));
}

function loop() {
  requestAnimationFrame(loop);
  for (var i = 0; i < sprites.length; i++) {
    sprites[i].update();
  }
  for (var i = 0; i < sprites.length; i++) {
    sprites[i].draw();
  }
  renderer.render(scene, camera);
}
loop();