three.js几何体之挤压缓冲几何体

马黑黑 · 发表于 2025-5-21 20:58

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

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

x

挤压缓冲几何体 ExtrudeGeometry，用来从一个形状路径中，挤压出一个 BufferGeometry（缓冲几何体）。构造器：

ExtrudeGeometry(shapes : Array, options : Object)

其中：

shapes — 形状或者一个包含形状的数组
options — 一个包含有下列参数的对象：

curveSegments — 整数型，曲线上点的数量，默认值是 12
steps — 整数型，用于沿着挤出样条的深度细分的点的数量，默认值为 1
depth — 浮点型，挤出的形状的深度，默认值为 1
bevelEnabled — 布尔型，对挤出的形状应用是否斜角，默认值为 true
bevelThickness — 浮点型，设置原始形状上斜角的厚度，默认值为 0.2
bevelSize — 浮点型，斜角与原始形状轮廓之间的延伸距离，默认值为 bevelThickness - 0.1
bevelOffset — 浮点型，斜面偏移量，默认值为 0
bevelSegments — 整数型，斜角的分段层数，默认值为 3
extrudePath — THREE.Curve对象，一条沿着被挤出形状的三维样条线（路径挤压不支持斜面）
UVGenerator — Object（对象），提供了UV生成器函数的对象，该对象将一个二维形状挤出为一个三维几何体。当使用这个几何体创建Mesh的时候，如果你希望分别对它的表面和它挤出的侧面使用单独的材质，你可以使用一个材质数组。第一个材质将用于其表面；第二个材质则将用于其挤压出的侧面

下面的代码将绘制一个挤压缓冲几何体 ExtrudeGeometry 图形：

<div>点击页面可暂停、继续动画</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);

	// 创建多边形轮廓shape
	const shape = new THREE.Shape();
	// 定义顶点坐标
	const points = [
		[1, 0],
		[1, 1],
		[2, 1],
		[2, 0],
		[0, 0]
	];
	// 扫描顶点坐标绘制shape形状路径
	points.forEach( (p, k) => {
		k < 1 ? shape.moveTo(p[0], p[1]) : shape.lineTo(p[0], p[1]);
	});
	// 将形状路径shape挤压出缓冲几何体
	var geometry = new THREE.ExtrudeGeometry(shape); // shape做形状参数
	// 定义材质 : 法向量材质，开启透明度+双面渲染
	var material = new THREE.MeshNormalMaterial({
		transparent: true,
		opacity: 0.6,
		side: THREE.DoubleSide
	});
	var mesh = new THREE.Mesh(geometry, material); // 最后成图
	mesh.rotateX(Math.PI / 4); // 在Y轴倾斜45度方便观察
	scene.add(mesh); // 图形加入场景

	var animate = () => {
		requestAnimationFrame(animate);
		var delta = clock.getDelta();
		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>