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

从零起头进修3D可视化之3D界面

[复制链接]
avatar

40

主题

40

帖子

283

积分

中级会员

Rank: 3Rank: 3

积分
283
ico_lz  楼主| 发表于 2021-7-16 10:18:34 | 显示全部楼层 |阅读模式
生活中我们经常会说到3D,比如3D游戏、3D电影等等。3D指三维,三个维度、三个坐标,即长、宽、高。换句话说,就是立体的,3D的空间的概念是由X、Y、Z三个轴组成的空间,是相对于只要长和宽的平面(2D)而言。2D又叫平面图形,图形内容只要水平的X轴向与垂直的Y轴向。而一向以来在ThingJS中搭建的数字孪生可视化场景都是放在3D“容器”内的,3D“容器”供给了3D和2D的界面展现才能。

ThingJS 首要供给 Marker 物体和 WebView 物体以支持3D空间界面

建立 Marker
Marker 物体可以增加一个图片放置到你希望的位置,也可以将这个图片增加到数字孪生可视化工具身上,跟从数字孪生可视化工具一同移动。Marker 默许受间隔远近影响,也就是说所谓近大远小的结果,会在3D空间中有前后遮挡结果。

  1. app.create({
  2. type: "Marker",
  3. offset: [0, 2, 0],
  4. size: [4, 4],
  5. url: "https://thingjs.com/static/images/warning1.png",
  6. parent: app.query("car01")[0]
  7. });
复制代码





从零起头进修3D可视化之3D界面



Marker可以将图标、Canvas绘制的图片,展现在3D场景中或绑定在3D物体上。

  1. function createTextCanvas(text, canvas) {
  2. if (!canvas) {
  3. canvas = document.createElement("canvas");
  4. canvas.width = 64;
  5. canvas.height = 64;
  6. }

  7. const ctx = canvas.getContext("2d");
  8. ctx.fillStyle = "rgb(32, 32, 256)";
  9. ctx.beginPath();
  10. ctx.arc(32, 32, 30, 0, Math.PI * 2);
  11. ctx.fill();

  12. ctx.strokeStyle = "rgb(255, 255, 255)";
  13. ctx.lineWidth = 4;
  14. ctx.beginPath();
  15. ctx.arc(32, 32, 30, 0, Math.PI * 2);
  16. ctx.stroke();

  17. ctx.fillStyle = "rgb(255, 255, 255)";
  18. ctx.font = "32px sans-serif";
  19. ctx.textAlign = "center";
  20. ctx.textBaseline = "middle";
  21. ctx.fillText(text, 32, 32);
  22. return canvas;
  23. }

  24. app.on('load', function (ev) {
  25. var marker = app.create({
  26. type: "Marker",
  27. offset: [0, 2, 0],
  28. size: 3,
  29. canvas: createTextCanvas('100'),
  30. parent: app.query('car02')[0]
  31. }).on('click', function (ev) {
  32. var txt = Math.floor(Math.random() * 100);
  33. ev.object.canvas = createTextCanvas(txt, ev.object.canvas)
  34. })
  35. })
复制代码


运转成果见下图,在 Marker 上点击时,会改变标志上的数字。

从零起头进修3D可视化之3D界面



建立 WebView 物体

假如想在数字孪生可视化场景中放一张图片,应当怎样放进去呢?可以利用 WebView 物体,将其他网站大概页面的内容嵌入到数字孪生可视化场景中。

代码以下:

  1. var webView01 = app.create({
  2. type: 'WebView',
  3. url: 'https://www.thingjs.com',
  4. position: [10, 13, -5],
  5. width: 1920 * 0.01,
  6. height: 1080 * 0.01,
  7. domWidth: 1920,
  8. domHeight: 1080
  9. });
复制代码


从零起头进修3D可视化之3D界面






—————————————————

数字孪生可视化:https://www.thingjs.com/


回复

使用道具 举报

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

本版积分规则