2

Using thingiview.js, Three.js and the trackballControls, I've put together a system in which I can upload an STL file, and then render it on the canvas. trackballControls are pretty great with some adjustment, but I'm having an issue:

I would like to zoom in at the point of the mouse cursor as opposed to the center of the grid/plane.

I've done a simple captureEvent to get the on screen coordinates of the mouse and track it, but I'm having issue on figuring out where to tap into the control scheme to do it.

I checked out the _zoomStart / _zoomEnd stuff (which confuses me a little as it goes off of "y", I assumed it would be "z"). But when trying to add a _zoomStart.x, it basically ignores it.

Now I may not be a guru, but I'm comfortable banging around usually.

I'd also like to make sure that when I pan, the zoom and rotate still bases off the center of the object, as opposed to the center of the grid/plane.

Have been searching for days through posts and examples, but not really finding any answers.

I'm sure I'm not looking in the right place/heading in the right direction. A helpful nudge (or better yet a swift kick) in the right direction would be truly appreciated.

EDIT

this.zoomCamera = function () {

        var factor = 1.0 + ( _zoomEnd.y - _zoomStart.y ) * _this.zoomSpeed;

        if ( factor !== 1.0 && factor > 0.0 ) {

            _eye.multiplyScalar( factor );

            if ( _this.staticMoving ) {

                _zoomStart.copy( _zoomEnd );

            } else {

                _zoomStart.y += ( _zoomEnd.y - _zoomStart.y ) * this.dynamicDampingFactor;

            }

        }

    };

I assume the above is where I would go in for the zoom alter. What I don't understand is it being set to _zoomStart.y. But taking it as it is, how would I implement x?

I mean, if _zoomStart and _zoomEnd are a Vector2, where in the above code does it define x?

confuzzled

WestLangley
  • 102,557
  • 10
  • 276
  • 276
Taraes
  • 147
  • 1
  • 6
  • see : http://stackoverflow.com/questions/23994206/zoom-to-object-in-threejs/30514984#30514984 – RAM May 28 '15 at 19:10

2 Answers2

1

Zooming in Trackballcontrols is not actually zooming (that would be setting the camera fov). Two objects are just getting moved around in the controls..., the other would be the camera (this.object), the other the point it's looking at (this.target). I have not played much with trackballcontrols, but I would hazard a guess it won't touch the target at all (so all movement and zooming will revolve around that).

You could try changing the target at onclick, something like:

mycontrols.target = new THREE.Vector3(newx, newy, newz);

You might need to update/reset some other Trackballcontrols internal variables, but it might also work just like that.

For getting the 3D x/y/z coordinates from the 2D x/y mouse coordinates, I suggest searching around for ray casting or object picking, should find plenty of examples.

yaku
  • 3,061
  • 2
  • 19
  • 38
  • An onclick won't work unfortunately. I'm aware that the movement (rot, zoom, pan) is just the camera moving around. But is there a way to set the zoom in point to the x/y of the mouse pointer itself? – Taraes Jan 22 '13 at 17:19
  • Mouse pointer does not exist in 3D space, so you need some way to tell which point in space you want to zoom in (from Three.js's point of view, the mouse cursor exists on... i dunno... on the virtual camera lens or something). You can do that in onclick or onmouseover, but you need to figure out the 3D coordinates from mouse event x and y. – yaku Jan 22 '13 at 17:26
  • So if I understood correctly, you want to zoom into the 3D object/point under the mouse pointer (x, y in screen space).. If that's the case, you need to use the raycasting to get the 3D coordinates of that point in the model (x, y, z in world or camera space). Then use those coordinates as TrackballControls target, so when you zoom the camera, it moves towards that point. – yaku Jan 22 '13 at 17:46
  • Yes, precisely. I'll look into it as soon as I can see straight again. Thanks, if it works out, I'll accept. – Taraes Jan 22 '13 at 17:50
  • OK, tracked down and am now storing/tracking the 3D coordinates. Where do I splice in to the controls to add this as a target? I'm looking at the "this.zoomCamera = function" area, but this goes back to where I get confused as it uses "_zoomEnd.y" & "_zoomStart.y" Edited above for my guessed starting point and possibly show why I'm confused...besides the facts that I'm an idiot sometimes and I've been staring at this way too long... – Taraes Jan 23 '13 at 06:52
  • Well it's not the easiest code to read :) I think it's using the zoom related x and y variables just to get the amount of zoom (not coordinates) based on mouse screen position. You could add the code to set new center point to the beginning of update() function in TrackballControls.js: `this.target = new THREE.Vector3(x, y, z);` It might act weird/jumpy but that's the general idea. You can see the the calls to this.object.lookAt(this._target) and stuff later on in the same function – yaku Jan 23 '13 at 13:02
0

The trick is that _zoomStart and _zoomEnd is created for touch zooming, and when you zoom using the mouse wheel you have to pass only one variable expressing: "how much to zoom". The programmer didn't create a new variable for it but used the _zoom###.y component.

So _zoomStart and _zoomEnd doesn't provide information about how the zooming will be executed, these variables contain the "instruction" only. Then the software converts it to the "zoompan" vector expressing the required movement of the camera in 3D.

omid
  • 762
  • 8
  • 26
user5489481
  • 1