尝试使用CesiumJS为实体添加阴影。

huangapple go评论108阅读模式
英文:

Trying to add shadow to entities using CesiumJS

问题

我正在尝试在我的回放中添加一个"阴影",但我不确定是否应该将其命名为"阴影"。

请查看我的截图,您可以看到每个实体下面都有一个红色的阴影(我设置点来突出显示我要找的内容)。

您可以在https://ayvri.com/scene/z15y96gzjx/ck43xpxd500013e5ra7dh6s8e上实时查看它。

我尝试查找关于这个功能的文档,但到目前为止,我还没有找到。即使在Sandcastle上也没有找到。

我以为我需要添加粒子来添加一种尾巴,但我甚至不确定这是否是要研究的正确方向。

感谢任何帮助!

编辑2:为了清楚地看到我需要复制的内容,您还可以查看此截图。在白色轨迹下面,您可以看到从轨迹的开头开始的红色渐变(从不透明度0到1)。

尝试使用CesiumJS为实体添加阴影。

英文:

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.

尝试使用CesiumJS为实体添加阴影。

答案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(&#39;cesiumContainer&#39;, {
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 : &#39;../SampleData/models/CesiumBalloon/CesiumBalloon.glb&#39;,
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 &gt; 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 &lt; 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)
}
});

huangapple
  • 本文由 发表于 2020年1月6日 20:34:51
  • 转载请务必保留本文链接:https://go.coder-hub.com/59612231.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定