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

官方glTF模型案例

obj2gltf 的开发文档

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

1. 全局安装 npm install -g obj2gltf
2. 终端打开.obj文件所在的文件夹
3. 执行 obj2gltf -i model.obj -o model.gltf -t （-i model.obj对应你的obj文件的名字）
4. 将生成gltf文件，上传到阿里云(平常文件上传的地方，我这里是阿里云)
5. 还要上传贴图照片，这里的路径要注意(查看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, // 非必须，默认1
          height: 1800,  // 非必须，默认0
          scene: 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>

效果图：

注意：public下面的index.html要引入高德api

也可参考这篇文章：
在高德地图上显示大疆智图导出的三维模型