three.js几何体之多面缓冲几何体

马黑黑 · 发表于 2025-5-22 07:19

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

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

x

多面缓冲几何体 PolyhedronGeometry 在三维空间中具有一些平面的立体图形。这个类将一个顶点数组投射到一个球面上，之后将它们细分为所需的细节级别。这个类由 DodecahedronGeometry（十二面缓冲几何体）、IcosahedronGeometry（二十面缓冲几何体）、OctahedronGeometry（八面缓冲几何体）和 TetrahedronGeometry（四面缓冲几何体）所使用，以生成它们各自的几何结构。构造器：

PolyhedronGeometry(vertices : Array, indices : Array, radius : Float, detail : Integer)

其中：

vertices — 一个顶点 Array（数组），例如：[1,1,1, -1,-1,-1, ... ]
indices — 一个构成面的索引 Array（数组），例如: [0,1,2, 2,3,0, ... ]
radius — 浮点型，最终形状的半径
detail — 整数型，将对这个几何体细分多少个级别。细节越多，形状就越平滑

下面的代码如何绘制多面缓冲几何体 PolyhedronGeometry 图形：

<div style="margin:10px;position:absolute;color:#eee;">点击页面可暂停、继续动画</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, 6);
	var renderer = new THREE.WebGLRenderer({ antialias: true });
	renderer.setSize(window.innerWidth, window.innerHeight);
	document.body.appendChild(renderer.domElement);

	// 顶点数组
	const verticesOfCube = [
		-1,-1,-1,	1,-1,-1,	1, 1,-1,	-1, 1,-1,
		-1,-1, 1,	1,-1, 1,	1, 1, 1,	-1, 1, 1,
	];
	// 面索引数组
	const indicesOfFaces = [
		2,1,0,	0,3,2,
		0,4,7,	7,3,0,
		0,1,5,	5,4,0,
		1,2,6,	6,5,1,
		2,3,7,	7,6,2,
		4,5,6,	6,7,4
	];
	// 创建多面缓冲几何体（图形骨架）
	const geometry = new THREE.PolyhedronGeometry(verticesOfCube, indicesOfFaces, 2, 3);
	// 定义材质 : 线框化法向量材质（图形血肉）
	const material = new THREE.MeshNormalMaterial({ wireframe: true });
	// 成图（图形躯体）
	const mesh = new THREE.Mesh(geometry, material);
	// 图形加入场景
	scene.add(mesh);

	// 动画 ：xy轴旋转
	const animate = () => {
		requestAnimationFrame(animate);
		const delta = clock.getDelta();
		mesh.rotation.x -= delta / 5;
		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>