三維可視化開發平臺似乎也就那麼幾家做得好的，如果不用threejs，的確，threejs雖然是3D開發的鼻祖，但是對開發人員的要求也高呀，thingjs是封裝的threejs，可通過快捷代碼、代碼框架來快速開發，只要前端工程師懂js，瞭解webgl就可以。建議大家一試哦~
/**
* 說明：在 canvas 中利用圖片做背景進行繪製，模擬指標面板的應用場景
* 操作：點擊按鈕
* 難度：★★★★☆
*/
var app = new THING.App({
url: 'https://www.thingjs.com/static/models/storehouse' // 場景地址
});
// 計時器
var timer;
app.on('load', function () {
// 設置攝像機位置和目標點
app.camera.position = [24.036125586913663, 2.654545333744903, 15.118547603300897];
app.camera.target = [18.887027584951163, 1.4664667942992755, 2.077588743688154];
new THING.widget.Button('圖片+canvas畫圖', function () {
var plane = app.query('#myPlane01')[0];
if (plane) return;
var car = app.query('car01')[0];
var imgUrl = 'https://www.thingjs.com/static/images/monitorPanel3.png';
var imgWidth = 512;
var imgHeight = 329;
var img = new Image(imgWidth, imgHeight);
img.crossOrigin = "Anonymous";
img.src = imgUrl;
img.onload = function () {
var canvas = createCanvas({ image: img, text: 10, imgWidth, imgHeight });
var newImg = new Image(canvas.width, canvas.height);
newImg.src = canvas.toDataURL("image/png");
var plane = app.create({
type: 'Plane',
id: 'myPlane01',
width: imgWidth * 0.004,
height: imgHeight * 0.004,
parent: car,
localPosition: [0, 3, 0],
style: {
image: newImg,
opacity: 0.9,
color: '#ffffff'
}
});
// 存儲原始圖片 用於重繪
plane['origialImg'] = img;
// 存儲 canvas 用於重繪
plane['myCanvas'] = canvas;
};
})
new THING.widget.Button('更新溫度值', function () {
var plane = app.query('#myPlane01')[0];
if (plane) {
updateImage(plane)
}
});
new THING.widget.Button('停止更新', function () {
if (timer) {
clearInterval(timer);
timer = null;
}
})
})
function createCanvas(param) {
var canvas = param.canvas;
var image = param.image;
var text = param.text;
if (!param.canvas) {
canvas = document.createElement("canvas");
canvas.width = param.imgWidth;
canvas.height = param.imgHeight;
}
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(image, 0, 0);
ctx.fillStyle = "rgb(255, 255, 255)";
ctx.font = "80px sans-serif";
ctx.textBaseline = "middle";
ctx.fillText('溫度：', 50, canvas.height / 2);
ctx.fillText(text, 270, canvas.height / 2);
ctx.fillText('℃', 380, canvas.height / 2);
return canvas;
}
function updateImage(plane) {
if (!timer) {
timer = setInterval(() => {
var canvas = createCanvas({ image: plane['origialImg'], text: THING.Math.randomInt(0, 38), canvas: plane.myCanvas });
var newImg = new Image(canvas.width, canvas.height);
newImg.src = canvas.toDataURL("image/png");
plane.style.image = newImg;
}, 1000)
}
}