threejs 使用SVG格式绘制地图

最新推荐文章于 2024-08-13 17:20:41 发布
最新推荐文章于 2024-08-13 17:20:41 发布
阅读量3.2k 收藏 6
点赞数 2
分类专栏： threejs-交互事件 文章标签： svg
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41741576/article/details/99292351
版权

使用SVG绘制图形很简单，绘制地图也是一样。
首先需要一个地图的SVG格式配置文件，我这里找了一个

<script type="text/javascript" src="js/0_public/chinaMapConfig.js" ></script>//中国地图

然后将SVG格式的字符串转换为THREE.Shape对象，此时需要引入插件

<script type="text/javascript" src="js/d3-threeD.js" ></script>//别找了threejs文档里面没有，需要的留言
var sichuan=transformSVGPathExposed(chinaMapConfig.shapes.sichuan);//
console.log(sichuan);

在这里插入图片描述
最后使用ExtrudeGeometry拉伸即可呈现三维地图。

//介绍一下ExtrudeGeometry的参数
				var extrudeSettings={	
					steps:2,// int. 物体本身在厚度上的分层数量
					depth:16,//挤出的形状的深度，默认值为100
					bevelEnabled:true,// 是否允许边角圆滑过度（开启bevelEnabled，其实物体本身是没有变化的，而是在物体的前后加上一个薄层，用来实现圆角）
					bevelThickness:1,//float. 附加层的厚度
					bevelSize:1,// float. 附加层的圆角的斜面长度
					bevelSegments:1//int. 附加的圆角的层数
				}
				
				var geometry=new THREE.ExtrudeGeometry(sichuan,extrudeSettings);
				geometry.center();//位置置中
				var mesh=new THREE.Mesh(geometry,new THREE.MeshLambertMaterial({
						color:0x8FBC8F
					}));
				scene.add(mesh);

下面做了一些增加，对单个省份操作，记录上一个省份信息，点击下一个省份，状态还原
在这里插入图片描述

完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<title>中国地图SVG</title>
		<script type="text/javascript" src="js/WebGL.js" ></script>
		<script type="text/javascript" src="js/three.js" ></script>
		<script type="text/javascript" src="js/controls/OrbitControls.js" ></script>
		<script type="text/javascript" src="js/libs/stats.min.js" ></script>
		<script type="text/javascript" src="js/libs/dat.gui.min.js" ></script>	
		<script type="text/javascript" src="js/0_public/chinaMapConfig.js" ></script>
		<script type="text/javascript" src="js/0_public/d3-threeD.js" ></script>
		
		<style>
			body{
				padding: 0;
				margin: 0;
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<script>
			if(WEBGL.isWebGLAvailable()===false) document.body.appendChild(WEBGL.getWebGLErrorMessage());
			
			var scene,renderer,camera,controls,stats;	
			function init(){
				scene=new THREE.Scene();
				scene.background=new THREE.Color(0xD6D6D6);
				
				renderer=new THREE.WebGLRenderer({
					antialias:true,
				});
				renderer.setSize(window.innerWidth,window.innerHeight);
				renderer.setPixelRatio(window.devicePixelRatio);
				document.body.appendChild(renderer.domElement);
				
				camera=new THREE.PerspectiveCamera(60,window.innerWidth/window.innerHeight,0.1,1000);
				camera.position.set(0,80,200);
				camera.lookAt(scene.position);
				
				controls=new THREE.OrbitControls(camera,renderer.domElement);
				controls.enableDamping=true;
				controls.minDistance=0.1;
				controls.maxDistance=1000;
				
				stats=new Stats();
				document.body.appendChild(stats.domElement);
				
				scene.add(new THREE.AmbientLight(0xffffff));
			};
			
			var axes;
			var chinaMapGroup=new THREE.Group();
			function initModel(){
				axes=new THREE.AxesHelper(30);
				axes.visible=false;
				scene.add(axes);

				//将SVG字符串转换为THREE.Shape对象
				var sichuan=transformSVGPathExposed(chinaMapConfig.shapes.sichuan);
				//console.log(sichuan);
				var extrudeSettings={	
					steps:2,// int. 物体本身在厚度上的分层数量
					depth:16,//挤出的形状的深度，默认值为100
					bevelEnabled:true,// 是否允许边角圆滑过度（开启bevelEnabled，其实物体本身是没有变化的，而是在物体的前后加上一个薄层，用来实现圆角）
					bevelThickness:1,//float. 附加层的厚度
					bevelSize:1,// float. 附加层的圆角的斜面长度
					bevelSegments:1//int. 附加的圆角的层数
				}
				
/*				var geometry=new THREE.ExtrudeGeometry(sichuan,extrudeSettings);
				geometry.center();
				var mesh=new THREE.Mesh(geometry,new THREE.MeshLambertMaterial({
						color:0x8FBC8F
					}));
				scene.add(mesh);*/
			
			//循环遍历省份的svg参数
				for(var index in chinaMapConfig.shapes){
					var shape=transformSVGPathExposed(chinaMapConfig.shapes[index]);
					var geometry=new THREE.ExtrudeGeometry(shape,extrudeSettings);
					var material=new THREE.MeshPhongMaterial({
						color:0xffffff*Math.random()
					});
					var province=new THREE.Mesh(geometry,material);
					province.name=chinaMapConfig.names[index];//获取省份名字
					chinaMapGroup.add(province);
				}
				chinaMapGroup.scale.set(0.5,0.5,0.5);
				chinaMapGroup.rotation.x=Math.PI/2;
				//计算地图包围盒，根据边界值计算，获取坐标，置于中央
				var box3=new THREE.Box3().expandByObject(chinaMapGroup);
				var bx=box3.max.x-box3.min.x;
				var by=box3.max.y-box3.min.y;
				var bz=box3.max.z-box3.min.z;
				chinaMapGroup.position.set(-bx/2,-by/2,-bz/2);
				scene.add(chinaMapGroup);
			}
			
			var mouse=new THREE.Vector2();
			var raycaster=new THREE.Raycaster();
			var intersected;
			function raycasterEvent(event){				
				if(event.touches){
					var touchE=event.touches[0];
					mouse.x=(touchE.pageX/window.innerWidth)*2-1;
					mouse.y=-(touchE.pageY/window.innerHeight)*2+1;
				}else{
					mouse.x=(event.clientX/window.innerWidth)*2-1;
					mouse.y=-(event.clientY/window.innerHeight)*2+1;
				}
				
				raycaster.setFromCamera(mouse,camera);
				
				var intersects=raycaster.intersectObjects(chinaMapGroup.children,true);
				if(intersects.length>0){
					if(intersected!==intersects[0].object){
						if(intersected){
							intersected.material.color=intersected.currentColor;
							intersected.position.z=0;
						}
						intersected=intersects[0].object;
						intersected.currentColor=intersects[0].object.material.color;
						intersected.material.color=new THREE.Color(0xff0000);
						intersected.position.z=-100;
						alert(intersected.name);
					}									
				}else{
					console.log("未检测到物体！");
					if(intersected){
						intersected.material.color=intersected.currentColor;
						intersected.position.z=0;
					}
					intersected=null;
				}
			}
			window.addEventListener("click",raycasterEvent,false);
			window.addEventListener("touchstart",raycasterEvent,false);
				
			var setting;	
			function initGui(){
				setting={
					axesVisible:false,
					resetControls:function (){
						controls.reset();
					}
				};
				var gui=new dat.GUI();
				gui.add(setting,"axesVisible").onChange(function(e){
					axes.visible=e;
				});
				gui.add(setting,"resetControls").name("位置重置");
			}
						
			function onWindowResize(){
				camera.aspect=window.innerWidth/window.innerHeight;
				camera.updateProjectionMatrix();
				renderer.setSize(window.innerWidth,window.innerHeight);
			}
			
			function render(){
				renderer.render(scene,camera);
			}
			
			function animate(){
				render();
				stats.update();
				controls.update();				
				window.onresize=onWindowResize();
				requestAnimationFrame(animate);
			}
			
			(function threeStart(){
				init();
				initModel();
				initGui();
				animate();
			}());
		</script>
	</body>
</html>
凌风子夜
关注
专栏目录
ThreeJS加载公路GeoJson数据实现流光效果
牟云飞的博客
02-24 932
threejs加载公路geojson数据，跟加载行政区域的原理一样，唯一不同的是geojson格式不一样，路线并不是连贯起来的，按照路段进行的拆分，在加载的时候问题不大，正常解析然后转墨卡托投影，但是在做流光效果时，需要对geojson进行重新组合.
基于threejs实现中国地图轮廓动画(1)
2401_84093490的博客
04-22 797
资料过多，篇幅有限，需要文中全部资料可以点击这里免费获取前端面试资料PDF完整版！自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！[外链图片转存中…(img-pespeC3s-1713760963163)]由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
SVG-Three-Map:使用Three.js将SVG映射转换为2.5D
04-29
SVG三图 使用Three.js将SVG映射转换为2.5D 文献资料 将SVG转换为Three.js 使用SVGLoader将所有SVG形状转换为Three.js 为Astar生成网格 使用第一个形状作为地板。 将所有形状的SVG添加为墙。 与三个物体的相互作用 通过使用三个的Raycaster突出显示鼠标移动时的状态。 单击鼠标以选择源和目标时添加精灵。 寻找路径 通过使用Astar.js查找路径（ ） 用THREE.MeshLine（ ）绘制路径线
example-svgloader-threejs:SVG加载器示例-ThreeJS
03-14
example-svgloader-threejs:SVG加载器示例-ThreeJS
three.js 安装方法、基础简介、创建基础场景
最新发布
weixin_44242600的博客
08-13 875
three.js安装方法讲解，认识场景Scene、相机Camera、渲染器**Renderer**三个基本概念，创建three.js基础场景。
three.js SVG 学习绘制三维地图
X01动力装甲的专栏
11-30 8362
SVG 中国地图 https://www.js-css.cn/jscode/other/other43/ 不错的资源，不过每个省份的svg数据太小了，不精确。 主要的是个js文件：chinaMapConfig.js var shapesvgjiangsu = transformSVGPathExposed(chinaMapConfig.shapes.neimongol); var extrude...
深入理解three.js对svg的支持（一）：SVGLoader
hermanncain的博客
07-14 7253
前言：SVG作为一种优秀的矢量图形格式在Web得到广泛应用，three.js作为知名的WebGL库自然也对其提供了支持。然而，官方文档中对此的说明十分单薄，网上与此相关的资源也不多。经过多次试验之后，在此分享我的一点理解，包括SVGLoader，SVGObject，SVGRenderer，svg和THREE对象的互相转化等内容。 1 使用SVGLoader载入svg图像常规显示svg图像，只需要在D
threejs 根据svg创建
蜗牛速度额的博客
11-09 1145
import {Shape, Vector2, MeshBasicMaterial, BoxGeometry, Mesh, Geometry} from 'three'; export default class Wall { constructor (result) { this.DEGS_TO_RADS = Math.PI / 180; this.DIGIT_0 = 4...
SVGRenderer 是 three.js 中的一个渲染器，用于将 3D 场景渲染到 SVG（可缩放矢量图形）元素中。
小豆包
04-17 1110
是three.js中的一个渲染器，用于将 3D 场景渲染到 SVG（可缩放矢量图形）元素中。虽然 SVG 本身不支持 3D 渲染，但提供了一种将three.js的 3D 场景以 2D 形式投影到 SVG 平面的方法。这种渲染方式通常用于创建一些特定的视觉效果或用于支持 SVG 的环境。
threejs-maps:使用 D3.js、Three.js 和 Mapbox 的交互式地图
06-27
"Threejs-maps"项目是结合了D3.js、Three.js和Mapbox这三款强大的JavaScript库，用于构建三维、动态且具有丰富交互功能的地图应用。本文将深入探讨这些工具如何协同工作，以及如何利用它们来创建令人惊叹的在线地图...
带你入门three.js——从0到1实现一个3d可视化地图
suandfei的博客
07-04 4897
前言 终于到周末了，前几篇的文章一直给大家介绍2d，canvas 和svg的一些东西。7月份我打算输出3篇万字长文带大家系统地学习可视化表达的3种方式，svg、canvas、webgl。所以这是第一篇文章3d的。 读完本篇文章，你可以学到什么 对于three.js 这个框架有一个简单的理解，可以入门下。学习three中的Raycaster，主要是用鼠标来判断当前选择的是哪一个物体。我用一个简单的实例 带大家用three实现简单的可视化地球案例 。 3d框架的选择——three.js 1.为什么选择thre
D3.js SVG进阶
02-08
d3.js zoom的开启与暂停，zoom的pan不越界。 假设我们在绘制svg图形的时候，需要将一个地方放大后再添加一些图标或者拖拽图标到其他位置的时候，我们需要先将svg通过放大与平移操作找到svg上的图标，然后拖拽某一图标到其他位置。然后继续通过缩放与平移操作找到其他的图标继续执行拖拽功能
three.js中svg拉伸体的转换函数transformSVGPathExposed
11-28
在vue中使用three.js的svg拉伸体的转换函数transformSVGPathExposed
基于 ThreeJs 的中国 3D 地图展示，使用 vue 框架.zip
06-06
基于 ThreeJs 的中国 3D 地图展示，使用 vue 框架.zip
vue结合D3.js做的动态的可交互的SVG图形组件
03-06
vue结合D3.js做的动态的可交互的SVG图形组件。 下面是其中的几行代码： data: { svg: undefined, point1Instance: undefined, // 两个主要端点之一 point2Instance: undefined, // 两个主要端点之一 pathInstance: undefined, // 两个端点之间的连线 point1X: 100, point1Y: 100, point2X: 300, point2Y: 300, innerCircle: 5, // 两个端点之间还有 5 个端点 otherInstance: [] // 其他端点实例 },
three.js之高级几何体-SVG拉伸几何体(vue中使用three.js34)
点燃火柴的博客
11-29 2380
SVG拉伸几何体介绍和使用1.SVG拉伸体使用步骤1.1svg的初始化1.2svg内容获取与转换成Shape类型1.3创建几何体，网格对象，添加到场景2.demo说明3.demo代码 1.SVG拉伸体使用步骤 通过SVG拉伸创建几何体实际上使用的还是ExtrudeGeometry几何体。只不创建SVG拉伸体使用的底图一个SVG图形，而普通的拉伸体的底图是一个二维图形；’接下来介绍一下创建SVG拉伸几何体的步骤 1.1svg的初始化 在示例中我们的svg是在vue文件中的html部分中使用标签初始化的，具体如
three.js使用svg_使用SVG和anime.js构建弹性范围输入
culiu9261的博客
07-22 511
three.js使用svgAmong all the fascinating web components we can found in any UI, forms are usually the most boring part. In the past, there used to be only a few text input elements, where the user had t...
three.js使用svg_如何使用SVG和anime.js构建弹性范围输入
08-15 330
three.js使用svg 介绍 (Introduction) In HTML5, many new types of input attributes were introduced for the form element, such as color, date, range, and many more. Although functionally these new types of i...
8. Threejs案例-SVG渲染器和WEBGL渲染器对比
能带孩子会做饭
02-01 1641
8. Threejs案例-SVG渲染器和WEBGL渲染器对比 SVGRenderer 被用于使用 SVG 来渲染几何数据创建SVG渲染器，并设置其大小为窗口大小创建WebGL渲染器，开启抗锯齿功能，并设置其大小为窗口大小创建三个线段，设置其材质、大小和旋转属性，并将它们添加到场景中创建三个线段，设置其材质、大小和旋转属性，并将它们添加到场景中
使用js引入svg格式文件
06-03
要在网页中使用 SVG 文件，可以使用以下方法在 HTML 中引入 SVG 文件： 1. 通过 `<img>` 标签引入 SVG 文件： ```html <img src="image.svg" alt="SVG Image"> ``` 2. 使用 `<object>` 标签引入 SVG 文件： ```html <object type="image/svg+xml" data="image.svg"></object> ``` 3. 使用 `<embed>` 标签引入 SVG 文件： ```html <embed type="image/svg+xml" src="image.svg" /> ``` 4. 使用 `<iframe>` 标签引入 SVG 文件： ```html <iframe src="image.svg"></iframe> ``` 以上方法都能够在网页中引入 SVG 文件，具体使用哪种方法可以根据需求选择。同时，使用 JavaScript 动态插入 SVG 文件也是可行的，可以使用 `document.createElement('object')` 或 `document.createElement('embed')` 创建对象，然后设置相应属性即可。
评论 17
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值