关于javascript:从零开始学习3D可视化之3D界面

生存中咱们常常会说到 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 空间中有前后遮挡成果。

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

Marker 能够将图标、Canvas 绘制的图片，展示在 3D 场景中或绑定在 3D 物体上。

function createTextCanvas(text, canvas) {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)
 })
})

运行后果见下图，在 Marker 上点击时，会扭转标记上的数字。

创立 WebView 物体

如果想在数字孪生可视化场景中放一张图片，应该怎么放进去呢？能够应用 WebView 物体，将其余网站或者页面的内容嵌入到数字孪生可视化场景中。
代码如下：

var webView01 = app.create({
 type: 'WebView',
 url: 'https://www.thingjs.com',
 position: [10, 13, -5],
 width: 1920 * 0.01, 
 height: 1080 * 0.01, 
 domWidth: 1920, 
 domHeight: 1080 
});

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