import * as THREE from 'three'

import { FOG_COLOR, CAMERA_NEAR, CAMERA_FAR, CAMERA_X, CAMERA_Y, CAMERA_Z } from './constants'

export const scene = new THREE.Scene()
scene.fog = new THREE.Fog(FOG_COLOR, 2, 15)

export const camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, CAMERA_NEAR, CAMERA_FAR)
camera.position.set(CAMERA_X, CAMERA_Y, CAMERA_Z)

export const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
renderer.setClearColor(scene.fog.color)
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setSize(window.innerWidth, window.innerHeight)

let lights = [
  new THREE.DirectionalLight(0xefefff, 1.5),
  new THREE.DirectionalLight(0xefefff, 1.5),
]
lights[0].position.set(1, 1, 1).normalize()
lights[1].position.set(-1, -1, -1).normalize()
lights.forEach(light => scene.add(light))

export function init() {
  const container = document.querySelector('#three_container')
  container.appendChild(renderer.domElement)
  window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
    renderer.setSize(window.innerWidth, window.innerHeight)
  }, false)
}

export function render() {
  renderer.render(scene, camera)
}


window.scene = scene
window.THREE = THREE