1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
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(3, 3, 3).normalize()
lights[1].position.set(-3, -3, -3).normalize()
lights.forEach(light => scene.add(light))
var ambient = new THREE.AmbientLight( 0x555555 );
scene.add(ambient);
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
|
