three.js几何体之边缘几何体

马黑黑 · 发表于 2025-5-21 12:50

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

边缘几何体 EdgesGeometry，和网格几何体 WireframeGeometry 一样，可以作为一个辅助对象用来查看其它实体几何体的边缘，不同的是，边缘几何体比网格几何体多了一个入参 thresholdAngle，用于控制两个相邻面之间的边是否需要绘制：如果两个面的法线小于该阈值，则边将不会被渲染，就是说，这个值越小，绘制的边就越多。其实现原理也是遍历Mesh几何体所有的三角面，再遍历三角面的边，若边没有被公用，则认为是边缘，会被收集。需要注意的是，作为辅助性质的几何体，边缘几何体和网格几何体一样，都需要借助其它几何体才能构图。构造器：

EdgesGeometry( geometry : BufferGeometry, thresholdAngle : Integer )

其中：

geometry — 任何一个Mesh几何体对象
thresholdAngle — 仅当相邻面的法线之间的角度（单位为角度）超过这个值时，才会渲染边缘。缺省时默认值为 1

为了对比，以下代码我们同时绘制了边缘几何体和网格几何体，效果见预览页面：

<div>左图: 边缘几何体<br>右图: 网格几何体<br><br>点击页面可暂停、继续动画</div>

<script type="module">
	import * as THREE from 'https://638183.freep.cn/638183/web/ku/three.module.min.js';

	var scene = new THREE.Scene;
	var clock = new THREE.Clock();
	var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
	camera.position.set(0, 0, 5);
	var renderer = new THREE.WebGLRenderer({ antialias: true });
	renderer.setSize(window.innerWidth, window.innerHeight);
	document.body.appendChild(renderer.domElement);

	var geometry = new THREE.ExtrudeGeometry(); // 挤压缓冲几何体（默认参数）
	
	var edges = new THREE.EdgesGeometry(geometry, 1); // 边缘几何体
	var mesh_edges = new THREE.LineSegments(edges, new THREE.LineBasicMaterial()); // 构图
	mesh_edges.position.set(-1, 0, 0); // 往左靠
	
	var wireframe = new THREE.WireframeGeometry(geometry); // 网格几何体
	var mesh_wireframe = new THREE.LineSegments(wireframe, new THREE.LineBasicMaterial()); // 构图
	mesh_wireframe.position.set(1, 0, 0); // 往右靠

	scene.add(mesh_edges, mesh_wireframe); // 两个图形加入场景

	var animate = () => {
		requestAnimationFrame(animate);
		var delta = clock.getDelta();
		[mesh_edges, mesh_wireframe].forEach(mesh => mesh.rotation.y -= delta / 5);
		renderer.render(scene, camera);
	};

	document.onclick = () => clock.running ? clock.stop() : clock.start();

	window.onresize = () => {
		camera.aspect = window.innerWidth / window.innerHeight;
		camera.updateProjectionMatrix();
		renderer.setSize(window.innerWidth, window.innerHeight);
	}

	animate();
</script>

<style>
	/* 预览页面CSS */
	body { margin: 0; }
	div { margin: 10px; position: absolute; color: #eee; }
</style>