three.ts

import { initStats, initTrackballControls } from './js/util';
import {
  Scene,
  PerspectiveCamera,
  WebGLRenderer,
  Color,
  Clock,
  PlaneGeometry,
  MeshLambertMaterial,
  Mesh,
  BoxGeometry,
  SphereGeometry,
  SpotLight,
  AmbientLight,
} from 'three';
import dat from './lib/util/dat.gui';

// listen to the resize events
export const init = () => {
  window.addEventListener('resize', onResize, false);

  var camera;
  var scene;
  var renderer;

  // initialize stats
  var stats = initStats();

  // create a scene, that will hold all our elements such as objects, cameras and lights.
  scene = new Scene();

  // create a camera, which defines where we're looking at.
  camera = new PerspectiveCamera(
    45,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  );

  // create a render and set the size
  renderer = new WebGLRenderer();

  renderer.setClearColor(new Color(0x000000));
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.shadowMap.enabled = true;

  // initialize the trackball controls and the clock which is needed
  var trackballControls = initTrackballControls(camera, renderer);
  var clock = new Clock();

  // create the ground plane
  var planeGeometry = new PlaneGeometry(60, 20, 1, 1);
  var planeMaterial = new MeshLambertMaterial({ color: 0xffffff });
  var plane = new Mesh(planeGeometry, planeMaterial);
  plane.receiveShadow = true;

  // rotate and position the plane
  plane.rotation.x = -0.5 * Math.PI;
  plane.position.x = 15;
  plane.position.y = 0;
  plane.position.z = 0;

  // add the plane to the scene
  scene.add(plane);

  // create a cube
  var cubeGeometry = new BoxGeometry(4, 4, 4);
  var cubeMaterial = new MeshLambertMaterial({ color: 0xff0000 });
  var cube = new Mesh(cubeGeometry, cubeMaterial);
  cube.castShadow = true;

  // position the cube
  cube.position.x = -4;
  cube.position.y = 3;
  cube.position.z = 0;

  // add the cube to the scene
  scene.add(cube);

  var sphereGeometry = new SphereGeometry(4, 20, 20);
  var sphereMaterial = new MeshLambertMaterial({ color: 0x7777ff });
  var sphere = new Mesh(sphereGeometry, sphereMaterial);

  // position the sphere
  sphere.position.x = 20;
  sphere.position.y = 0;
  sphere.position.z = 2;
  sphere.castShadow = true;

  // add the sphere to the scene
  scene.add(sphere);

  // position and point the camera to the center of the scene
  camera.position.x = -30;
  camera.position.y = 40;
  camera.position.z = 30;
  camera.lookAt(scene.position);

  // add subtle ambient lighting
  var ambienLight = new AmbientLight(0x353535);
  scene.add(ambienLight);

  // add spotlight for the shadows
  var spotLight = new SpotLight(0xffffff);
  spotLight.position.set(-10, 20, -5);
  spotLight.castShadow = true;
  scene.add(spotLight);

  // add the output of the renderer to the html element
  document.getElementById('app').appendChild(renderer.domElement);

  // call the render function
  var step = 0;

  var controls = new (function () {
    this.rotationSpeed = 0.02;
    this.bouncingSpeed = 0.03;
  })();

  var gui = new dat.GUI();
  gui.add(controls, 'rotationSpeed', 0, 0.5);
  gui.add(controls, 'bouncingSpeed', 0, 0.5);

  render();

  function render() {
    // update the stats and the controls
    trackballControls.update(clock.getDelta());
    stats.update();

    // rotate the cube around its axes
    cube.rotation.x += controls.rotationSpeed;
    cube.rotation.y += controls.rotationSpeed;
    cube.rotation.z += controls.rotationSpeed;

    // bounce the sphere up and down
    step += controls.bouncingSpeed;
    sphere.position.x = 20 + 10 * Math.cos(step);
    sphere.position.y = 2 + 10 * Math.abs(Math.sin(step));

    // render using requestAnimationFrame
    requestAnimationFrame(render);
    renderer.render(scene, camera);
  }

  function onResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
  }
};