英文:
Trying to add shadow to entities using CesiumJS
问题
我正在尝试在我的回放中添加一个"阴影",但我不确定是否应该将其命名为"阴影"。
请查看我的截图,您可以看到每个实体下面都有一个红色的阴影(我设置点来突出显示我要找的内容)。
您可以在https://ayvri.com/scene/z15y96gzjx/ck43xpxd500013e5ra7dh6s8e上实时查看它。
我尝试查找关于这个功能的文档,但到目前为止,我还没有找到。即使在Sandcastle上也没有找到。
我以为我需要添加粒子来添加一种尾巴,但我甚至不确定这是否是要研究的正确方向。
感谢任何帮助!
编辑2:为了清楚地看到我需要复制的内容,您还可以查看此截图。在白色轨迹下面,您可以看到从轨迹的开头开始的红色渐变(从不透明度0到1)。
英文:
I'm trying to add a "shadow" of the in my replay but I'm not exactly sure if I should name that as a "shadow".
Please, look at my screenshot, you can see a red shadow below every entities (where I set the dots to highlight what I'm looking for)
You can see it live on https://ayvri.com/scene/z15y96gzjx/ck43xpxd500013e5ra7dh6s8e
I did try to find something documented for this feature, but so far, I didn't found. Neither on the Sandcastle.
I thought I would need to add particles to add a kind of tail, but I'm not even sure if it's the right direction to investigate on.
Thanks for any help!
Edit 2 : To see clearly what I need to reproduce, you can also check this screenshot. Below the white trace, you can see a red gradient (from opacity 0 to 1) starting from the beginning of the trace.
答案1
得分: 1
这是我翻译好的代码部分:
var viewer = new Cesium.Viewer('cesiumContainer', {
scene3DOnly: true,
shadows: true,
timeline: false,
terrainShadows: Cesium.ShadowMode.ENABLED
});
var terrainProvider = Cesium.createWorldTerrain();
viewer.terrainProvider = terrainProvider;
var startLongitude = -123.0744619, startLatitude = 44.0503706;
viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(startLongitude, startLatitude, 900) });
var plane = viewer.entities.add({
model: {
uri: '../SampleData/models/CesiumBalloon/CesiumBalloon.glb',
minimumPixelSize: 128,
maximumScale: 20000,
color: Cesium.Color.BLACK.withAlpha(0.5),
}
});
var airPathArray = [];
var groundPathArray = [];
var timeNow = new Cesium.JulianDate.now();
airPathArray.push({ time: timeNow, degrees: { longitude: startLongitude, latitude: startLatitude }, position: new Cesium.Cartesian3.fromDegrees(startLongitude, startLatitude, 600) });
groundPathArray.push(startLongitude);
groundPathArray.push(startLatitude);
var pathHandler = setInterval(function () {
var timeNow = new Cesium.JulianDate.now();
var lon = airPathArray[airPathArray.length - 1].degrees.longitude + 0.0005 * (1 - Math.random());
var lat = airPathArray[airPathArray.length - 1].degrees.latitude + 0.0005 * (1 - Math.random());
airPathArray.push({ time: timeNow, degrees: { longitude: lon, latitude: lat }, position: new Cesium.Cartesian3.fromDegrees(lon, lat, 600) });
groundPathArray.push(lon, lat);
if (airPathArray.length > 3) {
airPathArray.shift();
groundPathArray.shift();
groundPathArray.shift();
}
viewRoute();
}, 1000);
function viewRoute() {
var trace = new Cesium.SampledPositionProperty();
for (var i = 0; i < airPathArray.length; i++) {
trace.addSample(airPathArray[i].time, airPathArray[i].position);
}
plane.position = airPathArray[0].position;
plane.orientation = new Cesium.VelocityOrientationProperty(trace);
}
function updatePositions() {
var positions = new Cesium.Cartesian3.fromDegreesArray(groundPathArray);
return positions;
}
var goroundPath = viewer.entities.add({
corridor: {
width: 50.0,
material: Cesium.Color.BLUE.withAlpha(0.5),
positions: new Cesium.CallbackProperty(updatePositions, false)
}
});
英文:
there is working example with ground tracer as I promised:
var viewer = new Cesium.Viewer('cesiumContainer', {
scene3DOnly : true,
shadows : true,
timeline: false,
terrainShadows : Cesium.ShadowMode.ENABLED
});
var terrainProvider = Cesium.createWorldTerrain();
viewer.terrainProvider = terrainProvider;
//---------------------- Start position of the plane ---------------------------
var startLongitude = -123.0744619, startLatitude = 44.0503706;
viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(startLongitude, startLatitude, 900)});
//--------------------------- CREATE A PLANE ENTITY ----------------------------
var plane = viewer.entities.add({
// position: new Cesium.Cartesian3.fromDegrees(startLongitude, startLatitude, 600),
model : {
uri : '../SampleData/models/CesiumBalloon/CesiumBalloon.glb',
minimumPixelSize : 128,
maximumScale : 20000,
color : Cesium.Color.BLACK.withAlpha(0.5),
}
});
//------------ Array of (time, position) samples along the plane route ---------
var airPathArray = [];
//------------ Array of the points of the ground path under the plane ----------
var groundPathArray = [];
//------------ Initialize arrays ----------
var timeNow = new Cesium.JulianDate.now();
airPathArray.push({time: timeNow, degrees: {longitude: startLongitude, latitude: startLatitude},
position: new Cesium.Cartesian3.fromDegrees(startLongitude, startLatitude, 600)});
groundPathArray.push(startLongitude);
groundPathArray.push(startLatitude);
//----------- Every 1 second a new point on the plane route is created ---------
var pathHandler = setInterval(function(){
var timeNow = new Cesium.JulianDate.now();
//timeNow = Cesium.JulianDate.addSeconds(timeNow, 2, new Cesium.JulianDate());
// At start it takes initial coordinates
// New next point coordinates are randomly taken
var lon = airPathArray[airPathArray.length - 1].degrees.longitude + 0.0005 * (1 - Math.random());
var lat = airPathArray[airPathArray.length - 1].degrees.latitude + 0.0005 * (1 - Math.random());
airPathArray.push({time: timeNow, degrees: {longitude: lon, latitude: lat}, position: new Cesium.Cartesian3.fromDegrees(lon, lat, 600)});
groundPathArray.push(lon, lat);
// The maximum number of the route points is fixed
if(airPathArray.length > 3){
airPathArray.shift();
groundPathArray.shift();
groundPathArray.shift();
}
// The updated route is ready for visualization
viewRoute();
}, 1000);
// Route visualization
function viewRoute() {
// console.log(airPathArray[0].position);
var trace = new Cesium.SampledPositionProperty();
for(var i = 0; i < airPathArray.length; i++) {
trace.addSample(airPathArray[i].time, airPathArray[i].position);
}
plane.position = airPathArray[0].position;
//plane.position.setInterpolationOptions({
// interpolationDegree : 1,
// interpolationAlgorithm : Cesium.LinearApproximation
//});
plane.orientation = new Cesium.VelocityOrientationProperty(trace);
}
//------------------------ CREATE A GROUND PATH ENTITY -------------------------
function updatePositions() {
var positions = new Cesium.Cartesian3.fromDegreesArray(groundPathArray);
return positions;
}
var goroundPath = viewer.entities.add({
corridor : {
width : 50.0,
material : Cesium.Color.BLUE.withAlpha(0.5),
positions: new Cesium.CallbackProperty(updatePositions, false)
}
});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论