ThingJS實用功能介紹（一）

ThingJS官方示例演示

在ThingJS中有許多的官方示例，但是有的人在開發的過程中卻很少去使用這些非常有用的功能，而更多的人只是快速瀏覽了一遍這些官方示例，有時候並沒有瀏覽完整就開始嘗試開發，結果就在使用ThingJS過程中遇到了各種困難，那么，細數一下ThingJS在線開發中有哪些可以讓我們更快的去開發三維可視化場景的吧！

 

ThingJS快捷代碼功能

　ThingJS擁有一個快捷代碼功能，從新建APP到綜合，每個快捷代碼都能簡化我們的開發，尤其是快捷代碼中的綜合這一欄，其中有一個場景預覽的快捷代碼，只需要引入這個快捷代碼，就能非常迅速的讓你的場景出現預覽選項啦！

ThingJS快捷代碼中場景預覽擁有擁有以下六個主要功能：分享、自動旋轉、第一人稱、地圖背景、視點動畫、設置，還有一個全屏功能，這個作為ThingJS的快捷代碼，而不是在官方示例中存在，所以很少有人使用過這個功能呢，在這里給大家分享ThingJS的這個快捷代碼~

 

 

 

   /**
     * 引入場景預覽腳本
     * 說明：引用該腳本需要傳遞參數，參數為創建的app對象、類型type，type的值有兩種，scene和city，
     *    用於區分園區和地圖、如果type值為city，需要額外傳遞參數，參數值為創建的map對象。
     * 注：
     *     1. 如果引入該腳本是預覽園區，初始化方法示例為：init(app, 'scene', null)
     *     2. 如果引入該腳本是預覽地圖，則應在引用地圖組件腳本complete回調中引用，初始化方法示例為：init(app, 'city', event.object)
     */
    THING.Utils.dynamicLoad(['/uploads/wechat/5oiR5pyJ5pyA6ZW/55qE572R5ZCN5LiN5L+h5L2g5pWw5pWw/file/ScenePreview/AppPreview.js'],
        function () {
            init(app, 'scene', null);  // 執行初始化
        }
    )

 

 接下來我們要分享的就是ThingJS中的官方示例了，以下腳本則是ThingJS創建幾何體的官方示例，這個官方示例在快捷代碼中，使用這個功能可以從快捷代碼引用，也可以直接去復制這個然后放到ThingJS的項目中去喲

/**
 * 說明：創建多種幾何體
 * 教程：ThingJS教程——>對象創建——>創建物體
 * 難度：★★☆☆☆
 */
var app = new THING.App();

// 創建平面
var plane = app.create({
    type: 'Plane',
    width: 8,
    height: 8,
    position: [0, 0, 0]
});
// 平面旋轉90度
plane.rotateX(-90);

// 創建箱子
var box = app.create({
    type: 'Box',
    position: [2, 2, 0], // 箱子坐標
});

// 創建球體
var sphere = app.create({
    type: 'Sphere',
    radius: 0.5, // 半徑
    widthSegments: 16, // 節數
    heightSegments: 16,
    position: [4, 4, 0], // 球體坐標
});

// 創建圓柱體
var cylinder = app.create({
    type: 'Cylinder',
    radius: 0.3,
    height: 1.6,
    position: [0, 2, 2]
});

// 創建四面體
var tetrahedron = app.create({
    type: 'Tetrahedron',
    radius: 1,
    position: [0, 2, 0]
});

// update事件
app.on('update', function () {
    // 箱子自轉
    box.rotateY(app.deltaTime * 30 * 0.001);

    // 移動球體（上下移動）
    sphere.y = Math.cos(app.elapsedTime * 0.001) * 2;

    // 移動圓柱體(左右移動)
    cylinder.x = Math.cos(app.elapsedTime * 0.001) * 2;
});

// 設置最佳觀看位置
app.camera.fit();

// 設置主燈光 開啟陰影
var mainLight = {
    shadow: true
};
app.lighting = { mainLight };

 

ThingJS需要一定js開發經驗

當然，即使是新一代的物聯網可視化平台，ThingJS也有一個門檻。雖然ThingJS作為一個簡化物聯網可視化開發的平台，是大眾邁向物聯網可視化方向的一條捷徑。然而，即使是一個以簡化物聯網可視化開發的平台，在使用ThingJS進行開發的時候也需要javaScript開發經驗。javaScript語言和threejs有什么區別？threejs還涉及一些建模知識，這對小白來說很不友好，但是javaScript是一種相比於threejs更為簡單的語言。通過thingjs庫，ThingJS平台將開發難度降低到只需要javaScript語言基礎就能開發三維場景，而開發人員則專注於編寫代碼。建模者專注於建模。程序員不需要過於了解模型知識，也能使用thingjs庫來簡化3D視覺場景的開發。