We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.

Add additional function to scroll

Home Forums Programming Add additional function to scroll

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #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?

    #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.

    #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.

    #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.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.