请选择 进入手机版 | 继续访问电脑版
2021ThingJS数字孪生智慧场景可视化开发大赛获奖者专访
查看: 334|回复: 0

[分享] ThingJS之移动与碰撞功用开辟剖析

[复制链接]
avatar

52

主题

57

帖子

79

积分

注册会员

Rank: 2

积分
79
ico_lz  楼主| 发表于 2020-9-27 23:09:22 | 显示全部楼层 |阅读模式

移动与碰撞功用是一切三维场景首先需要处理的根基题目。ThingJS实现物联网场景的3D可视化,让开辟下降门坎!

今朝 ThingJS 内置了「第一人称行走」控件,实现第一人称人物行动:走、跑、跳、移动视角,可供开辟者利用。

“第一人称行走”交互形式会让人想到游戏射击游戏,给玩家一定的空间来让他们来真正感受处于每个位置的感受。而实现人物动画,例如行走步伐,就需要一定的交互,包括四周的情况、重力或撞击影响。

ThingJS实现第一人称控制移动,首要经过js剧本让鼠标控制使命大概摄像机的扭转。官方增加「第一人称行走」控件后,鼠标按住左键拖拽偏向,默许的交互为键盘按键来控制行走偏向:

?A:左移

?D:右移

?W:进步

?S:前进

?空格:腾跃(当开启重力时生效)

?鼠标:按下左键扭转场景

用于物体移动的控制器支持js开辟,供给GUI(图形用户界面)手动调剂参数。不懂开辟?动脱手也可以调剂空间参数啦!

ThingJS之移动与碰撞功用开辟剖析

视角移动的肇端位置是摄像机位置,实时代码示例以下:

  1. var app = new THING.App({
  2. url: 'https://www.thingjs.com/static/models/storehouse'
  3. });
  4. // 加载场景后履行
  5. app.on('load', function () {
  6. // 建立按钮
  7. new THING.widget.Button('增加控件', add_control);
  8. new THING.widget.Button('删除控件', remove_control);
  9. });
  10. // 增加控件
  11. var ctrl = null;
  12. var gui = null;
  13. function add_control() {
  14. if (ctrl) {
  15. return;
  16. }
  17. app.camera.position = [0, 10, 0];// 肇端位置 就是摄像机位置, 不设备就会在摄像机位置间接起头
  18. ctrl = app.addControl(
  19. new THING.WalkControl({ // 参数可以静态点窜
  20. walkSpeed: 0.02, // 行走速度
  21. turnSpeed: 0.25, // 右键扭转速度
  22. gravity: 29.8, // 物体重量
  23. eyeHeight: 1.6, // 人高度
  24. jumpSpeed: 10, // 按空格键 腾跃的速度
  25. enableKeyRotate: false, // 默许不开启键盘控制扭转
  26. useCollision: false, // 默许不开启碰撞检测
  27. useGravity: true // 默许开启重力
  28. })
  29. );
  30. // GUI
  31. gui = new THING.widget.Panel({ 'titleText': '第一人称行走', 'hasTitle': true });
  32. gui.position = [10, 200];
  33. gui.addBoolean(ctrl, 'enableKeyRotate').caption('键盘控制扭转');
  34. gui.addBoolean(ctrl, 'useCollision').caption('碰撞检测');
  35. gui.addBoolean(ctrl, 'useGravity').caption('重力检测');
  36. gui.addNumberSlider(ctrl, 'gravity').caption('重力').step(1).min(0).max(50).isChangeValue(true);
  37. gui.addNumberSlider(ctrl, 'jumpSpeed').caption('跳起速度').step(1).min(0).max(30).isChangeValue(true);
  38. }
  39. // 删除控件
  40. function remove_control() {
  41. if (ctrl) {
  42. app.removeControl(ctrl);
  43. ctrl = null;
  44. gui.destroy();
  45. }
  46. }
复制代码


ThingJS,帮你处理一切的根基功题目!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则