Click and drag?

2249 views
Skip to first unread message

Sai Asuka

unread,
Feb 23, 2015, 7:18:06 PM2/23/15
to cesiu...@googlegroups.com
I see you can click on entity/cube drawn. Is it possible to click and drag a cube so it changes its position based on where you drag and release it with your mouse?

Matthew Amato

unread,
Feb 23, 2015, 8:53:38 PM2/23/15
to cesiu...@googlegroups.com
While there's no out-of-the-box "mode" for doing this, it's easy enough to do using existing functionality.  Below is an example that you can post into Sandcastle and play with.  It's not perfect (I just wrote it 5 minutes ago) but it will hopefully get you started in the right direction.

var viewer = new Cesium.Viewer('cesiumContainer', {infoBox : false, selectionIndicator : false});

var entity = viewer.entities.add({
    name : 'Red box with black outline',
    position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),
    box : {
        dimensions : new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
        material : Cesium.Color.RED,
        outline : true,
        outlineColor : Cesium.Color.BLACK
    }
});

var mousePosition = new Cesium.Cartesian2();
var mousePositionProperty = new Cesium.CallbackProperty(function(time, result){
    var position = scene.camera.pickEllipsoid(mousePosition, undefined, result);
    var cartographic = Cesium.Ellipsoid.WGS84.cartesianToCartographic(position);
    cartographic.height = 300000.0;
    return Cesium.Ellipsoid.WGS84.cartographicToCartesian(cartographic);
}, false);

var scene = viewer.scene;
var dragging = false;
var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
handler.setInputAction(
    function(click) {
        var pickedObject = scene.pick(click.position);
        if (Cesium.defined(pickedObject) && (pickedObject.id === entity)) {
            dragging = true;
            scene.screenSpaceCameraController.enableRotate = false;
            Cesium.Cartesian2.clone(click.position, mousePosition);
            entity.position = mousePositionProperty;
        }
    },
    Cesium.ScreenSpaceEventType.LEFT_DOWN
);

handler.setInputAction(
    function(movement) {
        if (dragging) {
            Cesium.Cartesian2.clone(movement.endPosition, mousePosition);
        }
    },
    Cesium.ScreenSpaceEventType.MOUSE_MOVE
);


handler.setInputAction(
    function(click) {
        if(dragging) {
          dragging = false;
          scene.screenSpaceCameraController.enableRotate = true;
          entity.position = scene.camera.pickEllipsoid(click.position);
        }
    },
    Cesium.ScreenSpaceEventType.LEFT_UP
);

On Mon, Feb 23, 2015 at 7:18 PM, Sai Asuka <asuka...@gmail.com> wrote:
I see you can click on entity/cube drawn. Is it possible to click and drag a cube so it changes its position based on where you drag and release it with your mouse?

--
You received this message because you are subscribed to the Google Groups "cesium-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to cesium-dev+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Hyper Sonic

unread,
Feb 23, 2015, 9:34:03 PM2/23/15
to cesiu...@googlegroups.com
After dragging the box I noticed that as you move the camera the box appears to slide around, not keeping up with the terrain. I couldn't figure out why though. Using console logs I can tell it's not executing the handler functions anymore.

It would be neat if entities had a property called draggable.

Matthew Amato

unread,
Feb 23, 2015, 10:03:03 PM2/23/15
to cesiu...@googlegroups.com
The reason is because it sets the final position using click.position without re-adjusting the height like it does in the CallbackProperty, it would be an easy fix (in reality this was a quick and dirty example so I would abstract functionality into a class.  There's also issues with the code if you double click on the box (you can disable this easy enough though).

The problem with adding something like entity.draggable is that it's way too high-level and needs to make too many assumptions about the nature of the data.  For example, if the position isn't a constant, non-time-dynamic value the dragging makes little sense.  That's not to say that object editing can't be done in a generic opt-in sort of way.  In the long term I'm sure we'll have something, (and it may be a plug-in) but there are way to many other core things that need work first.  There is the DrawHelper plug-in already, but I've never tried it: https://github.com/leforthomas/cesium-drawhelper


On Mon, Feb 23, 2015 at 9:34 PM, Hyper Sonic <gman...@gmail.com> wrote:
After dragging the box I noticed that as you move the camera the box appears to slide around, not keeping up with the terrain. I couldn't figure out why though. Using console logs I can tell it's not executing the handler functions anymore.

It would be neat if entities had a property called draggable.

--

Hyper Sonic

unread,
Feb 23, 2015, 10:37:58 PM2/23/15
to cesiu...@googlegroups.com
Ah, so that's what's causing it. Changing the last setInputAction to the following fixes it.
handler.setInputAction(
   
function(click) {
       
if(dragging) {
          dragging
= false;
          scene
.screenSpaceCameraController.enableRotate = true;

         
var mypos = scene.camera.pickEllipsoid(click.position);
         
var cartographic = Cesium.Ellipsoid.WGS84.cartesianToCartographic(mypos);
          cartographic
.height = 300000.0;
         
var mypos = Cesium.Ellipsoid.WGS84.cartographicToCartesian(cartographic);
          entity
.position = mypos;
       
}
   
},
   
Cesium.ScreenSpaceEventType.LEFT_UP
);

Perhaps someone could make a Cesium editor plugin sometime in the future, with the ability of not only dragging entire entities, but moving vertices around as well. That drawhelper app does this, but for now limited to very basic geometries. I wonder if it can output the resulting drawing to entity code.

dic...@gmail.com

unread,
Feb 24, 2015, 12:03:12 PM2/24/15
to cesiu...@googlegroups.com
Just wanted to add that I also need the ability to drag entire entities as well as moving the vertices.

Hyper Sonic

unread,
Feb 24, 2015, 1:02:35 PM2/24/15
to cesiu...@googlegroups.com, dic...@gmail.com
Maybe the author of https://github.com/leforthomas/cesium-drawhelper might continue their work if there's enough interest, it's been 7 months since the last update to the project. Be sure to check out the live demo at http://pad.geocento.com/DrawHelper/

dic...@gmail.com

unread,
Feb 24, 2015, 1:11:20 PM2/24/15
to cesiu...@googlegroups.com, dic...@gmail.com
I actually found that a while ago and was planning to use it for as much as I can. That's a great idea though, I think I might contact the author and let him know there is interest in this so he's aware.

chris.m...@gmail.com

unread,
Mar 7, 2017, 11:03:13 AM3/7/17
to cesium-dev, dic...@gmail.com
On Tuesday, 24 February 2015 19:11:20 UTC+1, dic...@gmail.com wrote:
> I actually found that a while ago and was planning to use it for as much as I can. That's a great idea though, I think I might contact the author and let him know there is interest in this so he's aware.

This is crazy late, but I've created my own set of shape creation tools to be used with the latest versions of Cesium.
Drawhelper project was a great reference but hasn't been updated in quite a long time.


I will post back once I have everything ready for sharing.
Its still a bit rough at the moment but works very similarly.

Ryan Hickman

unread,
Apr 22, 2017, 8:42:41 PM4/22/17
to cesium-dev, dic...@gmail.com, chris.m...@gmail.com
Chris,

I look forward to your follow-up. Drawing tools in Cesium would be extremely helpful for my project.

Rachel Hwang

unread,
Apr 24, 2017, 4:36:53 PM4/24/17
to cesium-dev, dic...@gmail.com, chris.m...@gmail.com
Sounds great, Chris! Keep us posted! We're interested in what solutions you come up with.

Best,
- Rachel

Cris Lacumba

unread,
Jul 28, 2017, 3:20:28 AM7/28/17
to cesium-dev, dic...@gmail.com, chris.m...@gmail.com
Hi,

Is it possible to improve the drag & drop solution allowing only moving the object in a certain axis? Or to rotate the object over itself?

Thanks in advance

Best regards

Rachel Hwang

unread,
Jul 28, 2017, 11:45:31 AM7/28/17
to cesium-dev, dic...@gmail.com, chris.m...@gmail.com
Hi,

Yep! Just modify the code to only set the movement in the axis you want. For rotation, you can check how far the mouse has moved from some original position, convert that distance into degrees of rotation and update the entity's orientation accordingly. Shouldn't been too hard.

Unfortunately, I don't currently have the bandwidth to make you a code example, but I'll come back to this thread if I get the chance later.

Best,
- Rachel

sergei...@gmail.com

unread,
Apr 11, 2020, 5:11:54 AM4/11/20
to cesium-dev
Hi Rachel,

Are you succeed with your drag questions? 
I am working on a problem to move a model around a map using gizmo. 
So I think I need your advice how to implement movement along certain axis.
model_gizmo.png

Omar Shehata

unread,
May 4, 2020, 2:34:07 PM5/4/20
to cesium-dev
Hey Sergei,

Heads up that the forum has transitioned over to Discourse and this Google Group will be put into read-only mode today. Details about the transition here.
Reply all
Reply to author
Forward
0 new messages