three.js几何体之网格几何体WireframeGeometry

马黑黑 · 发表于 2025-5-18 11:11

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

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

x

网格几何体 WireframeGeometry 可以被用作一个辅助物体，来对一个 geometry 几何体以线框的形式进行查看。构造器：

WireframeGeometry( geometry : BufferGeometry )

其中：geometry — 任意几何体对象。

网格几何体 WireframeGeometry 类似于材质（Material）启用了 wireframe: true 的配置，类似但不完全一致，网格几何体 WireframeGeometry 定制的自由度更高。以下示例代码的核心是：创建一个球体几何体 SphereGeometry，以其为基础将其网格线化，然后使用 LineSegments 构建最终图像。Line* 材质默认白色，可定制：

<script type="module">
	import * as THREE from 'https://unpkg.ihwx.cn/three@0.176.0/build/three.module.js'; // three核心库

	const scene = new THREE.Scene; // 场景
	const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); // 相机
	camera.position.set(0, 0, 5); // 相机位置
	const renderer = new THREE.WebGLRenderer({ antialias: true }); // 渲染器
	renderer.setSize(window.innerWidth, window.innerHeight); // 渲染器范围
	document.body.appendChild(renderer.domElement); // 渲染器加入到body标签

	const geometry = new THREE.SphereGeometry(); // 球体几何体
	const wireframe = new THREE.WireframeGeometry(geometry); // 球形几何体网格线化
	const ball = new THREE.LineSegments(wireframe); // 创建最终图像（线型还可选LineLoop、Line）
	ball.material.color.set(0xffcc00); // 可以设置网格线颜色
	scene.add(ball); // 图像加入到场景

	const clock = new THREE.Clock(); // 动画时钟

	// 动画函数
	const animate = () => {
		requestAnimationFrame(animate);
		const delta = clock.getDelta(); // 时钟增量
		ball.rotation.x += delta / 5; // X轴旋转
		ball.rotation.y += delta / 5; // Y轴旋转
		renderer.render(scene, camera); // 渲染动画
	};

	// 窗口自适应
	window.onresize = () => {
		camera.aspect = window.innerWidth / window.innerHeight; // 相机镜头对准范围
		camera.updateProjectionMatrix(); // 相机更新数据
		renderer.setSize(window.innerWidth, window.innerHeight); // 重设渲染范围
	}

	animate(); // 运行动画
</script>

马黑黑 · 发表于 2025-5-18 11:17

这里注意下“网格”这一概念在 three.js 中的含义，有二：

一是，网格几何体 WireframeGeometry 中的网格，和现实世界的网格含义一致（想一想渔网）；

二是，three.js 中的 Mess 对象，“几何体+材质” 所构造出来的实例化对象（最终图形）。这里的网格 Mess 之所以也称为网格，是因为图形的绘制是在隐形的密密麻麻的网格上一个像素一个像素地绘制而成（想一想早期点阵图形打印，利用每一个像素的不同灰度，将图形打印出来）。