threejs 实现3D地图

现需要使用 Three.js 实现 3D 地图

我们需要思考 如何实现??? (完全没有Threejs 基础)

Q :如果使用 Three.js ,它是渲染出图形的?

A: 参考 Threejs中文网 文档介绍 npm 中 Three的下载路径

Threejs中文网具体地址
npm 中 Three的下载路径
从这个里面我知道 如果需要成功加载一个3D图形,我需要 5步走

  1. 创建环境
  2. 创建相机
  3. 创建渲染器
  4. 创建物体
  5. 渲染场景
//引入
import * as THREE from 'three';

const width = window.innerWidth, height = window.innerHeight;
// 1.创建一个场景
const scene = new THREE.Scene();

// 2.创建一个相机 PerspectiveCamera(透视摄像机)。
const camera = new THREE.PerspectiveCamera( 70, width / height, 0.01, 10 );
camera.position.z = 1; //向z轴偏移

// 3.创建渲染器
const renderer = new THREE.WebGLRenderer( {
   
    antialias: true } );
renderer.setSize( width, height ); //渲染多大 要尺寸

//4.创建一个物体 构造器 Mesh  由 几何体+材质构成
const geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 ); //BoxGeometry 立方缓冲几何体
const material = new THREE.MeshNormalMaterial(); //材质 基础网格材质
const mesh = new THREE.Mesh( geometry, material ); // 构造器
scene.add( mesh );

//5.渲染场景
renderer.setAnimationLoop( animation );
document.body.appendChild( renderer.domElement ); //添加到页面中

// animation
function animation( time ) {
   
   
	mesh.rotation.x = time / 2000;
	mesh.rotation.y = time / 1000;
	renderer.render( scene, camera );
}

Q :我们已经解决了 Three 是如何展示3D图形的,那么实现3D地图,我需要那些必备的属性?

A: 我们本质上只需要改变它的物体就可以了,让他变成地图,展示出来

这里地图的 几何体我们该用什么? 地图的材质要用什么? 地图的数据该从哪里来?如何才能展现出来?

几何体有哪些?

在这里插入图片描述

材质有那些?

在这里插入图片描述

地图的几何体用 :
挤压缓冲几何体(ExtrudeGeometry) 参考示例
基础线条材质(LineBasicMaterial) 参考示例 用来单独描线的 也可以不用 ,根据需求来
地图的材质用:
基础网格材质(MeshBasicMaterial) 介绍
示例:

/*
ExtrudeGeometry(shapes : Array, options : Object)
shapes — 形状或者一个包含形状的数组。
options — 一个包含有下列参数的对象:

curveSegments — int,曲线上点的数量,默认值是12。
steps — int,用于沿着挤出样条的深度细分的点的数量,默认值为1。
depth — float,挤出的形状的深度,默认值为1。
bevelEnabled — bool,对挤出的形状应用是否斜角,默认值为true。
bevelThickness — float,设置原始形状上斜角的厚度。默认值为0.2。
bevelSize — float。斜角与原始形状轮廓之间的延伸距离,默认值为bevelThickness-0.1。
bevelOffset — float. Distance from the shape outline that the bevel starts. Default is 0.
bevelSegments — int。斜角的分段层数,默认值为3。
extrudePath — THREE.Curve对象。一条沿着被挤出形状的三维样条线。Bevels not supported for path extrusion.
UVGenerator — Object。提供了UV生成器函数的对象。
该对象将一个二维形状挤出为一个三维几何体。

当使用这个几何体创建Mesh的时候,如果你希望分别对它的表面和它挤出的侧面使用单独的材质,你可以使用一个材质数组。 第一个材质将用于其表面;第二个材质则将用于其挤压出的侧面。

属性
*/

const length = 12, width = 8;

const shape = new THREE.Shape();  //形状
shape.moveTo( 0,0 );
shape.lineTo( 0, width );
shape.lineTo( length, width );
shape.lineTo( length, 0 );
shape.lineTo( 0, 0 );

const extrudeSettings = {
   
   
	steps: 2,
	depth: 16,
	bevelEnabled: true,
	bevelThickness: 1,
	bevelSize: 1,
	bevelOffset: 0,
	bevelSegments: 1
};

const geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );
const material = new THREE.MeshBasicMaterial( {
   
    color: 0x00ff00 } );
const mesh = new THREE.Mesh( geometry, material ) ;
scene.add( mesh );

由此 我们知道了,地图的是通过这个 shape 描绘成形状展示的,数据可以通过 datav.aliyun 地图json小工具 获取到

在这里插入图片描述

数据拿到之后,就是展示的问题,直接展示是不行的,需要通过 d3 对数据处理,才能按照正确的地图样子展示

import * as d3 from "d3";  //莫开托坐标 矫正地图坐标
//center 的位置可以自己定
const handleProj = d3.geoMercator().center([109, 34.5]).scale(1000).translate([0, 0]) // d3投影转换函数

接下来就是封装地图信息 ,使它变成这个样子 (这里用到了)

 const shape = new THREE.Shape();  //形状
	shape.moveTo( 0,0 );
	shape.lineTo( 0, width );
	shape.lineTo( length, width );
	shape.lineTo( length, 
### 使用 Three.js 创建 3D 地图行政区划 为了创建基于 Three.js3D 地图并展示行政区划,通常会涉及到几个核心组件:场景(Scene),摄像机(Camera),以及渲染器(Renderer)。此外,还需要加载地理数据来表示不同的行政区域。 对于具体的实现方式,在初始化阶段需先设置好基础环境[^2]: ```javascript // 获取容器元素 const threeDemo = document.getElementById("three"); // 初始化WebGL渲染器,并开启抗锯齿选项 const renderer = new THREE.WebGLRenderer({ canvas: threeDemo, antialias: true }); ``` 接着要构建三维空间内的坐标系与视角效果,这一步骤中将定义一个透视投影类型的摄像机[^5]: ```javascript // 定义宽高比例、近裁剪面距离、远裁剪面距离等参数 const camera = new THREE.PerspectiveCamera( 45, // 视场角度 window.innerWidth / window.innerHeight, // 宽高比 1, // 近平面 1000 // 远平面 ); camera.position.set(200, 200, 200); ``` 当基本框架搭建完毕之后,则可着手处理实际的地图几何形状。这里假设已经获取到了描述各个省份轮廓的数据集(例如GeoJSON格式),那么就可以遍历这些多边形或多部多边形结构,将其转换成适合Three.js使用的BufferGeometry对象[^3]: ```javascript province.geometry.coordinates.forEach(multipolygon => { multipolygon.forEach(polygon => { let shape = new THREE.Shape(); // 构建外环路径 for(let i=0;i<polygon.length-1;i++){ if(i===0){ shape.moveTo(...polygon[i]); }else{ shape.lineTo(...polygon[i]); } } // 添加到场景中的网格模型 const geometry = new THREE.ExtrudeGeometry(shape,{amount:1}); const material = new THREE.MeshBasicMaterial({color:'red'}); const mesh = new THREE.Mesh(geometry,material); scene.add(mesh); }); }); ``` 上述代码片段展示了如何根据给定的经纬度坐标序列构造闭合图形,并赋予一定的厚度形成立体感;同时设置了简单的材质属性以便于观察最终的效果。 最后不要忘记启动动画循环以保持画面更新,确保交互操作能够正常响应: ```javascript function animate() { requestAnimationFrame(animate); controls.update(); // 如果有 OrbitControls 控制 renderer.render(scene,camera); } animate(); ``` 以上就是利用 Three.js 实现带有行政区划分割特性的 3D 地图的大致流程概述。当然这只是最简化版本,真实应用场景下可能还会涉及更多细节优化工作,比如性能调优、视觉特效添加等方面的内容。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值