ogl scene setup

index.js

import { Renderer, Camera, Transform, Orbit } from 'ogl'

import { Events } from '../events'

import { qs, bindAll } from '../util'

import store from '../store'

export default new (class {
  constructor() {
    this.renderer = new Renderer({
      dpr: Math.max(window.devicePixelRatio, 2),
      alpha: true,
    })

    this.gl = this.renderer.gl
    this.gl.clearColor(1, 1, 1, 0)

    this.container = qs('.gl')
    this.container.appendChild(this.gl.canvas)

    this.camera = new Camera(this.gl, { fov: 35 })
    this.camera.position.set(0, 0, 5)
    this.camera.lookAt([0, 0, 0])

    this.controls = new Orbit(this.camera)

    this.scene = new Transform()

    bindAll(this, 'resize', 'render')

    this.resize()
    this.addEvents()
  }

  resize() {
    this.renderer.setSize(store.bounds.ww, store.bounds.wh)
    this.camera.perspective({
      aspect: this.gl.canvas.width / this.gl.canvas.height,
    })
  }

  addEvents() {
    Events.on('resize', this.resize)
    Events.on('tick', this.render)
  }

  render() {
    this.controls.update()

    this.renderer.render({
      scene: this.scene,
      camera: this.camera,
    })
  }
})()