仅需几行代码轻松实现第一人称行走

森友小锘

关注

发布于: 2021 年 05 月 20 日

1、第一人称行走

2、实现

3、操作步骤

4、结语

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

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

实现

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

• A：左移• D：右移• W：前进• S：后退• 空格：跳跃（当开启重力时生效）• 鼠标：按下左键旋转场景

首先看一下效果：

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

var app = new THING.App({ url: 'https://www.thingjs.com/static/models/storehouse'}); // 加载场景后执行app.on('load', function () { app.camera.position = [0, 10, 0]; // 起始位置 就是摄像机位置, 不设置就会在摄像机位置直接开始 var ctrl = app.addControl( new THING.WalkControl({ walkSpeed: 0.02, // 行走速度 turnSpeed: 0.25, // 右键旋转速度 gravity: 29.8, // 物体重量 eyeHeight: 1.6, // 人高度 jumpSpeed: 10, // 按空格键 跳跃的速度 enableKeyRotate: false, // 默认不开启键盘控制旋转 useCollision: false, // 默认不开启碰撞检测 useGravity: true // 默认开启重力 }) );});

复制代码

操作步骤

第一步，用 CompusBulider （模模搭）工具创建场景，然后将场景导出，并存为 .tjs 格式。

第二步，将导出的数字孪生可视化场景放在 ThingJS 平台上加载。

第三步，设置摄像机位置等参数，然后通过摄像机遵循路线形成第一人称的视角，达到第一人称进入 3D 场景的效果。起始位置就是摄像机位置，不设置就会在摄像机位置直接开始，几行代码就可以实现第一人称行走（代码已贴在文中）。第四步，还可以添加第一人称行走控件，设置键盘控制旋转、碰撞检测、重力检测等，GUI（图形用户界面）手动调整参数。

 // GUI gui = new THING.widget.Panel({ 'titleText': '第一人称行走', 'hasTitle': true });  gui.position = [10, 200];  gui.addBoolean(ctrl, 'enableKeyRotate').caption('键盘控制旋转'); gui.addBoolean(ctrl, 'useCollision').caption('碰撞检测'); gui.addBoolean(ctrl, 'useGravity').caption('重力检测');  gui.addNumberSlider(ctrl, 'gravity').caption('重力').step(1).min(0).max(50).isChangeValue(true); gui.addNumberSlider(ctrl, 'jumpSpeed').caption('跳起速度').step(1).min(0).max(30).isChangeValue(true);} /** * 删除控件 */function remove_control() { if (ctrl) { // 设置摄像机位置和目标点 app.camera.position = [50.260000000000005, 35.129000000000005, 59.32699999999999]; app.camera.target = [10.852, 0.175, 9.311];  app.removeControl(ctrl); ctrl = null; gui.destroy(); }}

复制代码

第一人称视角的巡视效果就完成了。

完整代码如下：


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;var gui = null;function add_control() { if (ctrl) { return; }  app.camera.position = [0, 10, 0]; // 起始位置 就是摄像机位置, 不设置就会在摄像机位置直接开始 ctrl = app.addControl( new THING.WalkControl({ // 参数可以动态修改 walkSpeed: 0.02, // 行走速度 turnSpeed: 0.25, // 右键旋转速度 gravity: 29.8, // 物体重量 eyeHeight: 1.6, // 人高度 jumpSpeed: 10, // 按空格键 跳跃的速度 enableKeyRotate: false, // 默认不开启键盘控制旋转 useCollision: false, // 默认不开启碰撞检测 useGravity: true // 默认开启重力 }) ); // GUI gui = new THING.widget.Panel({ 'titleText': '第一人称行走', 'hasTitle': true });  gui.position = [10, 200];  gui.addBoolean(ctrl, 'enableKeyRotate').caption('键盘控制旋转'); gui.addBoolean(ctrl, 'useCollision').caption('碰撞检测'); gui.addBoolean(ctrl, 'useGravity').caption('重力检测');  gui.addNumberSlider(ctrl, 'gravity').caption('重力').step(1).min(0).max(50).isChangeValue(true); gui.addNumberSlider(ctrl, 'jumpSpeed').caption('跳起速度').step(1).min(0).max(30).isChangeValue(true);} /** * 删除控件 */function remove_control() { if (ctrl) { // 设置摄像机位置和目标点 app.camera.position = [50.260000000000005, 35.129000000000005, 59.32699999999999]; app.camera.target = [10.852, 0.175, 9.311];  app.removeControl(ctrl); ctrl = null; gui.destroy(); }}

复制代码

结语：通过上面的轻量化代码就可以发现，使用 ThingJS 很简单就能够实现巡视的效果，仅用 20 行代码就可以轻松实现第一人称在 3D 场景中行走。那么这次就先到这里了，大家感兴趣的话可以自己动手试一试。

发布于: 2021 年 05 月 20 日阅读数: 9

森友小锘

关注

还未添加个人签名 2021.04.28 加入

还未添加个人简介

发布

暂无评论

创作场景

仅需几行代码轻松实现第一人称行走

森友小锘

评论