前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >从零开始学习3D可视化之摄像机自由飞行

从零开始学习3D可视化之摄像机自由飞行

原创
作者头像
thingjs
修改2021-07-13 18:08:38
修改2021-07-13 18:08:38
45600
代码可运行
举报
运行总次数:0
代码可运行

我学习数字孪生可视化有一小段时间了,第一个制作目标就是在数字孪生可视化场景中实现一个自由飞行的摄像机。使用WSAD键控制摄像机的前后左右移动,使用QE控制摄像机的升降。

这个功能比较简单,代码也一目了然,不做过多解释了,直接上代码吧。

代码语言:javascript
代码运行次数:0
运行
复制
var app = new THING.App({
    url: 'https://www.thingjs.com/static/models/storehouse'
});
 
// 加载场景后执行
app.on('load', function () {
 // 创建按钮
 new THING.widget.Button('添加控件', add_control);
 new THING.widget.Button('删除控件', remove_control);
});
 
/**
 * 添加控件
 */
var ctrl = null;
function add_control() {
 if (!ctrl) {
        ctrl = app.addControl(new THING.FlyControl());
 
 initThingJsTip("控件添加成功!<br>键盘 W A S D 控制飞行, Q E 控制升降");
 }
}
 
/**
 * 删除控件
 */
function remove_control() {
 if (ctrl) {
        app.removeControl(ctrl);
        ctrl = null;
 initThingJsTip("本例程展示了平台内置的键盘控制摄影机交互的控件,添加控件后可以通过键盘 W A S D 控制飞行, Q E 控制升降,点击左侧按钮进行体验");
 }
}

不只可以用在摄像机上,也可以应用在数字孪生可视化场景中。

我采用的方法是使用平台内置的键盘控制摄影机交互的控件,添加控件后可以通过键盘 W A S D 控制飞行, Q E 控制升降,点击左侧按钮将触发THING.FlyControl 事件,使用键盘来控制相机角度。只需要简单的添加控件就能实现摄像机自由飞行,像我一样刚接触数字孪生可视化可视化的初学者可以试一试。

—————————————————

数字孪生可视化:https://www.thingjs.com/

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档