使用javascript构建3D web 应用

### 使用JavaScript构建3D Web应用的关键知识点 #### 一、概览 在当前技术发展背景下，使用JavaScript构建3D Web应用已经成为一种趋势。这不仅能够快速搭建起属于自己的框架，还能帮助开发者快速开发出功能丰富的应用平台。本次分享将重点介绍如何使用ArcGIS JavaScript API 4.0来构建3D Web应用。 #### 二、API 4.0新架构 ##### 1. 支持Web3D开发 ArcGIS JavaScript API 4.0新增了对Web3D的支持，这意味着开发者可以在Web端构建更加逼真且交互性强的应用场景。这种支持主要通过WebGL技术和着色器（Shaders）实现。 - **WebGL**：一种用于渲染2D和3D图形的标准Web技术，无需任何插件即可在网页上运行。 - **着色器**：包括顶点着色器(Vertex Shader)和片段着色器(Fragment Shader)，用于控制3D对象的外观和行为。 ##### 2. 相同的命名空间 为了保持与之前版本的一致性，API 4.0采用了相同的命名空间，方便开发者迁移代码。 ##### 3. 一样的编码方式 API 4.0延续了之前的编码风格，使得学习曲线更为平滑。 ##### 4. 不完全兼容3.x API 虽然API 4.0在很多方面与3.x版本相似，但并非所有功能都能直接兼容。开发者需要注意更新文档，确保代码的正确迁移。 #### 三、API 4.0与API 3.x对比 ##### 1. 架构变化 - **API 3.x架构**： - Developer - Map - Layers - **API 4.0架构**： - Developer - Map - Viewport2D - Layers - 2DLayerViews - Viewport3D - Layers - 3DLayerViews 这种变化反映了API 4.0更加强调视口（Viewport）的概念，将2D和3D视图分开处理。 #### 四、Web3D体系结构 在Web3D体系结构中，核心组件包括： - **Web App**：最终用户界面。 - **API 4.0**：提供必要的接口和功能支持。 - **WebGL**：底层图形渲染技术。 - **Shaders**：负责图形的高级细节处理。 #### 五、API 4.0介绍与使用 ##### 1. 在线资源 - **官方网址**：http://jsdev.arcgis.com/4.0beta1/ - **每日构建**：持续提供最新的构建版本供开发者测试。 - **Beta 1版本**：预计于6月中旬发布。 ##### 2. HelloWorld Demo 通过一个简单的示例来了解API 4.0的基本用法： - **Accessor**：状态管理的基础类。 - **Viewport**：负责渲染场景。 - **Layer**：表示地图层。 - **Camera**：控制视角。 - **Navigation**：导航功能。 - **Symbol3D**：3D符号。 #### 六、关键概念 ##### 1. Accessor - **Stateful**：具有状态的特性。 - **Promise**：异步编程模式。 - **Evented**：事件驱动机制。 ##### 2. Viewport - **HTMLViewport**：基于HTML的视口。 - **Canvas3DViewport**：基于Canvas 3D的视口。 - **Viewport2D**：2D视口。 - **Viewport3D**：3D视口。 ##### 3. Map与Viewport的关系 - **Map**作为Viewport的包装器，Viewport执行具体的工作。 - **map.viewport**：获取Viewport实例。 #### 七、Viewport属性与方法 - **属性**：包括camera、width、height等。 - **方法**：如animateTo、centerAt等，用于控制视口的行为。 #### 八、Layer类 - **继承**：从Accessor和Promise继承而来。 - **Layer.layerView**：指向LayerView的引用。 - **添加和移除**：Map.add、Map.remove。 #### 九、常用的Layer类型 - **GraphicsLayer**：用于绘制自定义图形。 - **FeatureLayer**：显示地理特征数据。 - **ArcGISTiltedMapServiceLayer**：倾斜地图服务。 - **ArcGISDynamicMapServiceLayer**：动态地图服务。 - **ArcGISImageServiceLayer**：图像服务。 - **ArcGISSceneServiceLayer**：场景服务。 #### 十、ArcGISSceneServiceLayer 用于展示三维场景的服务层。 #### 十一、扩展Layer - **编写自定义Renderer**：实现特定的方法。 - **编写自定义LayerView**：定制化的视图实现。 - **Viewport._stage.addExternalRenderer**：注册外部Renderer。 - **覆写Layer.createLayerView**：替换默认的LayerView实例。 #### 十二、Camera - **属性**：如position、tilt、fov等。 - **方法**：getLookatPoint、getViewDistance等，用于获取或设置相机的状态。 #### 十三、Navigation - **getCurrentCamera**：获取当前相机。 - **setCamera**：设置相机。 - **setCameraFromEyeAndCenter**：根据眼睛位置和中心点设置相机。 - **setCameraFromEyeAndDirection**：根据眼睛位置和方向设置相机。 使用JavaScript构建3D Web应用涉及到的技术点主要包括API 4.0的新架构、关键概念、Viewport属性与方法、Layer类及其实现、Camera和Navigation等。这些技术点为开发者提供了强大的工具集，使他们能够构建出更加丰富和互动性强的3D Web应用。