Add additional function to scroll

This topic has 3 replies, 3 voices, and was last updated 2 years, 1 month ago by kdv.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
2022-08-30 at 9:36 am #55363

eloxtec
Participant

I am developing an application in which I need an additional function for the mouse wheel. For this I have added an event listener for it in the function runCode. Now the event listener only works if I also hold the middle mouse button, which is not what I want. It should work directly when scrolling. Is there the original function that I can modify to use controls.enableZoom = false; afterwards? If so where can I find the original function or how could I alternatively solve the problem?

2022-08-30 at 9:58 am #55364
kdv
Participant
app.controls.enableZoom == true prevents all other wheel listeners from executing. But you can disable it and use (if needed) alternative zooming that allows additional actions.
```
app.controls.enableZoom = false;
let zoom = app.camera.zoom; 
const elem = document.getElementById('v3d-container');
elem.addEventListener('wheel', function() {
    event.preventDefault();
    zoom = app.camera.zoom - (event.deltaY / Math.abs(event.deltaY)) * 0.15;
    app.camera.zoom = v3d.MathUtils.clamp(zoom, 1, 3);
    app.camera.updateProjectionMatrix();
}, false);
```
Puzzles and JS coding. Fast and expensive.

If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of the meaning at all.
2022-08-31 at 11:56 am #55393
scatman2513
Participant
Thank you @kdv77kdv for your fast reply.

I created a new Verge project with the cube and pasted the code into the runCode(app) function, but the zoom function behaves differently than before. When I zoom out the background also changes and not only the cube which gets smaller.

Did I do something wrong?
Here is how I inserted it:
```
function runCode(app) {
    var obj = app.scene.getObjectByName('persp1'); //scene camera
    app.controls.enableZoom = false;
    let zoom = obj.zoom;
    const elem = document.getElementById('v3d-container');
    elem.addEventListener('wheel', function() {
        event.preventDefault();
        zoom = obj.zoom - event.deltaY * 0.00075;
        obj.zoom = v3d.MathUtils.clamp(zoom, 0.1, 10);
        obj.updateProjectionMatrix();
    }, false);
}
```
(sorry for other account, using this one for the office and had no access at home)

Edit:
I have now tested the zoom function on my real project. Since I have no details in the background but only a color gradient it is not that noticeable and I can already work with it.
2022-08-31 at 1:02 pm #55396
kdv
Participant
Well, I agree that at 0.1 the picture isn’t good )) but when zooming in it looks even more natural that the environment texture also changes scale )))

Try this code. There’s no need to disable zooming.
```
    const elem = app.controls.domElement;
    elem.addEventListener('wheel', function() {
        console.log('wheel');
    }, false);
```
Puzzles and JS coding. Fast and expensive.

If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of the meaning at all.
Author

Posts