import * as THREE from 'three'

import { FOG_COLOR } 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, 0.001, 15)
camera.position.set(3, 0.15, 3)

// export const camera = new THREE.PerspectiveCamera(70, w / h, 1, 10000)
// camera.position.x = 0
// camera.position.y = 0
// camera.position.z = 200

export const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
renderer.setClearColor(scene.fog.color)
// renderer.setClearColor(0x000000, 0)
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)
}