Cesium and Left click handler

devon....@gmail.com

unread,

Apr 15, 2019, 7:53:57 PM4/15/19

to cesium-dev

I am trying to use a screenSpaceEventHandler() with a left click to change camera position, but I found out that if you have other cesium or html select or sliders the handler basically disables the ability to use the sliders or access the select menu. Help!

devon....@gmail.com

unread,

Apr 15, 2019, 8:02:25 PM4/15/19

to cesium-dev

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

var entity;

function getColorBlendMode(colorBlendMode) {
return Cesium.ColorBlendMode[colorBlendMode.toUpperCase()];
}

function getColor(colorName, alpha) {
var color = Cesium.Color[colorName.toUpperCase()];
return Cesium.Color.fromAlpha(color, parseFloat(alpha));
}

// The viewModel tracks the state of our mini application.
var viewModel = {
color : 'Red',
colors : ['White', 'Red', 'Green', 'Blue', 'Yellow', 'Gray'],
alpha : 1.0,
colorBlendMode : 'Highlight',
colorBlendModes : ['Highlight', 'Replace', 'Mix'],
colorBlendAmount : 0.5,
colorBlendAmountEnabled : false,
silhouetteColor : 'Red',
silhouetteColors : ['Red', 'Green', 'Blue', 'Yellow', 'Gray'],
silhouetteAlpha : 1.0,
silhouetteSize : 2.0
};
var handler = new Cesium.ScreenSpaceEventHandler(Cesium.Scene.canvas);
handler.setInputAction(function(movement) {

var mousePosition = Cesium.Cartesian3.clone(movement.position);
console.log(mousePosition);
}, Cesium.ScreenSpaceEventType.LEFT_DOWN);

// Convert the viewModel members into knockout observables.
Cesium.knockout.track(viewModel);

// Bind the viewModel to the DOM elements of the UI that call for it.
var toolbar = document.getElementById('toolbar');
Cesium.knockout.applyBindings(viewModel, toolbar);

Cesium.knockout.getObservable(viewModel, 'color').subscribe(
function(newValue) {
entity.model.color = getColor(newValue, viewModel.alpha);
}
);

Cesium.knockout.getObservable(viewModel, 'alpha').subscribe(
function(newValue) {
entity.model.color = getColor(viewModel.color, newValue);
}
);

Cesium.knockout.getObservable(viewModel, 'colorBlendMode').subscribe(
function(newValue) {
var colorBlendMode = getColorBlendMode(newValue);
entity.model.colorBlendMode = colorBlendMode;
viewModel.colorBlendAmountEnabled = (colorBlendMode === Cesium.ColorBlendMode.MIX);
}
);

Cesium.knockout.getObservable(viewModel, 'colorBlendAmount').subscribe(
function(newValue) {
entity.model.colorBlendAmount = parseFloat(newValue);
}
);

Cesium.knockout.getObservable(viewModel, 'silhouetteColor').subscribe(
function(newValue) {
entity.model.silhouetteColor = getColor(newValue, viewModel.silhouetteAlpha);
}
);

Cesium.knockout.getObservable(viewModel, 'silhouetteAlpha').subscribe(
function(newValue) {
entity.model.silhouetteColor = getColor(viewModel.silhouetteColor, newValue);
}
);

Cesium.knockout.getObservable(viewModel, 'silhouetteSize').subscribe(
function(newValue) {
entity.model.silhouetteSize = parseFloat(newValue);
}
);

function createModel(url, height) {
viewer.entities.removeAll();

var position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, height);
var heading = Cesium.Math.toRadians(135);
var pitch = 0;
var roll = 0;
var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr);

entity = viewer.entities.add({
name : url,
position : position,
orientation : orientation,
model : {
uri : url,
minimumPixelSize : 128,
maximumScale : 20000,
color : getColor(viewModel.color, viewModel.alpha),
colorBlendMode : getColorBlendMode(viewModel.colorBlendMode),
colorBlendAmount : parseFloat(viewModel.colorBlendAmount),
silhouetteColor : getColor(viewModel.silhouetteColor, viewModel.silhouetteAlpha),
silhouetteSize : parseFloat(viewModel.silhouetteSize)
}
});
viewer.trackedEntity = entity;
}

Sandcastle.addToolbarMenu(options);

Sandcastle.addToggleButton('Shadows', viewer.shadows, function(checked) {
viewer.shadows = checked;
});

Omar Shehata

unread,

Apr 18, 2019, 4:10:50 PM4/18/19

to cesium-dev

Thanks for posting your code! Your problem is you're passing the canvas as:

Cesium.Scene.canvas

But this is not defined. The canvas can be obtained by viewer.scene.canvas

Try replacing that. Let me know if it fixes your problem! Here's a Sandcastle of your code modified with that fix.

devon....@gmail.com

unread,

Apr 26, 2019, 5:42:05 PM4/26/19

to cesium-dev

THANK YOU OMAR THAT WAS it!!!!!! I appreciate you!!

Reply all

Reply to author

Forward