| 135 | renderer: THREE.WebGLRenderer | null = null; |
| 136 | clock: THREE.Clock | null = null; |
| 137 | init(container: HTMLElement) { |
| 138 | this.container = container; |
| 139 | this.pixelRatio = Math.min(window.devicePixelRatio || 1, 2); |
| 140 | this.resize(); |
| 141 | this.renderer = new THREE.WebGLRenderer({ |
| 142 | antialias: true, |
| 143 | alpha: true, |
| 144 | preserveDrawingBuffer: true, |
| 145 | }); |
| 146 | this.renderer.autoClear = false; |
| 147 | this.renderer.setClearColor(new THREE.Color(0x000000), 0); |
| 148 | this.renderer.setPixelRatio(this.pixelRatio); |
| 149 | this.renderer.setSize(this.width, this.height); |
| 150 | const el = this.renderer.domElement; |
| 151 | el.style.width = "100%"; |
| 152 | el.style.height = "100%"; |
| 153 | el.style.display = "block"; |
| 154 | this.clock = new THREE.Clock(); |
| 155 | this.clock.start(); |
| 156 | } |
| 157 | resize() { |
| 158 | if (!this.container) return; |
| 159 | const rect = this.container.getBoundingClientRect(); |