请选择 进入手机版 | 继续访问电脑版
分享
查看: 2124|回复: 0

[分享] 3D开发平台哪个更好操作?

[复制链接]

3D开发平台哪个更好操作?

发表于 2019-12-20 17:56:11 来自 分享 阅读模式 倒序浏览
zzv_icon2124 zzr_icon0 查看全部

3D开发搞技术的朋友一定不陌生,做一个3D可视化应用那是相当有面子的,这不仅考验工程师的技术,还能丰富自己的3D开发经验。我们都知道3D开发平台有那么几个平台是最常用的,thingjs、threejs、cesium等等,到底哪个3D开发平台好使用,更好操作呢?一起来了解一下吧!

在线调试

ThingJS 在线开发环境中可以通过在代码里加入 “debugger” 关键字进行调试,调试步骤如下:

在代码中加入 “debugger” 关键字

F12 打开浏览器控制台

点击按钮运行代码

在浏览器控制台中查看断点位置

3D开发平台哪个更好操作?

F12 调试

和普通页面调试方法一样,直接打开 F12 在 Sources 里 找到 debug.js文件,在里面打断点即可调试,调试步骤如下:

F12键调出浏览器控制台可以查看在线开发环境相关信息

点击选择“Sources - Page”

选择Top目录下的ifId(about:blank) - (no - domain -debug.js)

在浏览器控制台的debug.js文件点击断点行数

点击在线开发工具栏“执行项目”图标

3D开发平台哪个更好操作?
  1. /**
  2. * 说明:通过请求数据 动态创建柜子中的书
  3. */
  4. var app = new THING.App({
  5. url: 'https://www.thingjs.com/static/models/storehouse' // 场景地址
  6. });
  7. // 请求书籍数据的url
  8. var url = 'https://www.thingjs.com/static/data/books.json';
  9. // 书籍的物体面板
  10. var panel;
  11. app.on('load', function (ev) {
  12. // 开启层级切换
  13. app.level.change(ev.campus);
  14. // 获取目标书柜
  15. var cabinetSelector = app.query('cabinetB4')[0];
  16. // 点击按钮到目标书柜
  17. new THING.widget.Button('目标书柜', function () {
  18. app.level.change(cabinetSelector);
  19. });
  20. // 进入物体层级效果
  21. cabinetSelector.on(THING.EventType.EnterLevel, function (ev) {
  22. // 当前进入层级的物体(书柜)
  23. var object = ev.object;
  24. // 上一层级的物体
  25. var preObject = ev.previous;
  26. // 如果当前层级物体的父亲是上一层级(即正向进入)
  27. if (object.parent === preObject) {
  28. console.log("从楼层进入了书柜");
  29. object.playAnimation('OpenDoor');
  30. // 如果书柜没有创建书籍 则请求数据 创建书籍
  31. if (!object._isAlreadyCreateBooks) {
  32. getBooksData(object);
  33. }
  34. }
  35. }, 'customEnter');
  36. // 设置退出层级效果
  37. cabinetSelector.on(THING.EventType.LeaveLevel, function (ev) {
  38. // 退出层级的物体(书柜)
  39. var object = ev.object;
  40. // 退出后的层级物体
  41. var curObject = ev.current;
  42. // 如果所退出层级物体的父亲是 退出后的层级(即正向退出)
  43. if (object.parent === curObject) {
  44. console.log("退出书柜进入楼层");
  45. object.playAnimation('CloseDoor');
  46. destroyBooks();
  47. object._isAlreadyCreateBooks = false;
  48. }
  49. }, 'customLeave');
  50. });
  51. // 获取JSON数据
  52. function getBooksData(obj) {
  53. $.ajax({
  54. type: "get",
  55. url: url,
  56. dataType: "json",
  57. success: function (data) {
  58. createBooks(data, obj);
  59. }
  60. });
  61. }
  62. function createBooks(data, parent) {
  63. var books = data.books;
  64. var cabinetInfo = data.cabinetInfo;
  65. var cabinetInfoOffsetX = cabinetInfo.offsetX;
  66. var cabinetInfoOffsetY = cabinetInfo.offsetY;
  67. // 按书架每一层 整理数据
  68. // 结果形如
  69. /*
  70. {
  71. "1":[{"name":"C++","row":1,"column":1,"width":10},{"name":"Java","row":1,"column":2,"width":14},......],
  72. "2":[{"name":"js","row":2,"column":1,"width":5},......],
  73. "3":[{"name":"js","row":3,"column":1,"width":5},......]
  74. }
  75. */
  76. var booksMap = processData(books);
  77. for (var row in booksMap) {
  78. var arr = booksMap[row];
  79. var offsetX = 0;
  80. var sum = 0;
  81. for (var i = 0; i < arr.length; i++) {
  82. var book = arr[i];
  83. var name = book.name;
  84. // 行
  85. var row = book.row;
  86. var width = book.width / 100;
  87. sum += width;
  88. offsetX = sum - width / 2;
  89. // 创建Box 模拟书籍 (书籍的父亲是书柜 并根据相对坐标创建)
  90. var objBook = app.create({
  91. type: 'Box',
  92. width: width, // 宽度 (书籍厚度)
  93. height: 0.2, // 高度
  94. depth: 0.15, // 深度
  95. center: 'Bottom', // 中心点
  96. parent: parent,
  97. localPosition: [offsetX - cabinetInfoOffsetX[row - 1], cabinetInfoOffsetY[row - 1], 0]
  98. });
  99. objBook.userData['书名'] = name;
  100. objBook.userData['物体类型'] = '书';
  101. objBook.style.color = THING.Math.randomColor();
  102. objBook.on(THING.EventType.SingleClick, function (ev) {
  103. // 如果单击获取的物体不在当前选择集中
  104. if (!app.selection.has(ev.object)) {
  105. app.selection.clear();
  106. app.selection.select(ev.object);
  107. }
  108. })
  109. objBook.on(THING.EventType.Select, function (ev) {
  110. var book = ev.object;
  111. // 创建物体面板
  112. createPanel(book);
  113. });
  114. objBook.on(THING.EventType.Deselect, function (ev) {
  115. // 删除物体面板
  116. destroyPanel();
  117. });
  118. }
  119. }
  120. parent._isAlreadyCreateBooks = true;
  121. }
  122. function destroyBooks() {
  123. var books = app.query('["userData/物体类型"="书"]');
  124. books.destroy();
  125. destroyPanel();
  126. }
  127. app.on(THING.EventType.SingleClick, function (ev) {
  128. if (!ev.picked || !app.selection.has(ev.object)) {
  129. app.selection.clear();
  130. }
  131. }, '单击其他清空选择集');
  132. function createPanel(obj) {
  133. if (panel) return;
  134. panel = new THING.widget.Panel({
  135. titleText: '基本信息',
  136. hasTitle: true,
  137. position: [5, 50]
  138. });
  139. panel.addString(obj.userData, "书名").caption("书名");
  140. }
  141. // 删除面板
  142. function destroyPanel() {
  143. if (panel) {
  144. panel.destroy();
  145. panel = null;
  146. }
  147. }
  148. // 数据处理
  149. function processData(books) {
  150. var booksMap = {};
  151. for (var i = 0; i < books.length; i++) {
  152. var book = books[i];
  153. // 按每一行 整理数据
  154. var row = book.row;
  155. if (!booksMap[row]) {
  156. booksMap[row] = [];
  157. }
  158. booksMap[row].push(book);
  159. }
  160. return booksMap;
  161. }
复制代码
avatar
游客~
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

130700ppkpl8x3t7tt1b1t