分享
查看: 2181|回复: 0

[分享] ThingJS的摄像机飞行事件

[复制链接]

ThingJS的摄像机飞行事件

发表于 2020-7-28 20:25:14 来自 分享 阅读模式 倒序浏览
zzv_icon2181 zzr_icon0 查看全部


  进行3D开发的第一步,离不开场景加载,这就需要有一个建模的过程,越细致的设计越能够给后面的视角拉近带来好的感受。

  一个场景的动画,在初始界面都会有一个默认视角,这就是摄像机的原始视角,我们可以控制它的角度——飞到正前方、顶部俯视、飞到物体左侧、飞到物体后上方、飞到物体右上角……从不同的角度来近距离接触3D场景,除此之外,ThingJS还实现了动态切换的操作。

  这么多角度该实现起来有多复杂?如何在一张平面上随时切换摄影机飞行的角度?一切都无需担心,我们有官方示例和动画demo,分分钟实现你想要的效果。

ThingJS的摄像机飞行事件

  切换场景层级

  一般来说,读取的场景路径都和模模搭同步,之后在ThingJS平台开发需要的3D功能。如果要让场景元素活动起来,而不仅仅是静止不动的,就要有一个场景内层级切换动作。

  在ThingJS中,注册了层级切换事件,我们就能够在点击物体后,视角进行聚焦,对应到物体并实现“双击”建筑进入楼层功能。摄像机跟随着物体活动,在建筑内不断变换视角,达到层次丰富的可视化效果。

  ThingJS使用的是JavaScript开发语言,如果把物体当做一个建筑体的话,进入层级指的是进入建筑;当摄像机飞行到相应物体,等于进入层级。我们默认进入物体层级时会触发 EnterLevel 事件。


  跟随物体移动

  具体如何实现飞行呢?需要设置一个飞行的动作,并能够通过飞行时长和飞行角度来实现更顺畅的到达效果。

  飞行到物体的过程中,ThingJS采用 camera 的 flyTo() 方法,让摄像机从当前位置,飞行到目标位置,根据效果来增加 time(飞行时间)等参数来控制飞行过程的速度。当摄像机飞行到相应物体之后,将触发 THING.EventType.LevelFlyEnd 事件,迫使跟随物体的视角停留,一般来说,物联网场景都要求视角停留,如停在顶牌、读取实时数据。

  最后,通过ThingJS API接入相对应的物联网设备,利用飞行结束回调场景对应的终点行为,一切就能动起来!

  代码示例

/**
* 说明:轨迹线应用
*/
app = new THING.App({
url: 'https://www.thingjs.com/static/models/simplebuilding'
});

//轨迹线
var line;
app.on('load', function () {
var car = app.query('car01')[0];

// 创建一个不断上升的路径
var points = [];
var radius = 20;
for (var degree = 0, y = 0; degree <= 520; degree += 10, y += 0.25) {
var x = Math.cos(degree * 2 * Math.PI / 360) * radius;
var z = Math.sin(degree * 2 * Math.PI / 360) * radius;
points.push([x, y, z]);
}

// 创建轨迹线
line = app.create({
type: 'Line',
color: 0x00FF00, // 轨迹线颜色
dotSize: 2, // 轨迹点的大小
dotColor: 0xFF0000, // 轨迹点的颜色
points: points,
})

car.position = line.points[0];
// 小车开始沿轨迹线运动
play();

// 创建按钮
new THING.widget.Button('开始移动', play);
new THING.widget.Button('轨迹线', showLines);
new THING.widget.Button('轨迹点', showPoints);


new THING.widget.Button('摄像机跟随物体', function () {
// 每一帧设置摄像机位置 和 目标点
car.on('update', function () {
// 摄像机位置为 移动小车后上方
// 为了便于计算 这里用了坐标转换 将相对于小车的位置 转换为 世界坐标
app.camera.position = car.selfToWorld([0, 5, -10]);
// 摄像机目标点为 移动小车的坐标
app.camera.target = car.position
}, '自定义摄影机跟随');
});

new THING.widget.Button('摄像机停止跟随', function () {
car.off('update', null, '自定义摄影机跟随');
});


new THING.widget.Button('摄像机归位', function () {
car.off('update', null, '自定义摄影机跟随');
// 设置摄像机位置和目标点
app.camera.position = [43.4, 16.200000000000003, 52.3];
app.camera.target = [0, 0, 0];




});
});

// 物体跟随轨迹线运动
function play() {
var car = app.query('car01')[0];
car.movePath({
'path': line.points, // 轨迹路线
'time': 12000, // 移动时间
'orientToPath': true, // 物体移动时沿向路径方向
});
}

// 显示/隐藏轨迹线
var lineVisible = true;
function showLines() {
lineVisible = !lineVisible;
line.showLines(lineVisible);
}

// 显示/隐藏轨迹点
var pointVisible = true;
function showPoints() {
pointVisible = !pointVisible;
line.showPoints(pointVisible);
}



 

ThingJS提供了一系列搭建工具和示例代码来帮助开发人员实现完整的商业项目,案例教程也很丰富,是你信赖的开发伙伴!


avatar
游客~
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

130700ppkpl8x3t7tt1b1t