首页
学习
活动
专区
工具
TVP
发布

三维可视化开发好用的软件有哪些?

维度是一个神奇的东西,从二维、三维到四维、五维,每个人对他们的了解都不同,我们知道二维最简单来讲就是点线面,而三维赋予了他更多立体和能动因素。

二维的曲面完全可以置身于三维空间,它也不必是平面,只要满足,曲面内的点的坐标恰好需要两个分量就能完全描述即可。至于曲面在三维空间中的扭曲形状、位置、取向,这是这个二维空间的外部信息,只要拓扑不变,二维空间内的生物是无法感知扭曲、位置、取向的。

做一个三维可视化应用难度不小,作为前端开发人员要做好准备。一个好用的开发软件必不可少。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);

})

});

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20191226A0H49C00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券