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

33次阅读

共计 853 个字符,预计需要花费 3 分钟才能阅读完成。

我学习数字孪生可视化有一小段时间了,第一个制作指标就是在数字孪生可视化场景中实现一个自在航行的摄像机。应用 WSAD 键管制摄像机的前后左右挪动,应用 QE 管制摄像机的升降。
这个性能比较简单,代码也高深莫测,不做过多解释了,间接上代码吧。

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/

正文完
 0