在生活中，我们经常谈到3D，比如3D游戏，3D电影等等。3D是指三个维度，三个维度，三个坐标，即长、宽、高。换句话说，它是三维的。3D空间的概念是由X、Y、Z三个轴组成的空间，它是相对于一个只有长和宽的平面（2D）而言的。2D也叫平面图形，图形内容只有水平X轴和垂直Y轴。ThingJS中构建的数字孪生可视化场景被放置在3D“容器”中，提供3D和2D的界面展示能力。ThingJS主要提供Marker对象和WebView对象来支持3D空间界面。要创建MarkerMarker对象，您可以添加图片并将其放置在您想要的位置，也可以将此图片添加到数字孪生可视化对象并随数字孪生可视化对象一起移动。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可以在3D场景中显示Canvas绘制的图标和图片，或者将它们绑定到3D对象上。functioncreateTextCanvas(text,canvas){if(!canvas){canvas=document.createElement("canvas");canvas.width=64;canvas.height=64;}constctx=canvas.getContext("2d");ctx.fillStyle="rgb(32,32,256)";ctx.beginPath();ctx.arc(32,32,30,0,Math.PI*2);ctx.填充();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无衬线字体";ctx.textAlign="居中";ctx.textBaseline="中间";ctx.fillText(文本,32,32);returncanvas;}app.on('load',function(ev){varmarker=app.create({type:"Marker",offset:[0,2,0],size:3,canvas:createTextCanvas('100'),parent:app.query('car02')[0]}).on('click',function(ev){vartxt=Math.floor(Math.random()*100);ev.对象.canvas=createTextCanvas(txt,ev.object.canvas)})})运行结果见下图。单击标记时，标记上的数字会发生变化。创建一个WebView对象如果要在数字孪生可视化场景中放一张图片，应该怎么放呢？您可以使用WebView对象将其他网站或页面的内容嵌入到数字孪生可视化场景中。代码如下：varwebView01=app.create({type:'WebView',url:'https://www.thingjs.com',position:[10,13,-5],width:1920*0.01,高度:1080*0.01,domWidth:1920,domHeight:1080});————————————————————数字孪生可视化：https://www.thingjs.com/
