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

相关文章
|
缓存 容灾 安全
Nacos配置中心介绍与应用,微服务开发标配组件
Nacos 动态配置服务可以让你以中心化、外部化和动态化的方式管理所有环境的应用配置和服务配置。动态配置消除了配置变更时重新部署应用和服务的需要,让配置管理变得更加高效和敏捷。
995 0
Nacos配置中心介绍与应用,微服务开发标配组件
|
数据安全/隐私保护 网络架构
DSL线路如何工作?
【4月更文挑战第15天】
1002 3
DSL线路如何工作?
|
6月前
|
XML 监控 Java
为什么学习 Spring Boot?—— 从官方定位、核心优势到未来趋势全面解析
Spring Boot 是 Java 后端开发的事实标准,凭借“开箱即用”、Starter 依赖、简化配置、内嵌容器和 Actuator 监控等五大优势,成为构建微服务的核心框架。官方定位“Build Anything”,助力开发者高效构建现代化应用,是通往云原生时代的必备技能。
|
移动开发 小程序 前端开发
微信小程序自定义导航栏
微信小程序自定义导航栏
765 0
微信小程序自定义导航栏
|
JSON JavaScript 关系型数据库
低代码使用问题之Automat和n8n分别是什么,以及它们的主要功能是什么
低代码使用问题之Automat和n8n分别是什么,以及它们的主要功能是什么
|
存储 NoSQL 关系型数据库
Redis Sorted Set 底层实现原理深度解读与排行榜实战
Redis Sorted Set 底层实现原理深度解读与排行榜实战
674 0
|
数据采集 人工智能 文字识别
ADB命令来捕获设备屏幕快照和发送鼠标事件来实现抓取公众号文章
ADB命令来捕获设备屏幕快照和发送鼠标事件来实现抓取公众号文章。解决方案: 1.通过ADB命令来捕获设备屏幕快照,传递给电脑并且保存在本地文件; 2.通过百度飞桨ocr解析图片获取内容并保存; 3.根据解析的内容和坐标,向手机发送鼠标事件(点击和上下,左右滑动)来控制页面的跳转。
483 1
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的校园二手书交易平台的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的校园二手书交易平台的详细设计和实现(源码+lw+部署文档+讲解等)
453 1
|
弹性计算 监控 网络协议
ECS操作系统监控
ECS操作系统监控
488 2
Visual Studio 2019 设置程序结束控制台不关闭
修改设置使控制台应用运行结束,控制台不自动退出。
1427 0
Visual Studio 2019 设置程序结束控制台不关闭