Change camera position.z with mouse wheel in threejs

问题

Has anyone any idea how to change the camera.position.z (with mouse wheel) of the camera, and make a scroll effect?

When I try with a variable it does not work.

回答1:

TrackballControls or OrbitControls from examples can be used enable zoom (and rotate and pan). See example https://threejs.org/examples/?q=contro#misc_controls_trackball

Include one of the controls that you can find in downloaded package in three.js-master/examples/js/controls/:

<script src="three.js-master/examples/js/controls/OrbitControls.js"></script>

And add to your code

var controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render );

And zooming should work out of the box.

If you are only interested in zooming other features can be disabled.

this.enableKeys = false;
this.enablePan = false;
this.enableRotate = false;

See also OrbitControls sources for more options OrbitControls

回答2:

now i am here:

const scl=0;

$(window).on('DOMMouseScroll mousewheel', function (e) {


if(e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {

    while(scl==0) {

        scl+=0.05;
                camera.position.z+=scl;
                //console.log("1."+" "+scl);
    }

} else {

    while(scl==0) {


        scl+=0.05;
                camera.position.z-=scl;
                //console.log("2."+" "+scl);
    }

}
//console.log("3."+" "+scl);;
 scl=0;
});

window.setInterval(function(){
     scl=0;
}, 10);

来源：https://stackoverflow.com/questions/41897577/change-camera-position-z-with-mouse-wheel-in-threejs