Cesium and Left click handler

CesiumJS
1

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!

2

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;
}

var options = [{
    text : 'Aircraft',
    onselect : function() {
        createModel('../../../../Apps/SampleData/models/CesiumAir/Cesium_Air.glb', 5000.0);
    }
}, {
    text : 'Ground Vehicle',
    onselect : function() {
        createModel('../../../../Apps/SampleData/models/GroundVehicle/GroundVehicle.glb', 0);
    }
}, {
    text : 'Hot Air Balloon',
    onselect : function() {
        createModel('../../../../Apps/SampleData/models/CesiumBalloon/CesiumBalloon.glb', 1000.0);
    }
}, {
    text : 'Milk Truck',
    onselect : function() {
        createModel('../../../../Apps/SampleData/models/CesiumMilkTruck/CesiumMilkTruck-kmc.glb', 0);
    }
}, {
    text : 'Skinned Character',
    onselect : function() {
        createModel('../../../../Apps/SampleData/models/CesiumMan/Cesium_Man.glb', 0);
    }
}];

Sandcastle.addToolbarMenu(options);

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

3

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.

4

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