仅需几行代码轻松实现第一人称行走-优快云博客

1、第一人称行走

2、实现

3、操作步骤

4、结语

在数字孪生可视化领域利用 WebGL来创建三维场景已经越来越普遍，各种开发框架也应运而生。今天我们就通过ThingJS来完成第一人称视角的场景巡视功能。如果你是一位数字孪生可视化的初学者或正打算入门，我强烈推荐你仔细阅读本文并在我的代码基础之上继续深入学习。

第一人称视角的数字孪生可视化场景巡视主要需要解决两个问题，人物在场景中的移动和碰撞检测。移动与碰撞功能是所有三维场景首先需要解决的基本问题。为了方便理解，首先需要构建一个简单的数字孪生可视化场景。ThingJS 内置了「第一人称行走」控件，实现第一人称人物动作：走、跑、跳、移动视角，可供开发者使用。

实现

官方添加「第一人称行走」控件后，鼠标按住左键拖拽方向，默认的交互为键盘按键来控制行走方向：

• A：左移

• D：右移

• W：前进

• S：后退

• 空格：跳跃（当开启重力时生效）

• 鼠标：按下左键旋转场景

首先看一下效果：

这种3D场景中的第一人称行走仅需20行代码就能轻松实现，代码如下：

/**
 * 添加控件
 */
var ctrl = null;
var gui = null;
function add_control() {
    if (ctrl) {
        return;
    }

    app.camera.position = [0, 10, 0];  // 起始位置 就是摄像机位置, 不设置就会在摄像机位置直接开始
    ctrl = app.addControl(
        new THING.WalkControl(