前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >三维可视化开发这事儿前端人员能搞定吗?

三维可视化开发这事儿前端人员能搞定吗?

原创
作者头像
要不要吃火锅
修改2019-12-12 10:15:50
5440
修改2019-12-12 10:15:50
举报
文章被收录于专栏:3D可视化

用thingjs前端工程师也能开发可视化应用的。可以来试!

/**

* 说明:在 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)

    }

}

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档