自从用了ThingJS,天天都是好心情!

简介: ThingJS的3D开发热度不减~

这几天很多地方都会持续降温,小伙伴们要注意保暖,ThingJS的3D开发热度不减,因为成本低、颜值高啊!
ThingJS在线开发3D,如何创建文本模型动效?不同于HTML文本,这个是一种特殊的3D模型,它是可以像其他的3D模型一样,实现旋转等控制功能。
这样的文字模型随处可见,比如logo指示牌,另外也可以进行人为的文本提示,超脱于仿真范畴之外,看第二张图。
1.jpg

模型地址:https://www.thingjs.com/pp/7534f8a688bd2fff734f97f7

一个三维场景可以包含二维内容,比如信息弹窗,而作为文本类信息,对于用户操作非常方便,所以在3D界面发展出了marker标记、文本模型和webview内嵌页面,都是更加方便去增强信息获取能力。如果是开发3D文本模型,相较于平面的文本信息,可以加入模型动画,进行旋转控制,符合更多直观的应用需求。

基础创建

2.jpg

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,天天都是好心情!

相关文章
|
程序员
你应该知道的原型图工具Mockplus(摩客)
去年10月份,我发布了一篇短文《你所不知道的原型图工具Mockplus》,快大半年过去了,为什么又要写这款软件呢,我觉得有必要推荐给大家,和大家一起分享,它确实是一款简单高效的原型图制作工具,经过近半年的使用,我总结了一以下几点: 1 简单。
1103 0
10分钟玩转Mockplus
10分钟让你了解Mockplus 视频地址:http://doc.mockplus.cn/?p=152
689 0
|
Windows
5款靠谱无广告,好用到爆的软件推荐
5款靠谱无广告,好用到爆的软件推荐
914 0
5款靠谱无广告,好用到爆的软件推荐
|
运维 前端开发 程序员
一个切图仔的工作沟通日常
一个切图仔的工作沟通日常
112 0
|
前端开发 安全 vr&ar
提升生产力,7 款好用的原型图工具推荐给你
目前有很多 UI 设计工具可以帮助您设计用户界面,码匠这里分享 7 款好用的原型图工具。
699 0
提升生产力,7 款好用的原型图工具推荐给你
|
9月前
|
编解码
赠人玫瑰,手有余香,分享5款让人爱不释手的软件
分享是一种美好的事情,它能让快乐变得更多,它能让悲伤变得更少,我会持续分享一些好用的软件给大家。
98 0
|
存储 安全 网络安全
推荐5款助你高效工作的小软件
现在,有很多实用的工具和软件可以帮助我们更高效地完成各种任务。以下是5款值得推荐的工具软件,能够极大地提高我们的工作效率。
77 1
|
前端开发
Calm.com – 帮助你放松心情的神奇网站
  红尘纷乱,有时真想一头扎到大海里理清思绪。Calm 就是这样一个帮助你放松心情的网站,进入网站铺面而来的是一片蓝色的沙滩海洋,选择时长,戴上耳机,挑一个舒服的地方做好,你就可以在一阵阵海浪拍打沙滩的背景声中,按照一个温柔女声的指引来慢慢放松自己。
1092 0
|
测试技术 持续交付 监控
|
UED
常用的交互设计软件
1、MarkMan      http://www.getmarkman.com/#/download-modal     优点:1、快速  在图片上 标记颜色值, 尺寸 ,边框大小 ,标记文本 。
1015 0

热门文章

最新文章

相关实验场景

更多