高德地图加载三维模型vue（.obj转.gltf）

官方glTF模型案例

obj2gltf 的开发文档

第一步：这里首先要将我们的.obj文件转换为.gltf文件

全局安装 npm install -g obj2gltf
终端打开.obj文件所在的文件夹
执行 obj2gltf -i model.obj -o model.gltf -t （-i model.obj对应你的obj文件的名字）
将生成gltf文件，上传到阿里云(平常文件上传的地方，我这里是阿里云)
还要上传贴图照片，这里的路径要注意(查看gltf里面的images的uri)，我这里多加了一层路径textures，比如gltf文件上传成功的路径是https://oos-cn.ctyunapi.cn/model/common/base/Block.gltf
，那么在Block.gltf所在的目录下在建立一个textures文件夹里面就是放所有的贴图照片，贴图照片的访问路径就是https://oos-cn.ctyunapi.cn/model/common/base/textures/Block_0_0.jpg。这里加载gltf.load()方法的时候会自己去访问

gltf文件部分内容如下：

在这里插入图片描述

obj文件包含的内容如下:
在这里插入图片描述

实现代码如下

<template><div id="container" style="width:100%;height:100%"></div>
</template><script>
export default {data() {return {}},mounted() {this.initMap()},methods: {initMap() {var map = new AMap.Map("container", {viewMode: '3D',pitch: 30,rotation: 25,zoom: 16,center: [121.499809, 31.236666],// showBuildingBlock: false,// mapStyle: 'amap://styles/macaron',showIndoorMap: false});// 创建Object3DLayer图层var object3Dlayer = new AMap.Object3DLayer();map.add(object3Dlayer);map.plugin(["AMap.GltfLoader"], function () {// var urlCity = 'https://a.amap.com/jsapi_demos/static/gltf-online/shanghai/scene.gltf';var urlCity = 'https://oos-cn.ctyunapi.cn/model/common/base/2023-12-04/Block.gltf';// var urlCity = '/Block.gltf'var paramCity = {position: new AMap.LngLat(121.499809, 31.233366), // 必须scale: 10, // 非必须，默认1height: 1800,  // 非必须，默认0scene: 0, // 非必须，默认0}var gltfObj = new AMap.GltfLoader();gltfObj.load(urlCity, function (gltfCity) {// console.log('bb', gltfCity);gltfCity.setOption(paramCity);gltfCity.rotateY(180);gltfCity.rotateX(180);// gltfCity.rotateZ(120);object3Dlayer.add(gltfCity);});});},}
}
</script><style>
</style>