three.js

three.js

// Import librarys
import {
  //,
  BufferGeometry,
  Color,
  PerspectiveCamera,
  Scene,
  Vector3,
  WebGLRenderer,
  Object3D
} from 'three'
import { bindAll } from 'lodash-es'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { initGui } from '~/assets/js/Gui'
import { EventBus } from '~/assets/js/utils/event.js'

// import local
import { createEmptyPoints, addPoint, parsePoint, parseChordPack } from '~/assets/js/Points.js'
import { addCar, animateCar, carLoaded } from '~/assets/js/Car'
import { setBackgroundColor } from '~/assets/js/Helpers'
import { orbit } from '~/assets/js/Camera'
export default class Stage {
  constructor (opts = {}) {
    this.geometry = new BufferGeometry()
    this.maxParticle = 1000000 // This gets 3x later performance depends on this maybe fixable
    this.pointsCount = null
    this.points = null
    this.PointsMaterial = null
    this.container = opts.container || document.body
    this.guiContainer = opts.guiContainer || document.body
    this.controls = null
    this.car = undefined
    this.fromPosition = this.toPosition = this.fromRotation = this.toRotation = undefined
    this.addListeners()
    this.init()
    this.onResize()
  }

  addListeners () {
    bindAll(this, ['onResize', 'render']) // I want to get rid of lodash pls
    EventBus.$on('ON_RESIZE', this.onResize)
    EventBus.$on('ON_TICK', this.render)
  }

  removeListeners () {
    EventBus.$off('ON_RESIZE', this.onResize)
    EventBus.$off('ON_TICK', this.render)
  }

  init () {
    Object3D.DefaultUp = new Vector3(0, 0, 1)
    const pixelRatio = window.devicePixelRatio
    // const AA = pixelRatio <= 1
    /* Init renderer and canvas */
    this.renderer = new WebGLRenderer({
      // antialias: AA,
      // alpha: true
    })
    this.renderer.setPixelRatio(pixelRatio)
    this.renderer.setClearColor(new Color(0x121212))

    // this.renderer.powerPreference = 'high-performance'

    // this.container.style.overflow = 'hidden'
    // this.container.style.margin = 0
    this.container.appendChild(this.renderer.domElement)

    /* Main scene and camera */
    this.scene = new Scene()
    this.camera = new PerspectiveCamera(
      32,
      window.innerWidth / window.innerHeight,
      1,
      1000
    )
    this.controls = new OrbitControls(this.camera, this.container)

    // this.controls = new OrbitControls(this.camera, this.container);
    //
    // this.scene.add(new AxesHelper(100))
    this.createEmptyPoints()
    this.initGui()
    this.addCar()
  }

  onResize () {
    const newHeight = window.innerHeight - 48
    this.camera.aspect = window.innerWidth / newHeight
    this.camera.updateProjectionMatrix()
    this.renderer.setSize(window.innerWidth, newHeight)
  }

  render ({ mouse }) {
    if (this.car !== undefined && this.fromPosition && this.toPosition && this.fromRotation && this.toRotation) {
      this.car.position.lerpVectors(this.fromPosition, this.toPosition, 0.1)
      this.car.quaternion.slerpQuaternions(this.fromRotation, this.toRotation, 0.1)

      this.car.needsUpdate = true
      this.camera.lookAt(this.car.position)
      this.controls.target.copy(this.car.position)
    }

    this.controls.update()
    this.stats.update()
    this.renderer.clear()
    this.renderer.render(this.scene, this.camera)
  }
}
Stage.prototype.createEmptyPoints = createEmptyPoints
Stage.prototype.addPoint = addPoint
Stage.prototype.parsePoint = parsePoint
Stage.prototype.parseChordPack = parseChordPack
Stage.prototype.initGui = initGui
Stage.prototype.setBackgroundColor = setBackgroundColor
Stage.prototype.orbit = orbit
Stage.prototype.addCar = addCar
Stage.prototype.animateCar = animateCar
Stage.prototype.carLoaded = carLoaded