项目部署

ThingJS 为开发好的项目提供三种演示使用方式(电脑、手机、引用 iframe);以及两种部署方式(在线部署、离线部署)。

项目使用

ThingJS 提供三种方式供用户演示和使用已完成的项目:

  • 电脑使用;
  • 手机访问;
  • iframe 引用。

电脑使用

  • 电脑访问是指在代码编辑完成后,直接点击电脑访问图标,将会打开新的窗口,对该场景进行预览,如下图所示:

手机访问

  • 手机访问是指在代码编辑完成之后,点击手机访问,将会弹出二维码方便用户扫描,扫描结束后将会在手机上实现预览功能。如下图所示:

iframe 引用

  • iframe 引用是指在代码编辑完成后,点击 iframe 引用图标,在弹出框上点击复制 url ,然后再将要发布的 web 中写入 iframe 标签,将 url 嵌入对应的 iframe 中执行代码即可。

引用iframe页面

用户页面引用 ThingJS

完成 ThingJS 开发后,用户可利用 iframe 将 ThingJS 页面集成到自己的系统中去。

在线开发环境中,点击「演示项目」—>「iframe引用」,即可复制 iframe 连接的 url。

在用户系统的页面中加入 iframe 标签,引用相应 ThingJS 项目的 url 即可。

<iframe id='myIframe'

src="https://www.thingjs.com/guide/sampleindex.html?name=examples/js/sample_01_Hello.js?n=0.44618690436554065"  

style="width:100%;height:100%;">

 

用户页面与 iframe 交互

由于用户自己的系统与 ThingJS 在线环境是跨域关系,因此需使用 HTML5 提供的 postMessage 接口与 iframe 中的 3D 页面进行数据通信。

关于 postMessage 的详细 API ,点击 此处 查看

关于用户页面中内嵌 ThingJS 的完整示例,点击此处查看

在此示例中,原始用户页面包含一个信息栏和场景树如下:

http://www.3dmomoda.com/thingjs/iframe/page.html

需要嵌入的 ThingJS 页面如下:

https://www.thingjs.com/guide/sampleindex.html?name=examples/js/sample_07_Iframe3D.js?n=0.3469030493800396

在完整示例中,用户页面的信息栏和场景树与 iframe 嵌入的 3D 页面可进行交互和数据通信。

点击用户页面中的场景树,可定位到相应的建筑、楼层、房间、物体。

ThingJS 场景中的层级变化后,也会改变用户页面信息栏的信息,以及场景树的选中节点。

嵌入 iframe 后的用户页面完整代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>我的主页 引用3D页面
    <引入jquery 以及 easyui 插件和样式 
    <link rel="stylesheet" type="text/css" href="css/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="css/themes/icon.css">
    <script src="js/jquery.min.js">
    <script src="js/jquery.easyui.min.js"> 
</head>

<body>
    <div style="height:920px;">
        <div style="height:20px">
            <span id='infoText'>3D加载中
        </div>
        <div class="easyui-panel" style="width: 300px;position: absolute;">
            <ul id="objectTree" class="easyui-tree">
        </div>
        <div style="height:100%;">
            <iframe id='myIframe'
                src="https://www.thingjs.com/guide/sampleindex.html?name=examples/js/sample_07_Iframe3D.js?n=0.3469030493800396"
                style="width:100%;height:100%;"> 
        </div>
    </div>
</body>
<script>
    window.onload = function () {
        createTree();
    }

    function createTree() {
        $.ajax({
            type: "get",
            url: "./data/tree.json",
            dataType: "json",
            success: function (d) {
                $('#objectTree').tree({
                    data: d,
                    onClick: function (node, checked) {
                        var id = node.id;
                        callFuncInThingJS('changeLevel', id)
                    }
                })
            }
        });
    }

    function callFuncInThingJS(funcName, data) {
        var iframe = $('#myIframe')[0];

        var message = {
            'funcName': funcName,// 所要调用ThingJS页面里的函数名
            'param': data
        }
        iframe.contentWindow.postMessage(message, '*');
    }

    function upDateInfo(param) {
        var infoText = $('#infoText')[0];
        infoText.innerText = param.info;

        var node = $('#objectTree').tree('find', param.id);
        $('#objectTree').tree('expandTo', node.target).tree('select', node.target);
    }

    // 接收ThingJS页面传送的数据
    window.addEventListener('message', function (e) {
        var data = e.data;
        var funcName = data.funcName;
        var param = data.param;
        window[funcName](param);
    });

</script>
</html> 

在线演示

普通个人开发者可以通过在线演示,使用上文提到的三种方式(电脑、手机、iframe 引用)进行发布,该方式不收取任何费用。但发布的项目均带有 ThingJS 专有 logo ,并且能保存的场景、脚本个数、每个项目的访问次数均有限制,更多相关权限信息可以点击 此处 了解。

在线部署

在线部署方式为收费服务,通过在线运营环境进行托管,企业级用户开发后发布的项目不带 ThingJS 专用 logo,更多相关权限信息可以点击 此处 了解。ThingJS 提供两个路径实现在线部署:

  1. 保存好项目后,点击“项目部署”进入选择在线部署或者离线部署,然后进行支付支付界面

  2. 进入「控制台」点击「我的项目」,点击最右侧的“操作”图标选择项目托管或者离线部署;

离线部署

用 ThingJS 平台开发的项目也可以离线部署,支持 Linux(CentOS,Ubuntu,Debian,FreeBSD)和 Windows(Window Server)服务器平台。

项目以离线部署包方式发布必须成为商业开发者,无需连接公网,发布的项目也不带 ThingJS 专用 logo 。

项目在线开发完成后,申请离线包下载。ThingJS 会自动打包项目相关的资源文件(包括代码、场景、上传的资源等), 自动生成离线部署安装包。部署时,执行安装包程序,便可快速实现一键部署。

离线部署包下载说明:

  1. 用户处于登录状态时,即可点击控制台。切换至离线部署
  2. 点击离线部署内的下载申请
  3. 在弹出界面中选择将要离线部署的项目(此项目必须为用户自己上传场景的项目)后,点击确认
  4. 将会出现如下页面
  5. 完成后可点击下载按钮保存即可
  6. 下载后的压缩包内含有离线部署使用说明,可点击查看

项目托管和离线部署包,这两种都是需要付费的,相关付费价格可以点击 此处了解。

可直接点击 说明书下载 进行下载查看。

在线咨询
QQ交流群
微信公众号