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

1、第一人称行走

2、实现

3、操作步骤

4、结语

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

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

• 实现

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

首先看一下效果：

这种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场景中行走。 那么这次就先到这里了，大家感兴趣的话可以自己动手试一试。