高德地图加载三维模型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, // 非必须,默认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>

效果图:
在这里插入图片描述

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

在这里插入图片描述

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/202849.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

企业部署Windows活动目录有什么好处?

在一个现代化的企业中&#xff0c;高效、安全地管理公司的IT资源是至关重要的。Windows Active Directory&#xff08;活动目录&#xff09;是一个强大的功能&#xff0c;可以帮助企业实现集中管理用户、计算机、组策略和其他资源的目的。本文将探讨部署Windows AD域即活动目录…

【往届见刊检索速度hin OK】 第五届计算机工程与应用国际学术会议 (ICCEA 2024)

第五届计算机工程与应用国际学术会议 (ICCEA 2024) 2024 5th International Conference on Computer Engineering and Application 2024年4月12-14日 中国-杭州 计算机工程与应用在人工智能、大数据、云计算、物联网、网络安全等领域发挥着重要作用&#xff0c;随着科技日…

[NAND Flash 2.3] 闪存芯片国产进程

依公知及经验整理&#xff0c;原创保护&#xff0c;禁止转载。 专栏 《深入理解NAND Flash》 <<<< 返回总目录 <<<< 目录 前言1 闪存介质1.1 NOR 闪存国产技术发展1.2 NAND 闪存国产技术 2 闪存国产厂商与产品2.1 NOR FLASH 国产厂商与产品2.2 NAND FA…

开发重要网站

dockerhub hub.docker.comhutool工具包 https://hutool.cn/docs/#/rgb颜色 https://m.fontke.com/tool/rgb/7badb1/json查看 https://www.bejson.com/jsonviewernew/大小写等转换 https://www.iamwawa.cn/daxiaoxie.htmlmaven库查询 https://mvnrepository.com/

java开发中Dao层和Mapper层的关系

Mapper 层和 DAO&#xff08;Data Access Object&#xff09;层是在持久层中用于处理数据访问的两个概念。虽然这两者的目的都是用于访问数据库&#xff0c;但它们之间有一些区别。在Java开发中&#xff0c;这两个概念通常与MyBatis&#xff08;或其他ORM框架&#xff09;结合使…

Vue学习计划-Vue2--Vue核心(四)watch、class、style、set

Vue 监听(watch): 监听一个属性的变化 监事属性watch: 当监视的属性变化时&#xff0c;回调函数自动调用&#xff0c;进行相关操作监视的属性必须存在&#xff0c;才能进入监视监视的两种写法&#xff1a; new Vue 时传入watch配置通过 vm.$watch()监视 immediate初始化时让han…

运行在多个端系统上的程序是如何互相通信的?

一、进程通信 1.首先搞清楚一点&#xff0c;对于操作系统而言&#xff0c;进行通信的实际上是进程&#xff0c;而不是程序。 2.一个进程可以被认为是运行在端系统上的一个程序&#xff0c;当多个进程运行在相同的端系统上的时候&#xff0c;它们使用进程间通信机制相互通信。…

深入Os--动态链接

1.动态链接库的使用 动态库支持以两种模式使用&#xff0c;一种模式下&#xff0c;在程序加载运行时&#xff0c;完成动态链接。一种模式下&#xff0c;在程序运行中&#xff0c;完成动态链接。 1.1.程序加载运行时完成动态链接 我们通过一个实例介绍程序加载运行时&#xff0c…

【Pandas思考记录】力扣181. 超过经理收入的员工

原题链接 Pandas 代码&#xff1a; import pandas as pddef find_employees(employee: pd.DataFrame) -> pd.DataFrame:merged_df pd.merge(employee, employee, left_onmanagerId, right_onid, howinner, suffixes(, _manager))print("merged_df", merged_df)#…

Socket.D 网络应用协议,首版发布!

有用户说&#xff0c;“Socket.D 之于 Socket&#xff0c;尤如 Vue 之于 Js、Mvc 之于 Http” 主要特性 基于事件&#xff0c;每个消息都可事件路由所谓语义&#xff0c;通过元信息进行语义描述流关联性&#xff0c;有相关的消息会串成一个流语言无关&#xff0c;使用二进制输…

【debug】Image 库 字体问题

可能的报错信息&#xff1a; from PIL import ImageFont, ImageDrawdraw ImageDraw.Draw(image)# use a bitmap font font ImageFont.load("arial.pil")draw.text((10, 10), "hello", fontfont)# use a truetype font font ImageFont.truetype("a…

4G基站BBU、RRU、核心网设备

目录 前言 基站 核心网 信号传输 前言 移动运营商在建设4G基站的时候&#xff0c;除了建设一座铁塔之外&#xff0c;更重要的是建设搭载铁塔之上的移动通信设备&#xff0c;这篇博客主要介绍BBU&#xff0c;RRU以及机房的核心网等设备。 基站 一个基站有BBU&#xff0c;…

代数学笔记7: 交换群结构定理,群在集合上的作用

交换群结构定理 G ≅ Z / d 1 Z Z / d 2 Z ⋯ Z / d n Z , d 1 ∣ d 2 , ⋯ , d n − 1 ∣ d n G\cong \mathbb{Z}/d_1\mathbb{Z}\times \mathbb{Z}/d_2\mathbb{Z}\times\cdots\times \mathbb{Z}/d_n\mathbb{Z}, \quad d_1|d_2,\cdots,d_{n-1}|d_n G≅Z/d1​ZZ/d2​Z⋯Z/dn​…

Liunx系统使用超详细(四)~文件/文本相关命令1

目录 一、mkdir命令 1.1基本语法 1.2常用示例 1.2.1创建目录 1.2.2创建多级目录 1.2.3设置权限 1.2.4递归修改权限 1.2.5显示帮助信息 二、touch命令 2.1基本语法 2.2常用示例 2.2.1创建新的空文件 2.2.2更新现有文件的访问和修改时间戳 2.2.3创建多个文件 2.2.…

【Midjourney实战】| 新年红包、元宝、灯笼、福袋生成

文章目录 1 红包生成2 灯笼生成3 福袋生成4 元宝生成 1 红包生成 之前我们生成了新年礼盒&#xff0c;这一期我们来生成一些过年时特有的元宝和红包 首先&#xff0c;最重要的是画面主体 red envelope&#xff08;红包&#xff09;颜色红色 黄色的 red and yellow 为了后期方…

跳水比赛(C++)

系列文章目录 进阶的卡莎C++_睡觉觉觉得的博客-CSDN博客数1的个数_睡觉觉觉得的博客-CSDN博客双精度浮点数的输入输出_睡觉觉觉得的博客-CSDN博客足球联赛积分_睡觉觉觉得的博客-CSDN博客大减价(一级)_睡觉觉觉得的博客-CSDN博客小写字母的判断_睡觉觉觉得的博客-CSDN博客纸币(…

解决部署到k8s上的服务返回的msg乱码和控制台乱码的问题

解决部署到k8s上的服务返回的msg乱码和控制台乱码的问题 java -Dfile.encodingutf-8 -jar xxx.jar

Web漏洞分析-SQL注入XXE注入(下)

随着互联网的不断普及和Web应用的广泛应用&#xff0c;网络安全问题愈发引起广泛关注。在网络安全领域中&#xff0c;SQL注入和XXE注入是两个备受关注的话题&#xff0c;也是导致许多安全漏洞的主要原因之一。本博客将深入研究这两种常见的Web漏洞&#xff0c;带您探寻背后的原…

Python中数组去重的方法汇总

Python中数组去重的方法汇总 1. 使用 set2. 使用列表推导式3. 使用 numpy 库4. 使用 pandas 库5. 使用 collections 库的 Counter6. 使用 functools 库的 reduce7. 使用 itertools 库的 groupby总结 在 Python 中&#xff0c;对数组进行去重是常见的操作&#xff0c;以确保数据…

Python 上下文管理器 with 相关用法

Python 上下文管理器 什么是上下文管理器&#xff1f; context manager一个上下文管理器是一个对象它定义了运行时的上下文使用 with 语句来执行 with 语句 with context as ctx:# 使用这个上下文对象 # 上下文对象已经被清除​ 这里我们使用 Python的文件操作 打开一个文…