cesium（一）使用require.js

最新推荐文章于 2022-11-28 09:07:28 发布

前端-小姚

最新推荐文章于 2022-11-28 09:07:28 发布

阅读量1.8k

点赞数 2

本文链接：https://blog.csdn.net/Albert_Ejiestein/article/details/91296464

版权

本文旨在深入理解cesium的实现原理，通过阅读《WebGL编程指南》并结合cesium的Shaders部分，探讨如何使用require.js加载cesium源码。介绍cesium的目录结构，包括Apps、Build、Documentation、Source、Specs和ThirdParty等，并展示Hello World示例，解释data-main属性和require.js的角色。通过对比Build和Source加载方式的不同，阐述源码加载对于调试和理解cesium的重要性。

摘要由CSDN通过智能技术生成

为了更好的理解cesium实现的底层原理，最近看完了《WebGL编程指南》，很好的一本书，讲了WebGL的底层原理，包括3D图形的基础知识，着色器的使用，加载数据的整个流程，物体的动画效果等，但是发现看完了之后再去查看cesium的Shaders部分，对GLSL的实现还是有些不太懂，貌似是这里的Shaders有一部分是专门为cesium设计的。于是我参考网上几位大佬的教程，开始了解cesium的实现原理以及更好的理解GLSL，毕竟个人觉得学习cesium只有把它底层的WebGL实现搞懂了，才算是真的学会，融会贯通。学会WebGL底层后，基于WebGL的一些扩展，如Three.js，也能很容易的理解，举一反三。

在这里插入图片描述

Apps
cesium的详细范例程序
Build
release包，即编译好的cesium.js文件及widgets.css组件，包括用到的图片，纹理，第三方库，css和workers
Documentation
API文档
Source
源码，有cesium.js文件和widgets.css组件，Build文件夹中也有响应文件，不过那个是编译好的，专门用来调用运行的，而Source文件夹里面的是专门为了开发人员阅读理解的。
Specs
Cesium的自动化单元测试，采用Jasmine框架
ThirdParty
第三方库

Hello World

对于开发人员来说，或多或少都需要以源码的形式加载，这是为了便于调试和发现问题位置，如果直接加载Build下的Release脚本，则不方便进行调试。

为了加载Source的源码，Cesium采用Require.js的框架，下载好require.js或require.min.js脚本，保存在examples/js/require.min.js。
在这里插入图片描述

helloworld.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Use correct character set. -->
  <meta charset="utf-8">
  <!-- Tell IE to use the latest, best version. -->

最低0.47元/天解锁文章