自從用了ThingJS，天天都是好心情！

這幾天很多地方都會持續降溫，小夥伴們要注意保暖,ThingJS的3D開發熱度不減，因為成本低、顔值高啊！

ThingJS線上開發3D，如何建立文本模型動效？不同于HTML文本，這個是一種特殊的3D模型，它是可以像其他的3D模型一樣，實作旋轉等控制功能。

這樣的文字模型随處可見，比如logo訓示牌，另外也可以進行人為的文本提示，超脫于仿真範疇之外，看第二張圖。

模型位址： https://www.thingjs.com/pp/7534f8a688bd2fff734f97f7 一個三維場景可以包含二維内容，比如資訊彈窗，而作為文本類資訊，對于使用者操作非常友善，是以在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，天天都是好心情！