threejs实现地图

方式1 模型师配合模型实现。
方式2GEOJSON,可实现地图
方式3three-geo实现threejs+地图
threegeo官网
https://www.npmjs.com/package/three-geo

  1. 注意事项:1在 https://account.mapbox.com/access-tokens/ 注册access_token信息

  2. 按照案例即可运行
    this.scene = new THREE.Scene();
    const ioToken = ‘自己申请去,我不提供’;
    const tgeo = new ThreeGeo({
    tokenMapbox: ioToken, // <---- set your Mapbox API token here
    });

    const terrain = await tgeo.getTerrainRgb(
    [46.5763, 7.9904], // [lat, lng]
    5.0, // radius of bounding circle (km)
    12); // zoom resolution

    // const scene = new THREE.Scene();
    terrain.rotation.z = Math.PI * 0.5
    terrain.scale.x = 50
    terrain.scale.y = 50
    terrain.scale.z = 50
    terrain.position.z = -50
    this.scene.add(terrain);

你可能感兴趣的:(前端3D)