mapbox、three.js添加自定义3d模型

废话不多说,先看效果图
在这里插入图片描述

1、先初始化地图
我前面有完整的渲染地图的文章:https://blog.csdn.net/qq_41186500/article/details/103509936

    initMap() {
   
      mapboxgl.accessToken = 'pk.eyJ1IjoiMTgzODI0ZHl0IiwiYSI6ImNqbHExNDVjZzI0ZmUza2wxMDhocnlyem4ifQ.FZoJzmqTtli8hAvvAc1OPA'
      this.map = new mapboxgl.Map({
   
        style: 'mapbox://styles/mapbox/streets-v11',
        center: [118.78, 32.04],
        zoom: 10,
        container: 'mapbox'  // 盛放地图的容器id
      })
    },

2、添加自定义模型(正方体)

    initModel() {
   
      var map1 = this.map
      var modelOrigin = [118.78, 32.04]  // 添加模型的地理位置
      var modelAltitude = 0
      var modelRotate = [Math.PI / 2, 0, 0]
      var modelScale = 5.41843220338983e-8
        // transformation parameters to position, rotate and scale the 3D model onto the map
        var modelTransform = {
   
          translateX: mapboxgl.MercatorCoordinate.fromLngLat(modelOrigin , modelAltitude).x,
          translateY: mapboxgl.MercatorCoordinate.fromLngLat(modelOrigin , modelAltitude
  • 2
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
MapboxThree.js 是两个独立的开源项目,可以结合使用来创建交互式地图和可视化效果。Mapbox 是一个提供地图数据和地图服务的平台,而 Three.js 是一个基于 WebGL 的 3D 图形库。 结合 MapboxThree.js,你可以在地图上创建各种令人惊叹的视觉效果,例如在地图上展示 3D 模型、动态地图标记或者添加自定义的动画效果。 以下是一个简单的示例,展示如何在 Mapbox 地图上使用 Three.js 创建一个旋转的立方体: 1. 首先,引入 MapboxThree.js 的库文件,并创建一个容器来放置地图: ```html <div id="map"></div> ``` 2. 然后,在 JavaScript 中初始化地图,获取地图容器的大小,并创建一个 Three.js 场景: ```javascript mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN'; var map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/streets-v11', center: [0, 0], zoom: 1 }); var scene = new THREE.Scene(); ``` 3. 接下来,在场景中创建一个旋转的立方体: ```javascript var geometry = new THREE.BoxGeometry(1, 1, 1); var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); var cube = new THREE.Mesh(geometry, material); scene.add(cube); function animate() { requestAnimationFrame(animate); cube.rotation.x += 0.01; cube.rotation.y += 0.01; // 渲染 Three.js 场景 renderer.render(scene, camera); } animate(); ``` 4. 最后,将 Three.js 的渲染结果嵌入到 Mapbox 地图中: ```javascript var renderer = new THREE.WebGLRenderer({ alpha: true }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; function render() { requestAnimationFrame(render); // 将 Mapbox 地图渲染到 Three.js 的纹理上 renderer.autoClear = false; renderer.clear(); renderer.render(scene, camera); // 将 Three.js 的渲染结果放置在地图上 map.triggerRepaint(); } map.on('load', function() { map.on('render', render); }); ``` 通过结合 MapboxThree.js,你可以根据自己的需求创建更复杂的交互式地图和可视化效果。希望这个例子能帮助到你!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值