Currently delving into the world of WebGL (Three.js) to explore the possibilities of rendering 3D scenes within an Angular app.
One challenge I'm facing is finding a way to make the mousewheel events zoom in and out of the canvas specifically, rather than the entire window. I've tried disabling the mousewheel and mousedown event listeners but they are still picking up the events. How can I achieve the desired zoom functionality for the canvas only?
You can find my code here: https://stackblitz.com/edit/angular-ivy-hwzz3r.
animate() {
// We have to run this outside angular zones,
// because it could trigger heavy changeDetection cycles.
this.ngZone.runOutsideAngular(() => {
if (document.readyState !== 'loading') {
this.render();
} else {
window.addEventListener('DOMContentLoaded', () => {
this.render();
});
}
window.addEventListener('resize', () => {
this.resize();
});
window.addEventListener('mousewheel', (event) => {
event.preventDefault();
}, false);
window.addEventListener('mousedown', (event) => {
event.preventDefault();
}, false);
});
}