Sprite-like Plane

by Paul West

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;
  margin: 0;
}

JavaScript

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 50);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domeElement);

var planes = [];
for (var i=0; i < 10; i++){
	var planeGeom = new THREE.PlaneGeometry(10, 1);
  var plane = new THREE.Mesh(planeGeom, new THREE.MeshBasicMaterial({color: Math.random() * 0xFFFFFF}));
  plane.position.set(
  	Math.random() * 20 - 10,
    Math.random() * 5 - 2.5,
    -Math.random()
  )
	scene.add(plane);
  planes.push(plane);
}

render();
function render() {
  requestAnimationFrame(render);
  
  planes.forEach(function(p){
    p.quaternion.copy(camera.quaternion);
  });
  
  renderer.render(scene, camera);
}