完善资料让更多小伙伴认识你,还能领取20积分哦, 立即完善>
`维度是一个神奇的东西,从二维、三维到四维、五维,每个人对他们的了解都不同,我们知道二维最简单来讲就是点线面,而三维赋予了他更多立体和能动因素。
二维的曲面完全可以置身于三维空间,它也不必是平面,只要满足,曲面内的点的坐标恰好需要两个分量就能完全描述即可。至于曲面在三维空间中的扭曲形状、位置、取向,这是这个二维空间的外部信息,只要拓扑不变,二维空间内的生物是无法感知扭曲、位置、取向的。 做一个三维可视化应用难度不小,作为前端开发人员要做好准备。一个好用的开发软件必不可少。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={x}&y={y}&z={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); }) }); ` |
|
相关推荐 |
|
小黑屋| 手机版| Archiver| 电子发烧友 ( 湘ICP备2023018690号 )
GMT+8, 2024-11-3 06:48 , Processed in 0.559587 second(s), Total 44, Slave 34 queries .
Powered by 电子发烧友网
© 2015 bbs.elecfans.com
关注我们的微信
下载发烧友APP
电子发烧友观察
版权所有 © 湖南华秋数字科技有限公司
电子发烧友 (电路图) 湘公网安备 43011202000918 号 电信与信息服务业务经营许可证:合字B2-20210191 工商网监 湘ICP备2023018690号