3D开发是一个生态,ThingJS支持js,css,json,html外部资源引用
JavaScript是一种编程语言,它被广泛用来实现web站点和应用中的交互效果。ThingJS为3D可视化提供了161种简单开发示例,是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文件时使用时间戳,能够让浏览器加载我们的最新版本。如下所示。
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让仿真图像更加逼真!
- MySQL入门学习笔记——七周数据分析师实战作业
- 左手用R右手Python系列——七周数据分析师学习笔记R语言、Python版
- Python Numpy学习教程(一)Python篇
- MySQL数据库基础——本地文件交互
- 左手用R右手Python系列之——noSQL基础与mongodb入门
- 左手用R右手Python系列之——数据框与apply向量运算
- 左手用R右手Python系列之——迭代器与迭代对象
- 【关关的刷题日记61】Leetcode 102. Binary Tree Level Order Traversal
- 【关关的刷题日记62】Leetcode 104. Maximum Depth of Binary Tree
- DataAnnotations - InverseProperty Attribute:
- 【关关的刷题日记63】Leetcode 111 Minimum Depth of Binary Tree
- Configure Many-to-Many relationship:
- 【关关的刷题日记64】Leetcode 110 Balanced Binary Tree
- 左手用R右手Python系列之——json序列化与反序列化
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Rstudio支持可视化的Markdown编辑了?
- (八)python3 只需3小时带你轻松入门——List 与 dict 的常用操作
- (九)python3 只需3小时带你轻松入门——函数自定义
- (十)python3 只需3小时带你轻松入门——模块与包
- (十一)python3 只需3小时带你轻松入门——面向对象
- 一文读懂KEGG数据库
- (创建模式 上)设计模式——工厂、抽象工厂 C++/Python3实现
- 【新手宝典】一篇博文带萌新建站并了解建站体系流程和对萌新友好的便捷方式,这篇博文很有可能是你的启蒙文
- 一种不需要敲代码的Python 画图方法
- 【一】Windows API 零门槛编程指南——MessageBox 基本使用及基础讲解
- 【二】Windows API 零门槛编程指南——CreateWindow 窗口创建 “万字长篇专业术语全解”
- 「零门槛多语言 Python/C/C# 通用思想学习系列」第一篇:经典HelloWorld
- 直播系统定制,判断数据连接是否可用
- VS Code 编辑器入门指南上篇-核心概念与组件
- Python turtle库实现基本剖析