How can I change the color of a cylinder when 2 objects collide?

Hi, I’m newbie in CesiumJS, Now I want to know. How can I change the color of a cylinder when 2 objects collide? I try many solution but isn’t work, I have no idea to solve it.

Req.

  • I have coordination and time for 2 of both. ( positionProperty.addSample(time, position);
    )
  • when the two centroid points ( cylinder A , cylinder B) are less than own radius ( REF :cylinder A or cylinder B ) → change current color of both to RED.

thank you .

CODE for samping time - coordinate

 const positionProperty = new Cesium.SampledPositionProperty();
    const positionProperty2 = new Cesium.SampledPositionProperty();

    for (let i = 0; i < flightData.length; i++) {
        const dataPoint = flightData[i];

        // Declare the time for this individual sample and store it in a new JulianDate instance.
        const time = Cesium.JulianDate.addSeconds(start, i * timeStepInSeconds, new Cesium.JulianDate());
        const position = Cesium.Cartesian3.fromDegrees(dataPoint.longitude, dataPoint.latitude, dataPoint.height);
        // Store the position along with its timestamp.
        // Here we add the positions all upfront, but these can be added at run-time as samples are received from a server.
        positionProperty.addSample(time, position);

        viewer.entities.add({
            description: `Location: (${dataPoint.longitude}, ${dataPoint.latitude}, ${dataPoint.height})`,
            position: position,
            point: { pixelSize: 10, color: Cesium.Color.RED }
        });


    }

 for (let i = 0; i < flightData2.length; i++) {
        const dataPoint = flightData2[i];

        // Declare the time for this individual sample and store it in a new JulianDate instance.
        const time2 = Cesium.JulianDate.addSeconds(start2, i * timeStepInSeconds, new Cesium.JulianDate());
        const position2 = Cesium.Cartesian3.fromDegrees(dataPoint.longitude, dataPoint.latitude, dataPoint.height);
        // Store the position along with its timestamp.
        // Here we add the positions all upfront, but these can be added at run-time as samples are received from a server.
        positionProperty2.addSample(time2, position2);

        viewer.entities.add({
            description: `Location: (${dataPoint.longitude}, ${dataPoint.latitude}, ${dataPoint.height})`,
            position: position2,
            point: { pixelSize: 10, color: Cesium.Color.BLUE }
        });
}

CODE both of Green Cylinder

const lgreenCylinder = viewer.entities.add({
            name: "Green cylinder with black outline",
            position: positionProperty2,


            // Attach the 3D,
            orientation: new Cesium.VelocityOrientationProperty(positionProperty2),

            cylinder: {

                length: 170.0,
                topRadius: 155.0,
                bottomRadius: 155.0,
                material: Cesium.Color.GREEN.withAlpha(0.5),
                outline: true,
                outlineColor: Cesium.Color.DARK_GREEN,
                minimumPixelSize: 750, maximumPixelSize: 750
            },
        });



        const greenCylinder2 = viewer.entities.add({
            name: "Green cylinder with black outline2",
            position: positionProperty,


            // Attach the 3D,
            orientation: new Cesium.VelocityOrientationProperty(positionProperty),

            cylinder: {

                length: 170.0,
                topRadius: 155.0,
                bottomRadius: 155.0,
                material: Cesium.Color.GREEN.withAlpha(0.5),
                outline: true,
                outlineColor: Cesium.Color.DARK_GREEN,
                minimumPixelSize: 750, maximumPixelSize: 750
            },
        });

It is not entirely clear what the core of the question is:

  • How to obtain the position of the objects over time?
  • How to detect whether the objects collide?
  • How to change the color of the objects?

Depending on what the core of the question is, the answers might go into great detail, and list different possible approaches, each with pros and cons.

But here is a basic example sandcastle showing something that may be related to what you want to achieve:

  • It creates two SampledPositionProperty objects, one for each flight path
  • It creates two cylinder Entity objects, one for each sampled position property
    (Note that these are moved into functions to reduce the duplication a bit…)
  • It attaches an event listener to Scene.postUpdate
  • The event listener calls a function handleCollisions, which uses a function areColliding to check whether the cylinder entities collide, and changes their color if they do

The last one is where many degrees of freedom come into play, and where many assumptions are made. Specifically, it only implements the simple check that you described as

when the two centroid points […] are less than own radius […] → change current color

For other objects (e.g. boxes instead of cylinders), a different implementation would be needed (and doing proper intersection test for arbitrary objects can be quite tricky).

But maybe it helps, even if it is only to carve out more specific questions.

An aside: It is generally useful to add a Sandcastle to this sort of question. With a sandcastle, people can look at the surrounding code, may get a better idea about the goal, may have to make fewer guesses, and it’s much more likely that you’ll quickly get a helpful answer.

1 Like

It’s work for me, that’s Amazing !!! Thank you for you answers. I’m so apologize for my question.