javascript - 铯 : View from the front of the tracked entity

标签 javascript camera entity cesiumjs

我需要实现跟踪实体的前 View ,它会根据实体的移动而变化。

当我为 viewer.trackedEntity 属性赋值时,相机会占据某个位置。是否可以更改此位置,使相机直接位于跟踪实体的前面?

我该如何为这个例子做这个?

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

var start = Cesium.JulianDate.fromDate(new Date(2015, 2, 25, 16));
var stop = Cesium.JulianDate.addSeconds(start, 360, new Cesium.JulianDate());

viewer.clock.startTime = start.clone();
viewer.clock.stopTime = stop.clone();
viewer.clock.currentTime = start.clone();
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
viewer.clock.multiplier = 10;

viewer.timeline.zoomTo(start, stop);

var position = new Cesium.SampledPositionProperty();
position.addSample(start, Cesium.Cartesian3.fromDegrees(-118.243683, 34.052235, 500000));
position.addSample(Cesium.JulianDate.addSeconds(start, 250, new Cesium.JulianDate()), Cesium.Cartesian3.fromDegrees(-110, 35.5, 500000));
position.addSample(Cesium.JulianDate.addSeconds(start, 500, new Cesium.JulianDate()), Cesium.Cartesian3.fromDegrees(-86.134903, 40.267193, 500000));

var entity = viewer.entities.add({
    availability : new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
        start : start,
        stop : stop
    })]),
    position : position,
    orientation : new Cesium.VelocityOrientationProperty(position),
    model : {
        uri : 'https://cesiumjs.org/Cesium/Apps/SampleData/models/CesiumAir/Cesium_Air.gltf',
        minimumPixelSize : 64
    },
    path : {
        resolution : 1,
        material : new Cesium.PolylineGlowMaterialProperty({
            glowPower : 0.1,
            color : Cesium.Color.YELLOW
        }),
        width : 10
    }
});

viewer.trackedEntity = entity;
<link href="https://cesiumjs.org/Cesium/Build/Cesium/Widgets/widgets.css" rel="stylesheet"/>
<script src="https://cesiumjs.org/Cesium/Build/CesiumUnminified/Cesium.js"></script>

<style>
    @import url(../templates/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar">
    <div id="interpolationMenu"></div>
</div>

最佳答案

当向 Cesium.Viewer 添加实体时,您在实体中有一个属性,viewFrom,因此通过执行以下操作:

var entity = viewer.entities.add({
    availability : new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
        start : start,
        stop : stop
    })]),
    position : position,
    orientation : new Cesium.VelocityOrientationProperty(position),
    model : {
        uri : 
'https://cesiumjs.org/Cesium/Apps/SampleData/models/CesiumAir/Cesium_Air.gltf',
        minimumPixelSize : 64
    },
    path : {
        resolution : 1,
        material : new Cesium.PolylineGlowMaterialProperty({
            glowPower : 0.1,
            color : Cesium.Color.YELLOW
        }),
        width : 10
    },
    viewFrom: new Cesium.Cartesian3(30, 0, 0),
});

你可以得到你想要的效果,观察 viewFrom 是一个 Cartesian3 对象,所以如果你想要一个 YZ 平面可见的正面 View ,你应该只在 X 轴上设置距离。 免责声明:正如评论中所指出的,这是一个东-北-所以 XYZ 取决于车辆本身的方向。

必须承认documentation for this非常差,甚至有关于此行为的错误。

但是在 long discussion in their forum 之后你会发现它是如何工作的

关于javascript - 铯 : View from the front of the tracked entity,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51383806/

相关文章:

android - 在Android中添加图像导致: Unable to resume activity : Failure delivering result ResultInfo{who=null, request=100, result=-1, data=null}

api - 图像背景去除

domain-driven-design - 领域驱动设计中跨界上下文的实体

javascript - 有没有办法检查我的脚本是否在 phantomjs 中运行?

javascript - 如何让 Codeship 通过 Heroku 上的 NodeJS ExpressJS 部署的 check_url 阶段?

javascript - 在 HTML canvas 中使用鼠标控制游戏

uml - 实体关系建模,评论我的ERD

javascript - 在 Eclipse 中将 Android 设备 (PhoneGap) 连接到 127.0.0.1

android-studio - 使用相机拍摄图像并上传到 Firebase(onActivityResult() 中的 Uri 为空)

entity-framework - Entity Framework EntityKey/外键问题