第一步:这里首先要将我们的.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文件部分内容如下:

高德地图加载三维模型vue(.obj转.gltf)

obj文件包含的内容如下:
高德地图加载三维模型vue(.obj转.gltf)

实现代码如下

<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>

效果图
高德地图加载三维模型vue(.obj转.gltf)

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

高德地图加载三维模型vue(.obj转.gltf)

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

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请不要用于商业用途!
3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员!
8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载
声明如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性

GLB下载网(glbxz.com)gltf文件下载-glb格式下载-模型制作 » 高德地图加载三维模型vue(.obj转.gltf)

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用?
本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
提示下载要提取码
百度网盘提取码都是gltf。
分享过期和重复下载怎么办
分享过期请使用备份下载,重复下载是不另扣费的,请放心下载。
模型和平台不兼容怎么办
可以用网站在线编辑功能,修改模型属性,大小,方向,坐标,中心,透明等问题,然后重新导出既可https://glbxz.com/38636.html
  • 7879会员数(个)
  • 16034资源数(个)
  • 40本周更新(个)
  • 39125 今日更新(个)
  • 1139稳定运行(天)

提供最优质的资源集合

加入VIP
开通VIP 享更多特权,建议使用 QQ 登录
×