Sprite Size + FOV

by orion_prime

HTML

<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>

CSS

body {
	  margin: 0;
}

JavaScript

let renderer, scene, camera;
let controls, group;
const gui = new dat.GUI();
init();
animate();

function init() {
  // init renderer
  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  // init scene
  scene = new THREE.Scene();
  scene.background = new THREE.Color(0xffffff);

  group = new THREE.Group();
  scene.add(group);

  // init camera
  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.set(15, 15, 15);
  camera.lookAt(scene.position);

  controls = new THREE.OrbitControls(camera, renderer.domElement);
  controls.enableRotate = true;

  // add sprites

  const sprite1 = new THREE.Sprite(new THREE.SpriteMaterial({
    color: '#69f'
  }));
  sprite1.position.set(6, 5, 5);
  sprite1.scale.set(2, 5, 1);
  group.add(sprite1);

  const sprite2 = new THREE.Sprite(new THREE.SpriteMaterial({
    color: '#69f',
    sizeAttenuation: false
  }));
  sprite2.material.rotation = Math.PI / 3 * 4;
  sprite2.position.set(8, -2, 2);
  sprite2.center.set(0.5, 0);
  sprite2.scale.set(.1, .5, .1);
  group.add(sprite2);

  const group2 = new THREE.Object3D();
  group2.scale.set(1, 2, 1);
  group2.position.set(-5, 0, 0);
  group2.rotation.set(Math.PI / 2, 0, 0);
  group.add(group2);

  const sprite3 = new THREE.Sprite(new THREE.SpriteMaterial({
    color: '#69f'
  }));
  sprite3.position.set(0, 2, 5);
  sprite3.scale.set(10, 2, 3);
  sprite3.center.set(-0.1, 0);
  sprite3.material.rotation = Math.PI / 3;
  group2.add(sprite3);

  window.addEventListener('resize', onWindowResize);
  window.addEventListener("mousemove", onDocumentMouseMove, false);


  const folder = gui.addFolder('FOV');
  folder.open()
  folder.add(camera, 'fov', 0.1, 180).onChange(function(value) {
    camera.updateProjectionMatrix()
  });
}

function animate() {

 ...