CODEWITHSUNDEEP
javascriptthree.js
iLikeRoombas
iLikeRoombas

Reputation: 11

Can't get Three.js TrackballControl zoom to work

My code

//zoom and scaleFactor are both constants
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
camera = new THREE.OrthographicCamera(
    window.innerWidth / - (zoom / scaleFactor),
    window.innerWidth / (zoom / scaleFactor),
    window.innerHeight / (zoom / scaleFactor),
    window.innerHeight / - (zoom / scaleFactor), 
    -500, 1000
);
scene = new THREE.Scene();
controls = new THREE.TrackballControls(camera, renderer.domElement);

Hello people of stackoverflow, I can't seem to get zoom to work with the trackball control object in Three.js. I used the OrbitControls object and it worked swimmingly, but zoom simply isn't working when i use TrackballControls. I made sure that noZoom is false and played around with zoomSpeed, both to no avail. I also tried debugging the source code for TrackballControls but that didn't get me anywhere.

Is it relevant that I'm using an orthographic camera? It seems plausible to me that the zoom actually just moves the camera forward and back to achieve zoom, hence the zoom doesn't work with orthographic projection, but at the same time that would mess with the perspective of the image using a perspective camera.

I'd appreciate any help. Thank you!

Upvotes: 0

Views: 900

Answers (1)

iLikeRoombas
iLikeRoombas

Reputation: 11

It appears to me that the method of zooming that TrackallControls uses is actually to move the camera back and forth, hence no zoom is achieved when using an orthographic camera. What I did to get zoom is to add the following lines to my source of TrackballControls.js around line 480:

case 2:
    // Zoom in pages
    _zoomStart.y -= event.deltaY * 0.025;
    //add the following 2 lines
    object.zoom -= event.deltaY * 0.025;
    object.updateProjectionMatrix();
    break;

Do the same for the rest of the cases and you now have zoom when you scroll the mouse. It's not as fluid as the normal zoom though. Also, the code you add still runs even when you're using a perspective camera, so you'll have to put a check somewhere in there to prevent that if you want your zoom to work normally with a perspective camera.

Upvotes: 1

Related Questions