Skip to content

Latest commit

 

History

History
171 lines (125 loc) · 4.87 KB

3D组件扩展.md

File metadata and controls

171 lines (125 loc) · 4.87 KB

环境准备

  • release-3.3分支源码
  • Yarn

描述

研究如何在系统中增加3D引擎-Babylon.js，使用3D引擎运行模型并关联数据，建议先了解组件扩展。

开发

登录系统，点击菜单部件库，点击右上角+号新建名为我的部件包的部件库（也可选择已有部件包进行增加），点击进入我的部件包，点击右下角+号按钮，点击创建新的部件类型按钮，选择最新值，进入部件编辑页面。

步骤一 标题

在左上角，填写部件标题：babylon-demo

步骤二 资源
方式一：标准扩展

因TB加载脚本为async（异步），多个脚本之间不能有依赖关系，下载https://preview.babylonjs.com/babylon.js、https://preview.babylonjs.com/gui/babylon.gui.min.js、https://preview.babylonjs.com/loaders/babylonjs.loaders.js，将文件合并为单个文件（babylon.mix.js）并发布出来

# 安装http-server
yarn -g http-server
# 启动
http-server -c-1

在左上资源Tab页中增加发布出来的地址：

http://ip:port/babylon.mix.js
方式二：内置

在yarn中安装类库：

# 增加babylon.js核心库，当前最新稳定版4.2.0
yarn install [email protected]
# 增加babylon.js UI核心库
yarn add [email protected]
# 增加babylon.js UI核心库
yarn add [email protected]

使用此种方式，webpack打包时，将会内置babylon引擎，资源Tab页中不需要添加任何内容。

步骤三 HTML

粘贴以下脚本到左上HTMLTab页中：

<canvas id="renderCanvas"></canvas>
步骤四 CSS

粘贴以下脚本到左上CSSTab页中：

#renderCanvas {
    width: 100%;
    height: 100%;
    touch-action: none;
}
步骤五 脚本

粘贴以下脚本到左下javascipt部分中：

var engine;
var canvas;
var scene;
var text;

self.onInit = function() {
    canvas = document.getElementById("renderCanvas"); // Get the canvas element 
    engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine

    /******* Add the create scene function ******/
    var createScene = function () {

        // Create the scene space
        var scene = new BABYLON.Scene(engine);

        // Add a camera to the scene and attach it to the canvas
        var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 2, new BABYLON.Vector3(0,0,5), scene);
        camera.attachControl(canvas, true);

        // Add lights to the scene
        var light1 = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 1, 0), scene);
        var light2 = new BABYLON.PointLight("light2", new BABYLON.Vector3(0, 1, -1), scene);

        // Add and manipulate meshes in the scene
        var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter:5}, scene);
        
        //Add advancedTexture
        var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");

        //Add label
        var label = new BABYLON.GUI.Rectangle("label for " + sphere.name);
        label.background = "black"
        label.height = "30px";
        label.alpha = 0.5;
        label.width = "200px";
        label.cornerRadius = 5;
        label.thickness = 1;
        label.linkOffsetY = -0;
        label.linkOffsetX = 10;
        advancedTexture.addControl(label); 
        label.linkWithMesh(sphere);

        text = new BABYLON.GUI.TextBlock();
        text.text = "Temperature:";
        text.color = "white";
        text.fontSize = 14;
        label.addControl(text);

        return scene;
    };
    /******* End of the create scene function ******/    
    
    
    //Call the createScene function
    scene = createScene();
        
    // Register a render loop to repeatedly render the scene
    engine.runRenderLoop(function () { 
        if (scene && scene.activeCamera) {
            scene.render();
        }
    });
}

self.onDataUpdated = function() {
    if (self.ctx.defaultSubscription.data[0].data.length) {
        var value = self.ctx.defaultSubscription.data[0].data[0][1];
        text.text = value+"";
    }
}

self.onResize = function() {
     engine.resize();  
}

self.onDestroy = function() {
   
}
步骤六 运行

点击右上角运行按钮，测试组件。

步骤七 保存

点击右上角保存按钮保存组件。

最终效果示意图：

3D部件示意

恭喜你拥有了第一个3D组件，后续可以在dashboard中绑定数据源展示实时数据。

TIPS