VUE百度地图加载3D模型(MapVThreeGallery)

这篇具有很好参考价值的文章主要介绍了VUE百度地图加载3D模型(MapVThreeGallery)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

参考百度开发文档
补充下(里面有免费的可以拿来玩)3D模型下载网址
步骤
1: npm install mapv-three 安装插件

 npm install mapv-three

2:在index.html加载百度地图VUE百度地图加载3D模型(MapVThreeGallery)

 <script src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=你的百度秘钥"></script>

注:加载model.glb文件需要是请求服务器来的,没有服务器资源的可以像我一样在本地用VS插件(Live Server)起了个小型服务器放3D模型数据 ----使用Visual Studio Code安装Live Server插件
VUE百度地图加载3D模型(MapVThreeGallery)
然后右击index.html选择红框打开,就可以加载本地的3D模型数据了(这边是为了把这个小型本地服务启动起来,后面只用到了网址)
VUE百度地图加载3D模型(MapVThreeGallery)
VUE百度地图加载3D模型(MapVThreeGallery)

全部代码:

<template>
  <div class="hello" id="map_container" style="width: 100%;height: 100%;"></div>
</template>

<script>
import { Engine, GeoJSONDataSource, EmptySky, Polygon, ExtendMeshStandardMaterial } from 'mapv-three';
import { GLTFLoader } from 'bmap-three/examples/jsm/loaders/GLTFLoader.js';
import { PlaneGeometry, Mesh, MeshStandardMaterial, MeshBasicMaterial, Color, BoxGeometry, TextureLoader, RepeatWrapping } from 'bmap-three';

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
    };
  },
  created() { },
  mounted() {
    this.ikn()
  },
  methods: {
    ikn() {
      const center = [120.90197,31.97289];
      const map = new BMapGL.Map('map_container', {
        restrictCenter: false,
        maxZoom: 25,
        displayOptions: {
          building: false,
        },
      });

      map.centerAndZoom(new BMapGL.Point(center[0], center[1]), 17);
      map.enableScrollWheelZoom(true);
      map.enableKeyboard();
      map.enableInertialDragging();
      map.enableContinuousZoom();
      map.setTilt(40);//地图倾斜角度
      map.setHeading(10);//地图旋转角度

      const engine = new Engine(map, {});
      engine.map.setCenter(center);
      engine.rendering.useMrt = true;
      engine.rendering.shadow.enabled = true;
      engine.rendering.animationLoopFrameTime = 40;
      engine.rendering.colorAdjust.saturation = 0.25;
      engine.rendering.colorAdjust.contrast = 0.15;
      engine.rendering.colorAdjust.brightness = 0;

      const sky = engine.add(new EmptySky());
      sky.time = 3600 * 16.5;

      const position = engine.map.projectPointArr(center);

      let mxUrl='http://127.0.0.1:5501/'
      // 模型
      const models = [
        {
          position: [120.90097,31.97889, 6],
          path: mxUrl+'/src/assets/model.glb',
          rotate: true,
          info: '酒瓶',
          rotation:[6.2 / 4,10.3,6.3],
          scale:[150,150,150]
        },
        {
          position: [120.90097,31.96889, 6],
          path: mxUrl+'/src/assets/model2.glb',
          rotate: false,
          info: '房间',
          rotation:[6.2 / 4,10.3,6.3],
          scale:[50,50,50]
        },
        {
          position: [120.91097,31.97289, 6],
          path: mxUrl+'/src/assets/model3.glb',
          rotate: true,
          info: '蓝鳍金枪鱼',
          rotation:[10.2 / 4,5.3,5.3],
          scale:[300,300,300]
        }
      ];

      let changModels = [],XYdata = []
      models.forEach((item,index) => {
        XYdata = this.Mercator2LonLat({x:item.position[0],y:item.position[1]})
        item.position = [XYdata.x,XYdata.y,item.position[2]]
        changModels.push(item)
      });
      // console.log("处理",changModels)

      const loader = new GLTFLoader();
      for (let i = 0; i < changModels.length; i++) {
        loader.load(changModels[i].path, gltf => {
          
          // console.log(gltf)
          const model = gltf.scene.children[0];
          model.userData.info = changModels[i].info;
          for (let i = 0; i < model.children.length; i++) {
            model.children[i].castShadow = true;
          }
          // console.log(models[i].rotation)
          let rotaData = changModels[i].rotation;
          let scalData = changModels[i].scale;
          model.rotation.set(rotaData[0],rotaData[1],rotaData[2]);//身体旋转角度
          model.scale.set(scalData[0],scalData[1],scalData[2]);//物体缩放大小
          
          model.position.set(changModels[i].position[0], changModels[i].position[1], changModels[i].position[2]);

          if (changModels[i].rotate) {
            model.rotation.x = Math.PI / 2;
            model.rotation.y = 1.08 * Math.PI / 2;
          }
          engine.add(model);
          // 模型添加点击事件
          engine.event.markEventProxy(model);
          engine.event.bind(model, 'click', e => {
            console.log(model)
            alert('点击了 ' + model.userData.info);
          });
        });
      }

    },
    Mercator2LonLat(lonlat) {
      //墨卡托经纬度坐标转换
      var mercator = {
        x: 0,
        y: 0
      };
      var x = lonlat.x * 20037508.34 / 180;
      var y = Math.log(Math.tan((90 + lonlat.y) * Math.PI / 360)) / (Math.PI / 180);
      y = y * 19915508.34 / 180;
      mercator.x = x;
      mercator.y = y;
      // console.log("完成左边转换",lonlat,mercator)
      return mercator;
    },
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

目录结构如下:
VUE百度地图加载3D模型(MapVThreeGallery)

效果图如下:
VUE百度地图加载3D模型(MapVThreeGallery)
VUE百度地图加载3D模型(MapVThreeGallery)文章来源地址https://www.toymoban.com/news/detail-504026.html

到了这里,关于VUE百度地图加载3D模型(MapVThreeGallery)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp APP、H5和微信小程序 使用百度地图,H5动态加载百度地图sdk,cover-image图片不显示,标准基座模拟器地图不显示,表单校验字段[‘**‘]在数据库中不存在

    APP里面的几个注意项 在百度地图开放平台申请密匙,在manifest.json App模块配置的地图模块选择百度地图并填入申请到的appkey。 页面使用uniapp的map标签,要在地图上面覆盖图片、内容等,使用cover-image、cover-view,因为map是原生组件,覆盖的内容有时不显示,使用v-if控制(这里

    2024年02月11日
    浏览(67)
  • vue 使用百度地图记录

    参考文档 https://lbsyun.baidu.com/index.php?title=jspopular3.0/guide/infowindow https://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference_3_0.html#a0b0 参考链接:https://api.map.baidu.com/library/MarkerClusterer/1.2/docs/symbols/BMapLib.MarkerClusterer.html 下载这个js

    2024年02月13日
    浏览(40)
  • vue中使用百度地图

    3.在页面使用 4.百度地图初始化函数及批量生成自定义图标点 5.需求1:切换中心点 6.需求2:鼠标滑过自定义图标改变 需求3:鼠标滑过展示信息窗口

    2024年02月14日
    浏览(48)
  • 【Vue】集成百度地图

    1、获取百度地图 ak 密钥 2、登录网址 https://lbsyun.baidu.com/ 3、注册百度地图开放平台账号,填写认证信息,并且创建应用 注意 BaiduMap 组件容器本身是一个空的块级元素,如果容器不定义高度,百度地图将渲染在一个高度为 0 不可见的容器内。 没有设置center 和 zoom 属性的地图

    2024年02月10日
    浏览(43)
  • vue3 中使用百度地图

    最近一个项目要用到地图,因为微信小程序用的也是百度地图,所以想着网页端也用百度地图,在网上查了很多方法,包括引入百度地图第三方库,还是有问题,发现最简单的方法就是在index.html中引入script,然后直接在相关页面肝就完事。 在百度开发者平台上面申请,其他

    2023年04月17日
    浏览(57)
  • vue项目中使用百度地图(一)

    vue+百度地图的基础使用。 首先,第一步申请key,保存好这个密钥。 链接:jspopular | 百度地图API SDK (baidu.com) 使用百度地图有两种方式:1.javaScript API    2.直接引用组件。 以2.0版本为例。 方法1:百度地图javaScript API 引入方式有两种。 方法1:index.html中引用 在想要展示地图的

    2024年02月12日
    浏览(44)
  • vue3使用百度地图(详)

    提示:该博客vue采用vue3,使用百度地图通过组件 vue-baidu-map-3x : 组件官网:https://map.heifahaizei.com/doc/baidu-map.html 下面会从头开始介绍如何使用百度地图以及常用组件功能(附带遇到的问题和解决方案) 步骤:1. 进入百度地图开放平台 | 百度地图API SDK | 地图开发 2.打开顶部控制

    2024年02月06日
    浏览(57)
  • vue项目中使用百度地图,详细过程

    简述:我们在写项目的时候,有时候难免会用到地图,这里给大家介绍一下如何在vue项目中使用百度地图,获取可视区域坐标,以及添加线路、站点。 1、 首先,在项目中安装百度地图依赖。 2、 全局注册,在main.js中一次性引入百度地图组件库的所有组件,  //   ak 是在百

    2023年04月15日
    浏览(45)
  • Cesium地图上加载3DTiles模型

    1,使用Blender创建模型: 官网下载Blender:https://www.blender.org/,在Github上下载Building Tools插件,通过编辑-偏好设置-插件-安装,导入压缩包使用,这个可以自己创建小房子,文件-导出为obj格式 2,将.obj转成3dtiles格式: 1,第一种方法通过加载本地文件展示: 1,github下载ObjTo3

    2024年02月03日
    浏览(45)
  • 前端vue uni-app百度地图定位组件,显示地图定位,标记点,并显示详细地址

    快速实现前端百度地图定位组件,显示地图定位,标记点,并显示详细地址; 阅读全文下载完整代码请关注微信公众号: 前端组件开发 效果图如下:     代码如下: # 百度地图定位组件,显示地图定位,标记点,并显示详细地址 #### 使用方法 ```使用方法 #安装vue-baidu-map插件

    2024年02月08日
    浏览(65)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包