React 在 JavaScript 里面实现了对 HTML 和 CSS 的封装，我们通过封装去操作 HTML 和 CSS。也就是说，网页的结构和样式都通过 JavaScript 操作。又学到啦，ThingJS支持js纯语法开发哦！
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文件时使用时间戳，能够让浏览器加载我们的最新版本。如下所示。
```javascript
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格式的文件上传。
完整运行代码示例如下。
```javascript
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项目开发平台哦！
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文件时使用时间戳，能够让浏览器加载我们的最新版本。如下所示。
```javascript
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格式的文件上传。
完整运行代码示例如下。
```javascript
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项目开发平台哦！
