维度是一个神奇的东西,从二维、三维到四维、五维,每个人对他们的了解都不同,我们知道二维最简单来讲就是点线面,而三维赋予了他更多立体和能动因素。
二维的曲面完全可以置身于三维空间,它也不必是平面,只要满足,曲面内的点的坐标恰好需要两个分量就能完全描述即可。至于曲面在三维空间中的扭曲形状、位置、取向,这是这个二维空间的外部信息,只要拓扑不变,二维空间内的生物是无法感知扭曲、位置、取向的。
做一个三维可视化应用难度不小,作为前端开发人员要做好准备。一个好用的开发软件必不可少。ThingJS是BS架构,基于 HTML5 和 WebGL 技术,只需要具有基本的Javascript 开发经验即可上手。可方便地在主流浏览器上进行浏览和调试,支持 PC 和移动设备。ThingJS 为可视化应用提供了简单、丰富的功能。
来看看开发历程吧:
/**
* 说明:引用 js、css 资源
* 默认js脚本和css样式会带上时间戳,且按urls数组中的顺序加载
* 更多关于 引用 js 和 css 资源的相关内容请参考教程
* twitter-bootstrap, moment均为外部资源,因网络原因拷贝到了thingjs网站目录
* 教程:ThingJS教程——>在线开发——>引用js和css
* 难度:★★☆☆☆
*/
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 =
`当前时间`;
var btn = $('#div2d').append($(template));
return btn;
}
/**
* 说明:该示例介绍如何创建一个简单的地球
*/
var app = new THING.App();
// 设置app背景为黑色
app.background = [0, 0, 0];
// 引用地图组件脚本
THING.Utils.dynamicLoad(['https://www.thingjs.com/uearth/uearth.min.js'], function () {
// 创建一个地球
var map = app.create({
type: 'Map',
atmosphere: true, // 显示/隐藏 大气层 默认显示
style: {
night: true, // 开启/关闭 白天黑夜效果 默认开启
fog: false // 开启/关闭 雾效 默认关闭
},
attribution: 'Google'// 右下角地图版权信息
});
// 创建一个瓦片图层
var tileLayer = app.create({
type: 'TileLayer',
name: 'tileLayer1',
url: 'https://mt0.google.cn/vt/lyrs=s&hl=zh-CN&gl=cn&x=&y=&z='
});
// 向地球添加一个瓦片图图层
map.addLayer(tileLayer);
// 地图注册点击事件
map.on('click', function (ev) {
console.clear();
// 获取鼠标点击处的经纬度
var lonlat = ev.coordinates;
console.log(lonlat);
// 将经纬度坐标转为三维坐标,第二个参数代表离地高度
var worldPos = CMAP.Util.convertLonlatToWorld(lonlat, 0)
console.log(worldPos);
// 根据经纬度和方位角计算物体在地球上的旋转信息,第二个参数为方位角 默认0
var angles = CMAP.Util.getAnglesFromLonlat(lonlat, 0);
console.log(angles);
})
});
领取专属 10元无门槛券
私享最新 技术干货