How to zoom a three.js scene with the mouse wheel?

Question

I have a simple three.js graphics, and I tried to use the answers in this and this question to make the created plot zoomable by the mouse wheel. By using the mouse wheel I would like to zoom in to the graphics or to zoom out.

Here is the complete code: pastebin link

However, when turning the mouse wheel nothing happens, and I do not get an error message. Maybe I am missing something?

Answer 1

DEMO

 var container, camera, scene, renderer, colors; var selected = 0; var selectedObject; var objects = []; // DOM element... container = document.createElement('div'); document.body.appendChild(container); // Camera... camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000); camera.position.set(0, 0, 150); // Scene... scene = new THREE.Scene(); scene.add(camera); // Renderer... renderer = new THREE.WebGLRenderer({ clearAlpha: 1 }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setClearColor(0xffffff, 1); document.body.appendChild(renderer.domElement); // Scatter plot... scatterPlot = new THREE.Object3D(); scene.add(scatterPlot); // Plot some random points... circle = new THREE.CircleGeometry(1, 20); colors = []; var max = 50; var min = -50; for (var i = 0; i < 10; i++) { var object = new THREE.Mesh( circle.clone(), new THREE.MeshBasicMaterial( { color: new THREE.Color('black'), opacity: 0.5 } ) ); object.position.x = Math.random() * (max - min) + min; object.position.y = Math.random() * (max - min) + min; object.position.z = 0; scene.add( object ); objects.push( object ); } animate(); function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } raycaster = new THREE.Raycaster(); mouse = new THREE.Vector2(); document.addEventListener( 'mousedown', onDocumentMouseDown, false ); document.addEventListener( 'mousewheel', onDocumentMouseWheel, false ); function onDocumentMouseDown( event ) { event.preventDefault(); mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1; mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1; raycaster.setFromCamera( mouse, camera ); var intersects = raycaster.intersectObjects( objects ); if ( intersects.length > 0 ) { //intersects[ 0 ].object.material.color.set('red'); //intersects[ 0 ].object.geometry.scale(1.1,1.1,1.1); if (selected === 0) { selected = 1; selectedObject = intersects[ 0 ].object; selectedObject.material.color.set('red'); console.log(selectedObject.position.x); } else { selected = 0; var geometry = new THREE.Geometry(); geometry.vertices.push(intersects[ 0 ].object.position); geometry.vertices.push(selectedObject.position); var line = new THREE.Line(geometry, new THREE.LineBasicMaterial({ color: 0x0000ff })); scene.add(line); selectedObject.material.color.set('black'); } } } function onWindowResize() { camera.left = window.innerWidth / - 2; camera.right = window.innerWidth / 2; camera.top = window.innerHeight / 2; camera.bottom = window.innerHeight / - 2; camera.aspect = window.innerWidth / window.innerHeight; renderer.setSize( window.innerWidth, window.innerHeight ); } function onDocumentMouseWheel( event ) { var fovMAX = 160; var fovMIN = 1; camera.fov -= event.wheelDeltaY * 0.05; camera.fov = Math.max( Math.min( camera.fov, fovMAX ), fovMIN ); camera.projectionMatrix = new THREE.Matrix4().makePerspective(camera.fov, window.innerWidth / window.innerHeight, camera.near, camera.far); }

 body { margin: 0; } canvas { width: 100%; height: 100% }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/54/three.js"></script>

In your code add event listener

document.addEventListener( 'mousewheel', onDocumentMouseWheel, false );

Answer 2

document.addEventListener( 'mousewheel', (event) => {
    camera.position.z +=event.deltaY/500;
});

Answer 3

The mousewheel event is supported only in Webkit browsers.
For cross-browser compaitibility use the wheel event.