Three.js: mouseup not working using TrackballCamera and dat.gui

Created on 30 Nov 2011 · 11Comments · Source: mrdoob/three.js

After editing a value using dat.gui, it's not possible to stop editing it when the trackball camera is activated. How can I fix that?

Question

Source

elfrank

👍1

Most helpful comment

For the record, @mrdoob is referring to passing the render context (renderer.domElement) to the controls call, like so:

controls = new THREE.TrackballControls( camera, renderer.domElement );

This tells the controls to only work when the mouse is over the renderer's domElement (the canvas). This change fixed the problems I was having with dat.GUI while using TrackballControls.

meetar on 2 Jun 2013

👍4

All 11 comments

Did this ever get resolved? I just made a project with three.js (latest from github and dat.gui latest from google code) and I am having the same issue. Any help is greatly appreciated! Thanks!

rezaali on 29 Feb 2012

I disabled the TrackballCamera.

elfrank on 1 Mar 2012

ahhhhhhhhhhhhh

rezaali on 1 Mar 2012

I'm same issue with TrackballControls, my solution is: copy file as EditableControls, remmark

//event.stopPropagation();

because i'm mainly use blender for 3D modelling, also change this line:

    this.zoomCamera = function () {

        // blender like zooming: up direction is zoom out.
        var factor = 1.0 + ( _zoomEnd.y - _zoomStart.y ) * -_this.zoomSpeed;

Pengeszikra on 11 Mar 2012

Curious why this ticket was closed. Seems like it's still acting weird in the latest version. A scene with TrackballControls and dat.GUI seems to conflict and I don't see an good workaround besides commenting out that event.stopPropagation() in TrackballControls.

ramayer on 30 Dec 2012

TrackballControls is no longer part of the library; it is part of the examples. You are free to hack away at it.

WestLangley on 30 Dec 2012

@WestLangley I'm starting to consider whether passing a domElement should be mandatory or not. People seem to be missing the point otherwise.

mrdoob on 30 Dec 2012

@mrdoob Another common issue is that users want to be able to use *Controls, and simultaneously be able to select objects, leading to mouse event conflicts inside the same domElement. I'm not sure of the solution for that.

WestLangley on 30 Dec 2012

This example shows how to do just that...
http://mrdoob.github.com/three.js/examples/webgl_interactive_draggablecubes.html

mrdoob on 30 Dec 2012

For the record, @mrdoob is referring to passing the render context (renderer.domElement) to the controls call, like so:

controls = new THREE.TrackballControls( camera, renderer.domElement );

This tells the controls to only work when the mouse is over the renderer's domElement (the canvas). This change fixed the problems I was having with dat.GUI while using TrackballControls.

meetar on 2 Jun 2013

👍4

thanks @meetar

this clarification resolved my confusion and got GUI working perfectly with TrackballControls