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

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

 npm install mapv-three

2：在index.html加载百度地图

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

注：加载model.glb文件需要是请求来的，所以我本地起了服务器放3D模型数据
或者简单的步骤使用Visual Studio Code安装Live Server插件

然后右击index.html选择红框打开，就可以加载本地的3D模型数据了

全部代码：

<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);// 模型const models = [{position: [120.90097,31.97889, 6],path: 'http://000.0.0.1:5501/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: 'http://000.0.0.1:5501/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: 'http://000.0.0.1:5501/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>
</style>

VUE百度地图加载3D模型(MapVThreeGallery)相关推荐

解锁Vue百度地图加载的N种姿势
加载方法最近在使用Vue开发百度地图功能,首先就碰到了百度地图Api如何引入的问题,查了查,网上有N种加载方案,简单梳理了下,大体可以分为以下三种: 一.简单粗暴直接引入法第一步.在index.h ...
如何加载3D模型（odj文件和mtl文件）
模型的加载因为,在最近的项目模块中需要加载部分"模型".在加载模型在方面我从来的没有接触过,是通过同事告诉,慢慢摸索才完成的,其中是我遇到的问题和总结的一些的方法. 使用VUE加 ...
qt opengl 加载3d模型（obj格式）
和一般c++程序加载3d模型一样,解读出数据内容,再用一个常规的着色程序就可以了. 我实现的效果如下,采用的免费模型实现思路和前面的略有不同,就是把自己生成顶点.纹理.法线的过程变成从文件读取了. ...
threejs加载3D模型例子
加载3D模型首先要引入ColladaLoader加载器,Collada是一个3D模型交换方案,即不同的3D模型可以通过Collada进行相互转换,言外之意,threejs可以使用Collada将3D ...
cesium加载百度地图_Cesium专栏-百度地图加载（附源码下载）
Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精度,渲染质量以 ...
Labview加载3D模型（.wrl）出现内存不足的解决方法
Labview加载3D模型(.wrl)出现内存不足的解决方法最近,由于项目的要求,需要做一个上位机,用于实时采集装备的状态信息.最终方案采用Labview数据流的方式构建应用程序.在加载wrl3D模 ...
Unity动态加载3D模型
Unity动态加载3D模型在Unity中创建游戏对象的方法有 3 种: 第一种是将物体模型资源由 Project 视图直接拖曳到 Hierarchy 面板中: 第二种是在 Unity 3D 菜单 G ...
threejs加载3D模型
加载3D模型首先要引入ColladaLoader加载器,Collada是一个3D模型交换方案,即不同的3D模型可以通过Collada进行相互转换,言外之意,threejs可以使用Collada将3D ...
Qt和OpenGL：使用Open Asset Import Library（ASSIMP）加载3D模型
Qt和OpenGL:使用Open Asset Import Library(ASSIMP)加载3D模型翻译自:https://www.ics.com/blog/qt-and-opengl-loadi ...
百度地图加载不出来，问题根源在SHA1
最近做的项目用到了百度地图,结果开发过程中一切正常,但是最后打包的程序的地图却加载不出来,尝试了好多办法,最后还是没有成功.最后找出来问题的根源,都是SHA1惹的货. 首先获取SHA1,这里推荐两种办 ...

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

VUE百度地图加载3D模型(MapVThreeGallery)相关推荐

最新文章

热门文章