| 260 | } |
| 261 | |
| 262 | setMesh() { |
| 263 | this.textCanvas = new CanvasTxt(this.textString, { |
| 264 | fontSize: this.textFontSize, |
| 265 | fontFamily: 'IBM Plex Mono', |
| 266 | color: this.textColor |
| 267 | }); |
| 268 | this.textCanvas.resize(); |
| 269 | this.textCanvas.render(); |
| 270 | |
| 271 | this.texture = new THREE.CanvasTexture(this.textCanvas.texture); |
| 272 | this.texture.minFilter = THREE.NearestFilter; |
| 273 | |
| 274 | const textAspect = this.textCanvas.width / this.textCanvas.height; |
| 275 | const baseH = this.planeBaseHeight; |
| 276 | const planeW = baseH * textAspect; |
| 277 | const planeH = baseH; |
| 278 | |
| 279 | this.geometry = new THREE.PlaneGeometry(planeW, planeH, 36, 36); |
| 280 | this.material = new THREE.ShaderMaterial({ |
| 281 | vertexShader, |
| 282 | fragmentShader, |
| 283 | transparent: true, |
| 284 | uniforms: { |
| 285 | uTime: { value: 0 }, |
| 286 | mouse: { value: 1.0 }, |
| 287 | uTexture: { value: this.texture }, |
| 288 | uEnableWaves: { value: this.enableWaves ? 1.0 : 0.0 } |
| 289 | } |
| 290 | }); |
| 291 | |
| 292 | this.mesh = new THREE.Mesh(this.geometry, this.material); |
| 293 | this.scene.add(this.mesh); |
| 294 | } |
| 295 | |
| 296 | setRenderer() { |
| 297 | this.renderer = new THREE.WebGLRenderer({ antialias: false, alpha: true }); |