关于javascript:ThingJS轻松走完物联网部署的最后一公里

50次阅读

共计 1550 个字符,预计需要花费 4 分钟才能阅读完成。

3D 的价值绝不仅仅是游戏打怪、视频看片,还是一个能够让咱们的传统工作充斥想象力的工具。ThingJS 升高 3D 开发门槛,却大大提高 3D 我的项目颜值和价值!

ThingJS 在线开发 3D,如何创立文本模型动效?不同于 HTML 文本,这个是一种非凡的 3D 模型,它是能够像其余的 3D 模型一样,实现旋转等管制性能。
这样的文字模型随处可见,比方 logo 指示牌,另外也能够进行人为的文本提醒,超脱于仿真领域之外,看第二张图。

模型地址:https://www.thingjs.com/pp/75…

一个三维场景能够蕴含二维内容,比方信息弹窗,而作为文本类信息,对于用户操作十分不便,所以在 3D 界面倒退出了 marker 标记、文本模型和 webview 内嵌页面,都是更加不便去加强信息获取能力。如果是开发 3D 文本模型,相较于立体的文本信息,能够退出模型动画,进行旋转管制,合乎更多直观的利用需要。

根底创立

var app = new THING.App({url: 'https://www.thingjs.com/static/models/storehouse'});

app.on('load', function (ev) {new THING.widget.Button('创立文本', function () {
        // 创立 3D 文本
        var textRegion01 = app.create({
            type: 'TextRegion',
            id: 'textRegion01',
            position: [0, 9, -5], // 世界坐标
            text: '生产厂房',
            style: {
                fontColor: '#000000', // 文本色彩 反对 16 进制色彩 和 rgb 色彩
                fontSize: 32, // 文本字号大小
            }
        });

管制操作

以下是在创立根底上指定父物体,退出更多管制操作,例如 alwaysontop 为最上层显示,rotateX()绕文本本身 X 轴旋转等等
例子 1

// 以小车为父物体创立 3D 文本
        var car = app.query('car01')[0];
        var textRegion02 = app.create({
            type: 'TextRegion',
            parent: car,
            localPosition: [0, 2.5, 0], // 绝对于 car01 的绝对坐标
            text: car.name,
            style: {fontColor: 'rgb(0,0,255)', // 文本色彩 反对 16 进制色彩 和 rgb 色彩
                fontSize: 20, // 文本字号大小
            }
        });
        // 让文本始终在最上层显示
        textRegion02.style.alwaysOnTop = true;

例子 2

// 以修建为父物体创立 3D 文本
        var building = app.query('6923')[0];
        var textRegion03 = app.create({
            type: 'TextRegion',
            parent: building,
            localPosition: [0, 3.2, 0],
            text: '库房',
            style: {
                fontColor: '#ff0000', // 文本色彩 反对 16 进制色彩 和 rgb 色彩
                fontSize: 32, // 文本字号大小
            }
        });
        // 绕文本本身 X 轴旋转
        textRegion03.rotateX(-90);
    })

零碎创立文本模型,也使用了 HTML 文本的底层能力,比方font,用来示意文本款式、大小及字体,用 CSS 中指定字体的格局来指定,例如 ”10px Arial”。

所以,在告诉零碎创立一个命名为 textRegion 的 type 物体,赋予 ID 和世界坐标、展现文本,文本援用了 CSS 字体属性,用于设置字体类型、大小及粗细等款式。利用 ThingJS 开发 3D 要打好 HTML/Css 语言根底,如果你有 JS 开发能力,这方面不成问题。

ThingJS,轻松走完物联网部署的最初一公里!

正文完
 0