ThingJS降低3D开发门槛，展开一个立体的视角

本文主要是介绍ThingJS降低3D开发门槛，展开一个立体的视角，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

3D可视化让我们可以由立体的视角去看这个立体的世界，不再只局限于平面，ThingJS让3D开发门槛降低！

在ThingJS开发界面中，进行3D场景可视化的编辑区域，我们把它称之为3D容器，也就是展示3D图片的地方，如下图所示。ThingJS 3D开发工具主要提供 Marker 物体和 WebView 物体以支持 3D 空间界面。

我们先来看看两者的区别。
Marker：可以将图标、Canvas绘制的图片，展现在3D场景中或绑定在3D物体上。
WebView：可以将页面嵌入到3D场景中，支持iframe元素引用一个新的网页

1. Marker 物体

Marker 物体可以添加一个图片放置到你希望的位置，也可以将这个图片作为子对象添加到父对象身上，随着父对象一同移动。
例子 1：

  type: "Marker",offset: [0, 2, 0],size: [4, 4],url: "https://thingjs.com/static/images/warning1.png",parent: app.query("car01")[0]
});

参数：
• type ：通知系统创建 Marker 物体；
• offset ：设置自身坐标系下偏移量为[0, 2, 0]；
• size ：设置 Marker 物体大小，也可以添单独数字如 4，等同于[4,4]，大小是以米计算的；
• url ：图片的 url；
• parent ：指定 Marker 的父物体；
运行结果见下图。Marker 默认是受距离远近影响，呈现近大远小的 3D 效果，也会在 3D 空间中实现前后遮挡。

例子 2：

  type: "Marker",offset: [0, 8, 0],size: 2,keepSize: true,url: "https://thingjs.com/static/images/reminder.png",parent: app.query(".Building")[1]
});

参数：
• keepSize：控制是否受距离远近影响，呈现近大远小的 3D 效果。如果设置 true，表示保持大小，不随距离近大远小，此时 size 的单位是屏幕的像素点；
• offset ：设置自身坐标系下偏移量为[0, 2, 0]；
• size ：设置 Marker 物体大小，也可以添单独数字如 4，等同于[4,4]，大小是以米计算的；
• url ：图片的 url；
• parent ：指定 Marker 的父物体；
运行结果见下图：

我们还可以使用 h5 的 canvas 手动创建动态图。
例子 3：

    if (!canvas) {canvas = document.createElement("canvas");canvas.width = 64;canvas.height = 64;}const ctx = canvas.getContext("2d");ctx.fillStyle = "rgb(32, 32, 256)";ctx.beginPath();ctx.arc(32, 32, 30, 0, Math.PI * 2);ctx.fill();ctx.strokeStyle = "rgb(255, 255, 255)";ctx.lineWidth = 4;ctx.beginPath();ctx.arc(32, 32, 30, 0, Math.PI * 2);ctx.stroke();ctx.fillStyle = "rgb(255, 255, 255)";ctx.font = "32px sans-serif";ctx.textAlign = "center";ctx.textBaseline = "middle";ctx.fillText(text, 32, 32);return canvas;
}app.on('load', function (ev) {var marker = app.create({type: "Marker",offset: [0, 2, 0],size: 3,canvas: createTextCanvas('100'),parent: app.query('car02')[0]}).on('click', function (ev) {var txt = Math.floor(Math.random() * 100);ev.object.canvas = createTextCanvas(txt, ev.object.canvas)})
})

参数：
• canvas: 接收 canvas 作为贴图显示
运行结果见下图，在 Marker 上点击时，会改变标记上的数字：

2. WebView 物体

我们还可以使用 WebView 物体，将其他网站或者页面的内容嵌到 3D 中。
例子 4：

    type: 'WebView',url: 'https://www.thingjs.com',position: [10, 13, -5],width: 1920 * 0.01, // 3D 中实际宽度 单位 米height: 1080 * 0.01, // 3D 中实际高度 单位 米domWidth: 1920, // 页面宽度 单位 pxdomHeight: 1080// 页面高度 单位 px
});