浅谈cesium使用(一)

写在前面

公司要做大屏展示功能,想做的炫酷一点。经过公司领导决定,准备应用第三方3D功能。也就是我这个系列的主角——cesium。写这些东西的主要目的就是记录自己的学习过程,以及使用心得。

环境搭建

首先我们想使用这个东西 是要依据node的,我们得去下载个最新的node安装包,附上链接:node下载地址
直接傻瓜式安装就好。然后我们使用node -v 检查下版本,如果有版本就说明安装成功。
在这里插入图片描述
其次我们需要下一个cesium的代码, 具体方法有:
1.cesium官网 官网链接,由于特色“墙”的存在,所以速度十分感人
2.网盘地址 提取码chix
3. 当然也可以在GitHub上获取最新的代码 地址

获取安装包后,我们进行常规操作,解压,然后cd 进入文件目录,npm install 下载依赖(我已经下载 完依赖,此步略过),之后node server.js 运行项目
在这里插入图片描述
能看到在下面这个目录,说明我们运行成功了。
在这里插入图片描述至此我们环境搭建算是完成。

目录解释

运行起来项目之后,有这一堆的目录。看不懂没关系,主要是有两个重要的。Documentation和Sandcastle。

Documentation

这里面有cesium完整的api、某一个模块完整的效果图,函数………………
缺点也比较明显,就是搜索功能做的很沙雕,不够完善

Sandcastle

这个目录下的就比较牛逼了。这是一个沙盒, 你可以在里面:
1.看版本当前特效
2.新建个html页面,看效果
3.测试代码功能
4.导出当前模块
…………………………

我自己的学习方式

1.浏览一遍cesium的示例
2.以后用到相关代码的时候,浏览浏览代码库
3.搞清楚这个东西到底是干嘛的…………
4……………………

最后

我就是我,我就是菜的不行的痴心…………… 有缘再更哈哈

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Cesium中,可以使用Primitive来创建各种几何图形,包括圆锥体。下面是一个创建圆锥体的示例代码: ```javascript var viewer = new Cesium.Viewer('cesiumContainer'); // 创建圆锥体 var cone = viewer.scene.primitives.add(new Cesium.Primitive({ geometryInstances: new Cesium.GeometryInstance({ geometry: new Cesium.CylinderGeometry({ length: 1000.0, // 圆锥体的长度 topRadius: 500.0, // 圆锥体顶部的半径 bottomRadius: 1000.0 // 圆锥体底部的半径 }), modelMatrix: Cesium.Matrix4.IDENTITY, attributes: { color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED) // 圆锥体的颜色 } }), appearance: new Cesium.PerInstanceColorAppearance({ flat: true }) })); // 设置圆锥体的位置和方向 var position = Cesium.Cartesian3.fromDegrees(-75.62898254394531, 40.02804946899414, 1000.0); var direction = Cesium.Cartesian3.normalize(Cesium.Cartesian3.subtract(position, viewer.camera.position, new Cesium.Cartesian3()), new Cesium.Cartesian3()); var up = Cesium.Cartesian3.normalize(Cesium.Cartesian3.cross(direction, viewer.camera.right, new Cesium.Cartesian3()), new Cesium.Cartesian3()); cone.modelMatrix = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.fromColumns(direction, up, viewer.camera.right), position); ``` 在以上代码中,首先创建了一个Viewer对象,并将圆锥体添加到了场景中。圆锥体的形状由CylinderGeometry定义,长度为1000.0,顶部半径为500.0,底部半径为1000.0。圆锥体的颜色由ColorGeometryInstanceAttribute定义,这里为红色。圆锥体的位置和方向通过modelMatrix属性进行设置,这里将其放置在(-75.62898254394531, 40.02804946899414, 1000.0)位置,并朝向相机位置。 运行以上代码,就可以在Cesium中看到一个红色的圆锥体了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值