vue2+three.js做出一个精美的3D地图 |
您所在的位置：网站首页 › 给个地图 › vue2+three.js做出一个精美的3D地图 |
vue2+three.js做出一个精美的3D地图
|
文章目录
前言代码地址 ： https://gitee.com/txcst/3-dmap.git 只想好好做开源。
一、如何生成边线？二、给线条加上辉光效果下期预告： 下一期 我们将在地图上添加精灵和别的几何体，然后让它们可以被点击，从而来产生一些交互
前言
代码地址 ： https://gitee.com/txcst/3-dmap.git 只想好好做开源。
1.3D地图的第三步，增加描边的线条和辉光 一、如何生成边线？1.还记得当初我们引入的map.json文件去生成的地图吗？如果忘了，可以去复习第二章，现在我们要做的是创建一个arr，把map.json的数据以省份的格式放进来，如果直接使用地图的数据，线条的起始点和另一个起始点会交叉在一起，非常混乱 //在 generateGeometry方法下新建 linArr数组 let linArr=[]2.每次循环清零linArr，并push进当前省份的数据，把当前linArr的省份数据 发给getLin(),去创建线条， 要调整成一下z轴的高度，是地图z轴高度的下面一点点 linArr.push(5.7) 注意代码里我关于linArr数组的操作 multiPolygon.forEach((polygon) => { // linArr.length=0 //构建几何图形 //清零 linArr.length=0 const shape = new THREE.Shape() for (let i = 0; i { if (bloomLayer.test(obj.layers) === false) { materials[obj.uuid] = obj.material; obj.material = darkMaterial; } }); bloomComposer.render(); scene.traverse((obj) => { if (materials[obj.uuid]) { obj.material = materials[obj.uuid]; delete materials[obj.uuid]; } }); finalComposer.render(); }现在已经完工了 你想把哪个几何体设置为辉光效果，就加上 layers.enable(1)，让他进入另一个通道渲染 我们回到 getlin创建线条的方法 const mesh = new THREE.Mesh(line.geometry,material) mesh.layers.enable(1)效果： |
【本文地址】