运行起来第一个Cesium

Posted 2023-05-11

参考技术A 1、vite新建vue工程
2、安装cesium npm install cesium
3、引入cesium
'''
import defineConfig from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from 'vite-plugin-cesium';
// https://vitejs.dev/config/
export default defineConfig(
plugins: [vue(),cesium()]
)
'''
4、第一个hellword
'''
<div id="cesiumContainer"></div>
import defineProps, reactive,onMounted from 'vue'
import * as Cesium from 'cesium';

onMounted(() =>
const viewer = new Cesium.Viewer('cesiumContainer',
);
viewer.scene.debugShowFramesPerSecond = true; //添加帧速率
)
'''
5、绘制小方格

Cesium学习笔记：导入3D模型（obj转gltf）

在用cesium的过程中难免需要导入别人做好的3D模型，这时候就需要将这些模型转成gltf格式了

当然，官方也给了我们一个网页版的转换器，但是毕竟是网页版的，效率极其低下，文件还不能太大，所以我们就需要一个格式转换器了

现在只支持obj和dae转gltf，我感觉obj比较方便，所以我用的是obj2gltf，这也是官方推荐的一个，用起来很简单，而且效果和效率都不错。

下面说一下过程

首先在cesium目录下安装obj2gltf（如果没有nodejs的就装一个吧，反正又简单官方还推荐）

npm install --save obj2gltf

• 1

• 1

然后在node_modules目录下找到obj2gltf，把你需要转的obj和带的贴图放在obj2gltf根目录下（貌似是obj2gltf的bug，指定目录似乎不管），在obj2gltf目录下打开命令行，输入

node bin/obj2gltf.js -i model.obj -o model.gltf

• 1

• 1

等个几秒就好了

下面说说我踩的坑

我一开始用的是网上下载的obj，也是带贴图的，但是转出来的就是没颜色，于是我用ps打开看了下，也没有颜色，似乎是贴图没有关联上去，这方面我也不大懂，于是就用了最笨的方法

我直接下了个max格式的，然后用3dsMax打开，再自己导出为obj格式，然后把导出的文件进行转化，就可以了