关于javascript:CSS样式如何被ThingJS平台轻松引用

42次阅读

共计 1664 个字符，预计需要花费 5 分钟才能阅读完成。

React 对 CSS 封装非常简单，就是沿用了 DOM 的 style 属性对象,DOM 在 ThingJS 技术中占有极其重要的地位。

HTML 绘制立体图形能够采纳 canvas 标签，然而性能上只能出现 2D 图形，想要出现 3D 图像须要非凡上下文，于是引入了 webGL 技术。如果想看它的场景演示，能够拜访谷歌团队 Data Arts 出品的基于 webGL 的 3D 场景库，前端技术圈也视它为一个蓝海技术，3D 开发利用遍及不可企及。

国内的物联网可视化技术厂商 ThingJS 纯 JS 语法开发，3D 成果也不输于原生利用，所有源于谷歌浏览器对 webgl 技术的反对。从开发生态的角度，webGL 技术能够调用显卡、调用麦克风、调用摄像头等所有能用的硬件去晋升服务质量，同时也反对援用 js 脚本和 css 演示，让你的 3D 开发成果更加有特色。

官网如何引入内部资源呢？留神在平台新建或者上传文件仅容许 js, css, html, json 格局。

咱们默认 js 脚本和 css 款式会带上工夫戳，且按 urls 数组中的程序加载，浏览器会缓存之前的 js，css 的版本，咱们更新了 js，css 文件后，浏览器不会更新。所以咱们在引入相干 css、js 文件时应用工夫戳，可能让浏览器加载咱们的最新版本。如下所示。

THING.Utils.dynamicLoad([
    '/static/vendor/twitter-bootstrap/3.3.7/css/bootstrap.min.css',
    '/static/vendor/twitter-bootstrap/3.3.7/js/bootstrap.min.js',
    '/static/vendor/moment/moment.js'],
function () {

twitter-bootstrap, moment 均为内部资源，因网络起因拷贝到了 thingjs 网站目录。
这样在平台上援用，开发不因为拜访不到资源或者拜访报错而迁延，所以咱们反对 css 库，JS 库打包并提供官网文件夹贮存资源，确保稳固，也不便用户无论何时何地都可开发。
ThingJS 官网平台反对内部资源，可操作 js, css 文件新建或者 icon、jpg、png、gif、js、css、html、json、ttf、woff、gltf、rvt、ifc、mp3 格局的文件上传。

残缺运行代码示例如下。

THING.Utils.dynamicLoad([
    '/static/vendor/twitter-bootstrap/3.3.7/css/bootstrap.min.css',
    '/static/vendor/twitter-bootstrap/3.3.7/js/bootstrap.min.js',
    '/static/vendor/moment/moment.js'],
function () {
    // 创立 App
    var app = new THING.App({url: 'https://www.thingjs.com/static/models/storehouse'});
        // 加载场景后执行
    app.on('load', function (ev) {var btn = createButton();
        btn.on('click', function () {
            // 应用 moment 库获取以后工夫
            var now = moment().format('YYYY-MM-DD HH:mm:ss');
            console.log(now);
        })
    });
})

function createButton() {
    // 应用 bootstrap 款式
    var template =
        `<button class="btn btn-default" type="button" style="position:absolute;left:20px;top:20px;z-index:2"> 以后工夫 </button>`;
    var btn = $('#div2d').append($(template));

    return btn;
}

ThingJS 次要为物联网小伙伴提供 3D 开发工具，webgl 会越来越原生，3D 可视化成果越来越好啦！

正文完