1、第一人称行走
2、实现
3、操作步骤
4、结语
在数字孪生可视化领域利用 WebGL来创建三维场景已经越来越普遍,各种开发框架也应运而生。今天我们就通过ThingJS来完成第一人称视角的场景巡视功能。如果你是一位数字孪生可视化的初学者或正打算入门,我强烈推荐你仔细阅读本文并在我的代码基础之上继续深入学习。
第一人称视角的数字孪生可视化场景巡视主要需要解决两个问题,人物在场景中的移动和碰撞检测。移动与碰撞功能是所有三维场景首先需要解决的基本问题。为了方便理解,首先需要构建一个简单的数字孪生可视化场景。ThingJS 内置了「第一人称行走」控件,实现第一人称人物动作:走、跑、跳、移动视角,可供开发者使用。
-
实现
官方添加「第一人称行走」控件后,鼠标按住左键拖拽方向,默认的交互为键盘按键来控制行走方向:
• A:左移
• D:右移
• W:前进
• S:后退
• 空格:跳跃(当开启重力时生效)
• 鼠标:按下左键旋转场景
首先看一下效果:
这种3D场景中的第一人称行走仅需20行代码就能轻松实现,代码如下:
/**
* 添加控件
*/
var ctrl = null;
var gui = null;
function add_control() {
if (ctrl)