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
|
import * as THREE from 'three'
export const scene = new THREE.Scene()
scene.fog = new THREE.Fog(0x191919, 2, 15)
export const camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 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
// let cameraTarget = new THREE.Vector3(0, 0, 0)
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)
console.log('rednerer init')
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)
}
|
