-
Notifications
You must be signed in to change notification settings - Fork 0
/
rendering.js
88 lines (70 loc) · 2.18 KB
/
rendering.js
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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"
export class Rendering {
constructor(canvas, palette) {
this.canvas = canvas;
let hex = "#"+ palette.highlight.getHexString()
document.documentElement.style.setProperty("--text", hex);
this.vp = {
canvas: {
width: canvas.offsetWidth,
height: canvas.offsetHeight,
dpr: Math.min(window.devicePixelRatio, 2)
},
scene: {
width: 1,
height: 1
},
screen: {
width: window.innerWidth,
height: window.innerHeight,
},
}
this.renderer = new THREE.WebGLRenderer({
antialias: true,
canvas,
stencil: false,
});
this.renderer.setSize(this.vp.canvas.width, this.vp.canvas.height, false);
this.renderer.setPixelRatio(this.vp.canvas.dpr);
this.camera = new THREE.PerspectiveCamera(
45,
this.vp.canvas.width / this.vp.canvas.height,
0.1,
10000
);
this.scene = new THREE.Scene();
this.scene.background = palette.BG.clone()
this.clock = new THREE.Clock();
this.vp.scene = this.getViewSizeAtDepth();
this.disposed = false;
this.addEvents();
}
addEvents() {
window.addEventListener("resize", this.onResize);
}
dispose() {}
getViewSizeAtDepth(depth = 0) {
const fovInRadians = (this.camera.fov * Math.PI) / 180;
const height = Math.abs(
(this.camera.position.z - depth) * Math.tan(fovInRadians / 2) * 2
);
return { width: height * this.camera.aspect, height };
}
init() { }
render() {
this.renderer.render(this.scene, this.camera);
}
onResize = () => {
let canvas = this.canvas
this.vp.canvas.width = canvas.offsetWidth;
this.vp.canvas.height = canvas.offsetHeight;
this.vp.canvas.dpr = Math.min(window.devicePixelRatio, 2);
this.vp.scene.width = window.innerWidth;
this.vp.scene.height = window.innerHeight;
this.renderer.setSize(this.vp.canvas.width, this.vp.canvas.height, false);
this.camera.aspect = this.vp.canvas.width / this.vp.canvas.height;
this.camera.updateProjectionMatrix();
this.vp.scene = this.getViewSizeAtDepth();
}
}