写点什么

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

用户头像
森友小锘
关注
发布于: 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.04.28 加入

还未添加个人简介

评论

发布
暂无评论
仅需几行代码轻松实现第一人称行走