WebGL

转载自： https://blog.csdn.net/supermapsupport/article/details/89519310 一、坐标系介绍 我们先来列举下Cesium中的坐标系：WGS84经纬度坐标系（没有实际的对象）、WGS84弧度坐标系（Cartographic）、笛卡尔空间直角坐标系（Cartesian3）、平面坐标系（Cartesian2），4D笛卡尔坐标系（Cartesian4） 1、WGS84坐标系 World Geodetic System 1984，是为GPS全球定位系统使用而建立的坐标系统，坐标原点为地球质心，其地心空间直角坐标系的Z轴指向BIH （国际时间服务机构）1984.O定义的协议地球极（CTP)方向，X轴指向BIH 1984.0的零子午面和CTP赤道的交点，Y轴与Z轴、X轴垂直构成右手坐标系。我们平常手机上的指南针显示的经纬度就是这个坐标系下当前的坐标，进度范围[-180，180],纬度范围[-90，90]。 我们都知道Cesium目前支持两种坐标系WGS84和WebMercator，但是在Cesium中没有实际的对象来描述WGS84坐标，都是以弧度的方式来进行运用的也就是Cartographic类：new Cesium.Cartographic(longitude, latitude, height)，这里的参数也叫longitude

SuperMap的WebGL是基于开源JS库Cesium做的修改而形成的产品，理论上用起来大同小异，如果在有不一样的地方再看，基本上还是与Cesium的接口名称和结构是一样的。 定位方法有基于Cesium.Camera类( SuperMap / Cesium )，它不需要去单独创建这个，因为他是 Cesium.viewer 的Member成员之一，直接使用创建好的view容器，使用view.camera就可以拿到 也可以使用Cesium.Viewer类做定位，方法下文会提到 定位方法一（Camera.setView(_Object)） 这个方法是直接定位到该位置, 参数用Obj构造{destination:,orientation:, endTransform} destination 相机在WGS84世界坐标系中的最终位置，或是自顶向下视图中可见的矩形区域。即可以是一个点坐标（{ Cartesian3 }格式点坐标）或一个四至范围（{ Rectangle }格式） Cartesian3格式构造点 有很多方法，我最常用的是 从弧度转Cartesian3的 Cesium.Cartesian3.fromRadians 方法( SuperMap / Cesium ) 从WGS-84坐标转Cartesian3的 Cesium.Cartesian3.fromDegrees 方法(

废话不多说，今天就先在Eclipse上搭建Cesium开发环境吧~ 零、Cesium简介 Cesiumjs 是一套javascript库，用来渲染3D地球，2D区域地图，和多种GIS要素。不需要安装任何插件就能在支持最新HTML5标准的浏览器上运行。支持WebGL硬件加速，非常适合动态数据在GIS图层上的展示，是一个跨平台，开源，非常有前途的webgis表现层库。 Cesiumjs源自 Analytical Graphics, Inc. (AGI) 公司为他们客户开发一个虚拟地球项目，后来将cesium项目贡献给开源社区并一直活跃开发中。（AGI 开发的 STK Terrain Server 是一种针对Cesium-应用的流式高分辨率服务器）另一个公司级的贡献者是NICTA (National ICT Australia) 澳大利亚最大的信息与通讯技术中心，NICTA的员工们贡献了瓦片地图服务、地形处理等cesium的核心功能。并一直使用cesium开发环境监测分析、交通基础设施建模仿真优化等领域的应用。 此前我对比了一些GIS开源框架，相对来说Cesium是比较适合web gis的，只要浏览器支持webgl就可以无需下载任何插件运行，目前大多数主流浏览器都支持webgl，包括很多手机自带的浏览器也逐渐开始支持webgl，因此webgl的普及也必定是大势所趋。 一、开发环境 　　1

1.前言 　　 前面已经介绍如何获得以及安装部署Cesium，接下来分享下学习资源链接，其中访问最多的是官网以及超图、火星的demo网站。 2.官网地址及介绍 官网： https://cesiumjs.org 　　这个是Cesium官方的门户网站，了解下就可以了。一般我直接访问其API网站： https://cesiumjs.org/refdoc/ 这里面详细介绍了Cesium的各种类、接口以及属性，对于使用Cesium来说这个是最权威的。 官网代码demo： https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/index.html 　　这个是官方demo网站，很多有用的、有趣的实现都是基于这个网站中的某些demo。 Cesium合作Demo： https://cesiumjs.org/demos/ 　　这个网站是和Cesium合作过的团队、公司等制作的一些demo和成品，有些可能给予一些灵感。 3.超图基于Cesium的WebGL三维 　　超图这个公司不用多说了，在国内GIS行业还是实力顶尖的一批公司之一。其利用自身的各种GIS资源与Cesium结合打造了一个不错的GIS三维框架。 　　SuperMap iClient3D for WebGL 示例： http://support.supermap.com.cn:8090/webgl

当 微信小程 序遇到 AR ，会擦出怎么样的 火花 ？ 期待 与 激动 ...... 通过该教程，可以从基础开始打造一个微信小程序的AR框架，所有代码开源，提供大家学习。 本课程需要一定的基础：微信开发者工具，JavaScript，Html，Css 第四章：基石-摄像头与Three.js结合 【前情提要】 　　上一章，前面的两章内容，我们学习了基本的摄像头数据读取以及Three.js三维场景的创建。这两章内容学习之后，我们已经可以做很多更定制化的开发了。例如： 　　1. 我们已经可以做基于摄像头图像的AR内容开发，（比如人脸识别，AR美妆涂口红，戴帽子，适眼镜等等） 　　2. WebGL的三维游戏。 　　这一章，既是基础也是升华，主要是探讨，如何在微信小程序中出现摄像头画面的背景，然后在背景之上渲染出WebGL的三维内容。 1. 实现在微信小程序中访问摄像头，并且可以实时的拿到每一帧画面的数据。 2. 实现在微信小程序中访问WebGL接口，实现绘制三维物体。该教程采用Three.js引擎 3. 实现在背景为摄像头实时画面的背景上显示WebGL的3D物体。 4. 整体框架搭建 5. 图像算法接入 【目的】 微信小程序中实现摄像头画面为背景，之上渲染WebGL内容 [方案] 　　在开始开发之前，我们想罗列一下各种可能的方案。 　　要想在摄像头画面之上渲染出WebGL的内容

目录 xBIM 应用与学习 (一） xBIM 应用与学习 (二） xBIM 基本的模型操作 xBIM 日志操作 XBIM 3D 墙壁案例 xBIM 格式之间转换 xBIM 使用Linq 来优化查询 xBIM IFC 输出 Excel 报表 xBIM IFC 层次结构 xBIM 多个IFC文件合并 xBIM 插入复制功能 XBIM 基于 WexBIM 文件在 WebGL 浏览和加载 xBIM 有一个WebGL 插件。那么Web显示加载文件WexBIM文件。那么需要将文件转换为WebBIM文件。当你想将IFC转换成紧凑的wexBIM时，第一次去哪里看看就不是很明显，所以这里是代码。您将需要 xBIM Essentials 和 xBIM几何 。这里是非常简单的代码，用于将完整的IFC文件转换为wexBIM文件。因为xBIM是一个工具包，所以有办法如何定制/过滤高级部署的wexBIM文件，但这比简单的转换要复杂得多： 下面案例 将IFC 文件转换wexBIM 文件 using System.IO; using Xbim.Ifc; using Xbim.ModelGeometry.Scene; namespace CreateWexBIM { class Program { public static void Main() { const string fileName = "

XbimWebUI是一个Javascript库，可用于BIM模型的Web表示。 它使用WebGL并且独立于任何第三方WebGL框架。 查看器的数据格式为WexBIM。不能直接加载IFC文件。 一、将IFC文件转换成 WexBIM const string fileName = @" LakesideRestaurant.ifc " ; private void button1_Click( object sender, EventArgs e) { var wexBimFilename = Path.ChangeExtension(fileName, " wexBIM " ); IfcStore.ModelProviderFactory.UseHeuristicModelProvider(); using ( var model = IfcStore.Open(fileName)) { // 文件加载完成之后，进行转换 var context = new Xbim3DModelContext(model); context.CreateContext(); // 创建几何图形 // wexbim 只能在WebUI项目中使用 using ( var wexBimFile = File.Create(wexBimFilename)) { using ( var

实景三维系列2 | 实景三维模型的应用价值和意义 目录 实景三维模型有哪些有价值的信息？ 实景三维建模效率和精度如何？ 实景三维建模可以应用于哪些领域？ 实景三维模型有哪些有价值的信息？ 常用的影像数据大多只有地物顶部的信息特征，缺乏地物侧面详细的轮廓及纹理信息，不利于全方位的模型重建。 实景三维建模技术能够根据一系列二维相片，或者一组倾斜影像，自动生成 高分辨 的、带有 逼真纹理 贴图的三维模型。如果倾斜像片带有坐标信息，那么模型的 地理位置信息 也是准确的。这种模型效果逼真，要素全面，而且具有 测量精度 ，不仅带给人身临其境之感还可用于测量学应用，是现实世界的真实还原。 实景三维建模过程 实景三维建模效率和精度如何？ 实景三维建模由于通过飞行器采集倾斜影像，通过软件计算自动生成模型，极大减少了人工的投入， 成本大大降低，大致为人工建模的1/2到1/3 。倾斜摄影在获取了倾斜影像之后，主要是通过计算机实现自动化建模，其生产效率可以达到每平方公里费时三小时，即50平方公里可以在一周之内生产完毕。 单从建模阶段同人工建模每人月0.2-0.3平方公里的效率相比较，两者生产效率可达到1:600 。 实景三维建模由于飞行器航摄时可搭载高精度的定位设备，以及通过地面控制点的辅助，其 平面和水平误差可控制在20-30厘米，甚至在15厘米之内 ，达到大比例尺地图的精度要求

目前为止，我们绘制出来的3D物体都是静止的，接下来我们需要让桌面上的小盒子可以根据我们按键（上下键）前进后退； 输入方面，监听按键和鼠标消息直接在document上添加对应的监听就行了； 动画这块，我们引入了webgl-utils.js类库，其中的方法requestAnimFrame可以按60帧的帧率调用指定的方法，通过每帧调整桌面上的小盒子的矩阵位置，就可以实现动画了； 示例 https://hammerc.github.io/dou3d-ts/learning/learningNotes/lesson_5/index.html 来源： oschina 链接： https://my.oschina.net/u/4399347/blog/3275093