ThingJS：不到一天入门3D开发，创业就要快！

zoom 发表于 2020-9-9 19:10:40

自动化建模技术开始在国内掀起一股热潮，3D建模的门槛逐步降低，开发者不到一天就可以入门ThingJS开发能力！ThingJS在线开发3D，如何创建文本模型动效？不同于HTML文本，这个是一种特殊的3D模型，它是可以像其他的3D模型一样，实现旋转等控制功能。这样的文字模型随处可见，比如logo指示牌，另外也可以进行人为的文本提示，超脱于仿真范畴之外，看第二张图。<a href="upload/attach/202009/19110710_N9BZ5SJHUW23Z58.jpg" target="_blank" _href="upload/attach/202009/19110710_N9BZ5SJHUW23Z58.jpg"><img src="upload/attach/202009/19110710_N9BZ5SJHUW23Z58.jpg" width="800" height="671"/></a> 模型地址：https://www.thingjs.com/pp/7534f8a688bd2fff734f97f7 一个三维场景可以包含二维内容，比如信息弹窗，而作为文本类信息，对于用户操作非常方便，所以在3D界面发展出了marker标记、文本模型和webview内嵌页面，都是更加方便去增强信息获取能力。如果是开发3D文本模型，相较于平面的文本信息，可以加入模型动画，进行旋转控制，符合更多直观的应用需求。 <h2>基础创建</h2> <a href="upload/attach/202009/19110710_7P88KNFASJMP9KE.jpg" target="_blank" _href="upload/attach/202009/19110710_7P88KNFASJMP9KE.jpg"><img src="upload/attach/202009/19110710_7P88KNFASJMP9KE.jpg" width="800" height="383"/></a> 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: , // 世界坐标
 text: '生产厂房',
 style: {
 fontColor: '#000000', // 文本颜色支持16进制颜色和 rgb颜色
 fontSize: 32, // 文本字号大小
 }
 }); <h2>控制操作</h2> 以下是在创建基础上指定父物体，加入更多控制操作，例如alwaysontop 为最上层显示，rotateX（）绕文本自身X轴旋转等等例子1 // 以小车为父物体创建3D文本
 var car = app.query('car01');
 var textRegion02 = app.create({
 type: 'TextRegion',
 parent: car,
 localPosition: , // 相对于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');
 var textRegion03 = app.create({
 type: 'TextRegion',
 parent: building,
 localPosition: ,
 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，天天都是好心情！

页: [1]

ThingStudio森工厂开发者社区's Archiver

ThingJS：不到一天入门3D开发，创业就要快！