欢迎您访问 最编程 本站为您分享编程语言代码，编程技术文章！

热门搜索/Hot Search

您现在的位置是： 首页

three.js 入门 - 实现从 0 到 1 的 3D 可视化地图（第二部分）

最编程 2024-06-07 17:11:45
...

可视化地图——three.js实现

场景的搭建


我先不管地图不地图的，地图的这些形状肯定是放置到场景中的。跟着我的脚步一步一步去搭建一个场景。场景的搭建就照相机，渲染器。我用一个map类来表示代码如下：


class chinaMap {
    constructor() {
      this.init()
    }
    init() {
      // 第一步新建一个场景
      this.scene = new THREE.Scene()
      this.setCamera()
      this.setRenderer()
    }
    // 新建透视相机
    setCamera() {
      // 第二参数就是 长度和宽度比 默认采用浏览器  返回以像素为单位的窗口的内部宽度和高度
      this.camera = new THREE.PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
      )
    }
    // 设置渲染器
    setRenderer() {
      this.renderer = new THREE.WebGLRenderer()
      // 设置画布的大小
      this.renderer.setSize(window.innerWidth, window.innerHeight)
      //这里 其实就是canvas 画布  renderer.domElement
      document.body.appendChild(this.renderer.domElement)
    }
    
    // 设置环境光
    setLight() {
      this.ambientLight = new THREE.AmbientLight(0xffffff) // 环境光
      this.scene.add(ambientLight)
    }
  }


上面我做了一一的解释，现在场景有了，灯光也有了， 我们看下样子。

image.png

image.gif image-20210703140701037.png


对场景黑乎乎的什么都没有， 接下来我们我随便随便加一个长方体并且调用renderer的render方法。代码如下：


init() {
  //第一步新建一个场景
  this.scene = new THREE.Scene()
  this.setCamera()
  this.setRenderer()
  const geometry = new THREE.BoxGeometry()
  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
  const cube = new THREE.Mesh(geometry, material)
  this.scene.add(cube)
  this.render()
}
//render 方法 
render() {
  this.renderer.render(this.scene, this.camera)
}


按照上面????去做你会页面还是明明都已经加了，为什么呢？


「默认情况下，当我们调用scene.add()的时候，物体将会被添加到(0,0,0)坐标。但将使得摄像机和立方体彼此在一起。为了防止这种情况的发生，我们只需要将摄像机稍微向外移动一些即可」


所以只要将照相机的位置z轴属性调整一下就可以到图片了


// 新建透视相机
  setCamera() {
    // 第二参数就是 长度和宽度比 默认采用浏览器  返回以像素为单位的窗口的内部宽度和高度
    this.camera = new THREE.PerspectiveCamera(
      75,
      window.innerWidth / window.innerHeight,
      0.1,
      1000
    )
    this.camera.position.z = 5
  }


图片如下：


image.png

image-20210703142305435.png


这时候有同学就会问，嗯搞半天不和canvas 2d 一样嘛，有什么区别？看不出立体的感觉？OK 接下来我就让这个立方体动起来。其实就是不停的去调用 我们render 函数。我们用reqestanimationframe。尽量还是不要用setInterval，有一个很简单的优化。


「requestAnimationFrame」有很多的优点。最重要的一点或许就是当用户切换到其它的标签页时，它会暂停，因此不会浪费用户宝贵的处理器资源，也不会损耗电池的使用寿命。


我这里做的让立方体的x,y 不断的+0.1。先看下代码：


render() {
  this.renderer.render(this.scene, this.camera)
}
animate() {
  requestAnimationFrame(this.animate.bind(this))
  this.cube.rotation.x += 0.01
  this.cube.rotation.y += 0.01
  this.render()
}


效果图如下：


640 (8).gif

立方体的旋转.gif


是不是有那个那个感觉了， 我是以最简单的立方体的旋转，带大家从头入门下three.js。如果看到这里觉得这里，觉得对你有帮助的话，希望你能给我点个赞????哦，感谢各位老铁了！下面正式地图需求分析。


地图数据的获得

其实最重要的是获取地图数据， 大家可以了解下openStreetMap


这个是一个可供*编辑的世界地图。OpenStreetMap允许你查看，编辑或者使用世界各地的地理数据来帮助你。


这里我自己把中国地图的数据json拷贝下来了，代码如下：


// 加载地图数据
loadMapData() {
  const loader = new THREE.FileLoader()
  loader.load('../json/china.json', (data) => {
    const jsondata = JSON.parse(JSON.stringify(data))
  })
}


我给大家先看下json 数据的格式


![image-20210703154646470](/Users/wangzhengfei/Library/Application

Support/typora-user-images/image-20210703154646470.png)


其实主要的是下面有个经纬度坐标， 其实这个才是我关心的，有了点才能生成线，最后才能生成平面。这里涉及到一个知识点， 「墨卡托投影转换」。 墨卡托投影转换可以把我们经纬度坐标转换成我们对应平面的2d坐标。大家对这个推导过程的感性的可以看下这篇文章：传送门

这里我直接用可视化框架——「d3」 它里面有自带的墨卡托投影转换。

// 墨卡托投影转换
  const projection = d3
    .geoMercator()
    .center([104.0, 37.5])
    .scale(80)
    .translate([0, 0])

由于中国有很多省,每个省都对应一个Object3d。


Object3d是three.js 所有的基类, 提供了一系列的属性和方法来对三维空间中的物体进行操纵。可以通过.add( object )方法来将对象进行组合，该方法将对象添加为子对象


我这里的整个中国是一个大的Object3d，每一个省是一个Object3d，省是挂在中国下的。然后中国这个Map挂在scene这个Object3d下。很明显，在three.js 是一个很典型的树形数据结构，我画了张图给大家看下。


image.png image-20210704115145494.png


Scence场景下挂了很多东西， 其中有一个就是Map, 整个地图， 然后每个省份， 每个省份又是由Mesh和lLine 组成的。


我们看下代码：

generateGeometry(jsondata) {
          // 初始化一个地图对象
          this.map = new THREE.Object3D()
          // 墨卡托投影转换
          const projection = d3
            .geoMercator()
            .center([104.0, 37.5])
            .scale(80)
            .translate([0, 0])
          jsondata.features.forEach((elem) => {
            // 定一个省份3D对象
            const province = new THREE.Object3D()
            this.map.add(province)
          })
          this.scene.add(this.map)
        }


看到这里我想你可能没有什么问题，我们整体框架定下来了，接下来我们进入核心环节


生成地图几何体

这里用到了 Three.shape() 和  THREE.ExtrudeGeometry（）  为什么会用到这个呢？ 我给大家解释下， 「首先每一个省份轮廓组成的下标是一个 2d坐标，但是我们要生成立方体，shape()  可以定义一个二维形状平面。它可以和ExtrudeGeometry一起使用，获取点，或者获取三角面。」


代码如下：


// 每个的 坐标 数组
    const coordinates = elem.geometry.coordinates
    // 循环坐标数组
    coordinates.forEach((multiPolygon) => {
      multiPolygon.forEach((polygon) => {
        const shape = new THREE.Shape()
        const lineMaterial = new THREE.LineBasicMaterial({
          color: 'white',
        })
        const lineGeometry = new THREE.Geometry()
        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)
          lineGeometry.vertices.push(new THREE.Vector3(x, -y, 4.01))
        }
        const extrudeSettings = {
          depth: 10,
          bevelEnabled: false,
        }
        const geometry = new THREE.ExtrudeGeometry(
          shape,
          extrudeSettings
        )
        const material = new THREE.MeshBasicMaterial({
          color: '#2defff',
          transparent: true,
          opacity: 0.6,
        })
        const material1 = new THREE.MeshBasicMaterial({
          color: '#3480C4',
          transparent: true,
          opacity: 0.5,
        })
        const mesh = new THREE.Mesh(geometry, [material, material1])
        const line = new THREE.Line(lineGeometry, lineMaterial)
        province.add(mesh)
        province.add(line)
      })
    })


遍历第一个点的的和canvas2d画图其实是一模一样的， 移动起点， 然后后面在划线， 画出轮廓。然后我们在这里可以设置拉伸的深度， 然后接下来就是设置材质了。


lineGeometry 其实 对应的是轮廓的边线。我们看下图片吧：


image.png


image-20210704142519856.png


上一篇： 带你走进three.js--从0到1实现3D可视化地图（一）--1.为什么选择three.js

下一篇： Django信号详解

推荐阅读