请选择 进入手机版 | 继续访问电脑版
分享
首页 资讯 产品知识 查看内容

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

发表于 2022-5-18 14:58
zzv_icon131 zzr_icon0
摘要: 在数字孪生可视化领域利用 WebGL来创建三维场景已经越来越普遍,各种开发框架也应运而生。今天我们就通过ThingJS来完成第一人称视角的场景巡视功能。如果你是一位数字孪生可视化的初学者或正打算入门,我强烈推荐你 ...

在数字孪生可视化领域利用 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场景中行走。
    那么这次就先到这里了,大家感兴趣的话可以自己动手试一试。