THREE + d3制作中国地图挤压(extrude)模型

最新推荐文章于 2024-05-24 10:12:40 发布

ValdisW

最新推荐文章于 2024-05-24 10:12:40 发布

阅读量2.4k

点赞数 5

分类专栏：图形前端数据可视化文章标签： three.js d3.js geoJSON extrude

本文链接：https://blog.csdn.net/sinat_36461778/article/details/105351292

版权

前端同时被 3 个专栏收录

11 篇文章 0 订阅

订阅专栏

图形

3 篇文章 0 订阅

订阅专栏

数据可视化

2 篇文章 0 订阅

订阅专栏

下午花了几个小时边学边做，做出来了一个中国地图的挤压模型。其中中国地图的数据是geojson的格式，由于相关法律这里无法提供地图数据。如果想要学习交流使用可以前往github上翻一翻。

使用的工具很单纯：

THREE.js (ver 11.5，主要用了挤压模型和缓冲模型，材质使用的基础半透明材质和线材质)
d3.v5.js (只用到了d3-geo的Mercator变换和其他的坐标变换小工具)

参考：

效果如下图：

全部代码先懒洋洋地堆在这儿，什么时候想起来了就解释一下↓

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>map-3d</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <canvas id="main-canvas"></canvas>

    <script src="../../../javascripts/three115.min.js"></script>
    <script src="../../../javascripts/OrbitControls.js"></script>
    <script src="../../../javascripts/d3.v5.min.js"></script>
    <script>
      let main_canvas;
      let scene, camera, renderer;
      let map;
      function init(geo_data) {
        console.log(geo_data);
        main_canvas = document.querySelector("#main-canvas");
        main_canvas.setAttribute("width", window.innerWidth);
        main_canvas.setAttribute("height", window.innerHeight);

        scene = new THREE.Scene();
        scene.background = new THREE.Color("#01111A");

        camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight);
        camera.position.set(0, 0, 80);

        renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true, canvas: main_canvas });

        // map
        let map = new THREE.Object3D();
        const projection = d3.geoMercator().center([104.0, 37.5]).scale(80).translate([0, 0]);
        geo_data["features"].forEach((e) => {
          const province = new THREE.Object3D();
          const coors = e["geometry"]["coordinates"];
          coors.forEach((multipolygon) => {
            multipolygon.forEach((polygon) => {
              const shape = new THREE.Shape();
              const lineMaterial = new THREE.LineBasicMaterial({ color: "#FFF", linewidth: 1 });
              const lineGeometry = new THREE.BufferGeometry();
              let line_vertices = [];
              for (let i = 0; i < polygon.length; i++) {
                const [x, y] = projection(polygon[i]);
                if (i === 0) shape.moveTo(x, -y);
                shape.lineTo(x, -y);
                line_vertices.push(new THREE.Vector3(x, -y, 4.01));
              }
              lineGeometry.setFromPoints(line_vertices);
              const extrudeSettings = {
                depth: 4,
                bevelEnabled: false,
              };
              const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
              const material = new THREE.MeshBasicMaterial({ color: "#069EF2", transparent: true, opacity: 0.6 });
              const mesh = new THREE.Mesh(geometry, material);
              province.add(mesh);
              const line = new THREE.Line(lineGeometry, lineMaterial);
              province.add(line);
            });
          });

          province.properties = e.properties;
          if (e.properties.centroid) {
            const [x, y] = projection(e.properties.centroid);
            province.properties._centroid = [x, y];
          }
          map.add(province);
        });
        map.rotation.x = ((-Math.PI / 2) * 3) / 4;
        scene.add(map);

        controls = new THREE.OrbitControls(camera, renderer.domElement);
        controls.minDistance = 1;
        controls.maxDistance = 5000;
        controls.maxPolarAngle = Math.PI * 2;
        controls.minPolarAngle = 0;
        controls.enabled = true;
      }
      function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
      }
      function startup() {
        fetch("../../../data/geodata/china_2.json")
          .then((res) => res.json())
          .then((data) => {
            init(data);
            animate();
          });
      }
      startup();
    </script>
  </body>
</html>

ValdisW

关注

5
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
THREE + d3制作中国地图挤压(extrude)模型

下午花了几个小时边学边做，做出来了一个中国地图的倒角模型。其中中国地图的数据是geojson的格式，由于相关法律这里无法提供地图数据。如果想要学习交流使用可以前往github上翻一翻。使用的工具很单纯：THREE.js (ver 11.5，主要用了挤压模型和缓冲模型，材质使用的基础半透明材质和线材质) d3.v5.js (只用到了d3-geo的Mercator变换和其他的坐标变换小工具)...
复制链接

扫一扫