二維平面的互動是人為設定的，情景幾乎是不會發生變化的；人所在的三維空間很複雜，情景也會随着人與任意對象之間的任務而發生變化，ThingJS是如何編輯3D界面的？
在ThingJS開發界面中，進行3D場景可視化的編輯區域，我們把它稱之為3D容器，也就是展示3D圖檔的地方，如下圖所示。ThingJS 3D開發工具主要提供
Marker
WebView
我們先來看看兩者的差別。
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 的機關是螢幕的像素點；
運作結果見下圖：
我們還可以使用 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, // 頁面寬度 機關 px
domHeight: 1080// 頁面高度 機關 px
}); 借助ThingJS開發3D功能，有生成模闆任你選擇！