VUE Three.js Mapbox 实现地图中添加3D模型

已于 2025-02-20 14:48:37 修改
阅读量379 收藏
点赞数 2
文章标签： javascript vue.js 3d
于 2025-02-20 14:38:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53159238/article/details/145752609
版权

创建一个 ModelComponent.vue 文件，用于封装单个3D模型。

<template>
  <!-- 3D模型组件不需要模板，直接通过 three.js 渲染 -->
</template>

<script>
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

export default {
  name: 'ModelComponent',
  props: {
    longitude: {
      type: Number,
      required: true,
    },
    latitude: {
      type: Number,
      required: true,
    },
    modelType: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      model: null,
    };
  },
  mounted() {
    this.loadModel();
  },
  methods: {
    loadModel() {
      const loader = new GLTFLoader();

      // 根据模型类别加载不同的模型文件
      let modelPath = '';
      switch (this.modelType) {
        case 'building':
          modelPath = '/models/building.gltf';
          break;
        case 'tree':
          modelPath = '/models/tree.gltf';
          break;
        default:
          console.error('Unknown model type:', this.modelType);
          return;
      }

      loader.load(modelPath, (gltf) => {
        this.model = gltf.scene;

        // 将模型添加到父组件的场景中
        this.$parent.scene.add(this.model);

        // 设置模型的位置
        this.updatePosition();
      });
    },
    updatePosition() {
      if (!this.model || !this.$parent.map) return;

      // 将经纬度转换为 three.js 场景中的 x, y 坐标
      const lngLat = [this.longitude, this.latitude];
      const pixelCoordinates = this.$parent.map.project(lngLat);
      const x = pixelCoordinates.x - window.innerWidth / 2;
      const y = -pixelCoordinates.y + window.innerHeight / 2;
      const z = 0; // 可以根据需要调整高度

      this.model.position.set(x, y, z);
    },
  },
  beforeDestroy() {
    // 组件销毁时从场景中移除模型
    if (this.model && this.$parent.scene) {
      this.$parent.scene.remove(this.model);
    }
  },
};
</script>

在主组件中，遍历后端返回的数据，动态创建多个 ModelComponent。

<template>
  <div ref="mapContainer" class="map-container">
    <!-- 动态加载模型组件 -->
    <model-component
      v-for="(item, index) in modelData"
      :key="index"
      :longitude="item.longitude"
      :latitude="item.latitude"
      :model-type="item.type"
    />
  </div>
</template>

<script>
import mapboxgl from 'mapbox-gl';
import * as THREE from 'three';
import ModelComponent from './ModelComponent.vue';

export default {
  name: 'MapWith3DModels',
  components: {
    ModelComponent,
  },
  data() {
    return {
      map: null,
      scene: null,
      camera: null,
      renderer: null,
      modelData: [], // 后端返回的模型数据
    };
  },
  mounted() {
    this.initMap();
    this.initThree();
    this.fetchModelData();
  },
  methods: {
    initMap() {
      mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
      this.map = new mapboxgl.Map({
        container: this.$refs.mapContainer,
        style: 'mapbox://styles/mapbox/streets-v11',
        center: [初始经度, 初始纬度], // 设置地图中心点
        zoom: 15, // 设置地图缩放级别
        pitch: 60, // 设置地图倾斜角度
      });

      this.map.on('load', () => {
        this.map.addLayer({
          id: 'custom-layer',
          type: 'custom',
          renderingMode: '3d',
          onAdd: (map, gl) => {
            this.initThreeRenderer(gl);
          },
          render: (gl, matrix) => {
            this.renderThreeScene(matrix);
          },
        });
      });
    },
    initThree() {
      this.scene = new THREE.Scene();
      this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      this.camera.position.set(0, 0, 100);
    },
    initThreeRenderer(gl) {
      this.renderer = new THREE.WebGLRenderer({
        canvas: this.map.getCanvas(),
        context: gl,
      });
      this.renderer.autoClear = false;
    },
    renderThreeScene(matrix) {
      const m = new THREE.Matrix4().fromArray(matrix);
      this.camera.projectionMatrix = m;
      this.renderer.resetState();
      this.renderer.render(this.scene, this.camera);
      this.map.triggerRepaint();
    },
    fetchModelData() {
      // 模拟后端返回的数据
      this.modelData = [
        { longitude: 经度1, latitude: 纬度1, type: 'building' },
        { longitude: 经度2, latitude: 纬度2, type: 'tree' },
        // 更多数据...
      ];
    },
  },
};
</script>

<style scoped>
.map-container {
  width: 100%;
  height: 100vh;
}
</style>

扩展 ：为模型添加点击事件，显示详细信息

1.在 ModelComponent.vue 中，为模型添加点击事件检测逻辑。

<template>
  <!-- 3D模型组件不需要模板，直接通过 three.js 渲染 -->
</template>

<script>
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

export default {
  name: 'ModelComponent',
  props: {
    longitude: {
      type: Number,
      required: true,
    },
    latitude: {
      type: Number,
      required: true,
    },
    modelType: {
      type: String,
      required: true,
    },
    modelInfo: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      model: null,
    };
  },
  mounted() {
    this.loadModel();
    this.addClickEvent();
  },
  methods: {
    loadModel() {
      const loader = new GLTFLoader();

      // 根据模型类别加载不同的模型文件
      let modelPath = '';
      switch (this.modelType) {
        case 'building':
          modelPath = '/models/building.gltf';
          break;
        case 'tree':
          modelPath = '/models/tree.gltf';
          break;
        default:
          console.error('Unknown model type:', this.modelType);
          return;
      }

      loader.load(modelPath, (gltf) => {
        this.model = gltf.scene;

        // 将模型添加到父组件的场景中
        this.$parent.scene.add(this.model);

        // 设置模型的位置
        this.updatePosition();

        // 为模型添加自定义属性，存储模型信息
        this.model.userData = this.modelInfo;
      });
    },
    updatePosition() {
      if (!this.model || !this.$parent.map) return;

      // 将经纬度转换为 three.js 场景中的 x, y 坐标
      const lngLat = [this.longitude, this.latitude];
      const pixelCoordinates = this.$parent.map.project(lngLat);
      const x = pixelCoordinates.x - window.innerWidth / 2;
      const y = -pixelCoordinates.y + window.innerHeight / 2;
      const z = 0; // 可以根据需要调整高度

      this.model.position.set(x, y, z);
    },
    addClickEvent() {
      // 监听鼠标点击事件
      window.addEventListener('click', this.onMouseClick, false);
    },
    onMouseClick(event) {
      if (!this.model || !this.$parent.camera || !this.$parent.scene) return;

      // 获取鼠标点击位置的归一化设备坐标 (NDC)
      const mouse = new THREE.Vector2();
      mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
      mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

      // 创建 Raycaster
      const raycaster = new THREE.Raycaster();
      raycaster.setFromCamera(mouse, this.$parent.camera);

      // 检测与模型的交集
      const intersects = raycaster.intersectObject(this.model, true);

      if (intersects.length > 0) {
        // 如果点击了模型，触发事件并显示详细信息
        this.$emit('model-clicked', this.model.userData);
      }
    },
  },
  beforeDestroy() {
    // 组件销毁时移除事件监听器
    window.removeEventListener('click', this.onMouseClick);
    if (this.model && this.$parent.scene) {
      this.$parent.scene.remove(this.model);
    }
  },
};
</script>

2.在主组件中监听 ModelComponent 的 model-clicked 事件，并显示详细信息。

<template>
  <div ref="mapContainer" class="map-container">
    <!-- 动态加载模型组件 -->
    <model-component
      v-for="(item, index) in modelData"
      :key="index"
      :longitude="item.longitude"
      :latitude="item.latitude"
      :model-type="item.type"
      :model-info="item.info"
      @model-clicked="showModelInfo"
    />

    <!-- 弹窗组件 -->
    <div v-if="selectedModel" class="modal">
      <div class="modal-content">
        <h2>{{ selectedModel.name }}</h2>
        <p>{{ selectedModel.description }}</p>
        <button @click="selectedModel = null">关闭</button>
      </div>
    </div>
  </div>
</template>

<script>
import mapboxgl from 'mapbox-gl';
import * as THREE from 'three';
import ModelComponent from './ModelComponent.vue';

export default {
  name: 'MapWith3DModels',
  components: {
    ModelComponent,
  },
  data() {
    return {
      map: null,
      scene: null,
      camera: null,
      renderer: null,
      modelData: [], // 后端返回的模型数据
      selectedModel: null, // 当前选中的模型信息
    };
  },
  mounted() {
    this.initMap();
    this.initThree();
    this.fetchModelData();
  },
  methods: {
    initMap() {
      mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
      this.map = new mapboxgl.Map({
        container: this.$refs.mapContainer,
        style: 'mapbox://styles/mapbox/streets-v11',
        center: [初始经度, 初始纬度], // 设置地图中心点
        zoom: 15, // 设置地图缩放级别
        pitch: 60, // 设置地图倾斜角度
      });

      this.map.on('load', () => {
        this.map.addLayer({
          id: 'custom-layer',
          type: 'custom',
          renderingMode: '3d',
          onAdd: (map, gl) => {
            this.initThreeRenderer(gl);
          },
          render: (gl, matrix) => {
            this.renderThreeScene(matrix);
          },
        });
      });
    },
    initThree() {
      this.scene = new THREE.Scene();
      this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      this.camera.position.set(0, 0, 100);
    },
    initThreeRenderer(gl) {
      this.renderer = new THREE.WebGLRenderer({
        canvas: this.map.getCanvas(),
        context: gl,
      });
      this.renderer.autoClear = false;
    },
    renderThreeScene(matrix) {
      const m = new THREE.Matrix4().fromArray(matrix);
      this.camera.projectionMatrix = m;
      this.renderer.resetState();
      this.renderer.render(this.scene, this.camera);
      this.map.triggerRepaint();
    },
    fetchModelData() {
      // 模拟后端返回的数据
      this.modelData = [
        {
          longitude: 经度1,
          latitude: 纬度1,
          type: 'building',
          info: { name: '建筑1', description: '这是一个建筑物' },
        },
        {
          longitude: 经度2,
          latitude: 纬度2,
          type: 'tree',
          info: { name: '树1', description: '这是一棵树' },
        },
        // 更多数据...
      ];
    },
    showModelInfo(modelInfo) {
      this.selectedModel = modelInfo;
    },
  },
};
</script>

<style scoped>
.map-container {
  width: 100%;
  height: 100vh;
  position: relative;
}

.modal {
  position: absolute;
  top: 20px;
  left: 20px;
  background: white;
  padding: 20px;
  border: 1px solid #ccc;
  z-index: 1000;
}
</style>

@gymm
关注
从零开始Vue项目中使用MapboxGL开发三维地图教程（七）创建一个自动旋转的地球、添加一个3D模型、实现在两个地图之间滑动和同步来比较两个地图
tigerhhzz的博客
06-18 1725
实现思路：通过在动画结束时调用easeTo，旋转动画将无限期地继续。旋转在用户交互时暂停，并且在高缩放级别时减慢到停止。实现功能：地球仪和camera动画结合在一起，创建旋转行星效果。
mapbox、three.js添加自定义3d模型
qq_41186500的博客
12-13 4604
废话不多说，先看效果图 1、先初始化地图 initMap() { mapboxgl.accessToken = 'pk.eyJ1IjoiMTgzODI0ZHl0IiwiYSI6ImNqbHExNDVjZzI0ZmUza2wxMDhocnlyem4ifQ.FZoJzmqTtli8hAvvAc1OPA' this.map = new mapboxgl.Map({ ...
three.js+vue实现酷炫三维地图web3d大屏可视化GIS地图
dengjiexs8的专栏
06-22 4799
基于three.js+vue，实现酷炫三维地图web3d大屏可视化GIS地图
Vue集成three.js，加载glb、gltf类型的3d模型
唐僧洗头用飘柔
04-24 1751
你好！这是你第一次使用所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。
Vue3 + Three.js 极速入门：打造你的第一个3D可视化项目
最新发布
李赛赛的专栏
03-12 4099
🌈Three.js作为强大的WebGL库，配合Vue3的响应式特性，能轻松创建交互式3D可视化应用。本文将通过20分钟快速入门，带你掌握Vue3与Three.js的整合技巧，并提供可运行的代码示例。✨
Vue2+Three.js加载并展示一个三维模型（提供Gitee源码）
黄团团的个人博客
02-26 484
Vue2+Three.js加载并展示一个三维模型
Vue 3D 模型（Vue 3D Model）是一个基于 Vue.js 框架的 3D 模型渲染库，它可以帮助开发者快速地将 3D 模型渲染到网页上。下面我们从技术角度来分析一下这个项目。
gitblog_00072的博客
03-23 1490
Vue 3D 模型（Vue 3D Model）是一个基于 Vue.js 框架的 3D 模型渲染库，它可以帮助开发者快速地将 3D 模型渲染到网页上。下面我们从技术角度来分析一下这个项目。 项目地址:https://gitcode.com/gh_mirrors/vu/vue-3d-model 技术分析 Vue 3D 模型基于 Vue.js 框架开发，使用了 Three.js 作为底层渲染引擎，同时支...
vue 3d模型 vue-3d-model
m0_46769524的博客
02-05 4359
安装 使用npm npm install vue-3d-model --save 或使用脚本标签供全球使用 在vue的HTML中引入script 不用全局引入vue-3d-model在哪里用在哪里引入 下面有链接自行查看 用法 <template> <div class="demo-block-preview"> <model-obj :backgroundAlpha="0" //改变背景色 @on-load="onLoad" src=
mapbox+deck.gl加载倾斜摄影模型3dtiles
qq_37750030的博客
05-10 1万+
mapbox+deck.gl加载倾斜摄影模型
VUE3使用three.js显示3D模型
姚家湾博客
02-23 2279
solidworks 2020版 开始支持glTF 的导出。
mapbox加载3dtiles倾斜摄影模型demo
07-06
mapbox加载3dtiles倾斜摄影模型demo mapbox+deck.gl加载cesium定义的3dtiles数据，方便加载倾斜摄影模型
threebox:Mapbox GL JS的three.js插件，支持基本动画和高级3D渲染
05-06
threebox 使用自定义图层功能的Mapbox GL JS的three.js插件。 提供方便的方法来管理线性坐标中的对象，以及同步地图和场景摄像机。 兼容性/依赖性 Mapbox v.0.50.0及更高版本（用于自定义图层支持） Three.r94（已捆绑到Threebox版本中）。 如果需要，可以交换其他版本并重建，但不能保证兼容性。 入门 从下载捆绑 ，并将其添加到页面上的[removed]标记中。 有几个介绍性的例子。 要运行它们，请使用Mapbox访问令牌以及格式创建一个config.js文件。 。 贡献 使用npm run build或npm run dev来构建库，以在开发时连续重建。 这两个命令都将在/dist/threebox.js输出一个包。 测试-运行index.html并检查控制台以获取测试结果。
three.js的室内地图展示
05-21
在本项目中，我们主要探讨的是如何利用three.js库来实现一个室内地图的展示。three.js是一个基于WebGL的JavaScript库，它使得在浏览器中创建3D图形变得更加简单。通过这个项目，我们可以学习到以下几个关键知识点： ...
threebox-map:使用自定义图层功能的Mapbox GL JS的three.js插件。 提供方便的方法来管理线性坐标中的对象，以及同步地图和场景摄像机
05-19
使用自定义图层功能的Mapbox GL JS的three.js插件。 提供方便的方法来管理线性坐标中的对象，以及同步地图和场景摄像机。 文件 优化 采用更严格的手写方式解决了luixus的编译问题 可能对你有帮助 import mapboxgl ...
Mapbox加载3D模型
Young Lee
11-14 3888
1. 背景 现在需要在Mapbox中加载obj文件和附属的材料库mtl文件，在地图上展示一个3D模型。 2. 依赖的文件 1.threebox.js 2.mapbox-gl.js 3.mapbox-gl.css 4.需要加载的3D模型文件 3. 初始化地图 var map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/dark-v9', center: origin, zoom: 16, pitch:6
Vue-3D-Model：用简单的方式来展示三维模型
热门推荐
陈悕的专栏
01-13 1万+
这是一个用来展示三维模型的Vue组件，用最简单的方式在网页中展示三维模型，解决模型视角控制、鼠标事件等一系列问题。 找到这个插件源于一个客户的需求，要上传obj格式的三维模型，在网页中展示，当时跟客户说的是尽量实现，找到这个插件可是解了我的燃眉之急，感谢大神hujiulong。 原文地址：https://www.jianshu.com/p/c093ff00ea1b 注：插件基于vue，请先引
mapbox 添加3d模型
weixin_44766633的博客
11-16 2903
这边例子是已经封装好了的module的js。直接上例子 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> .
vue展示3D模型（glb格式）
qq_42046017的博客
09-04 1070
vue展示glb格式模型，可以缩放拖拽查看
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值