three.js几何体之形状缓冲几何体

马黑黑 · 发表于 2025-5-20 12:28

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

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

x

形状缓冲几何体 ShapeGeometry 用来从一个或多个路径形状中创建一个单面多边形几何体。构造器：

ShapeGeometry(shapes : Array, curveSegments : Integer)

其中：

shapes — 一个单独的 shape 形状，或者一个包含形状的 Array 数组。缺省时默认是一个三角形
curveSegments - Integer - 每一个形状的分段数，默认值为12

在如下代码中，先使用 moveTo 和 lineTo 绘制一个三角形形状，接着将形状作为形状缓冲几何体的参数创建几何体，再使用基础材质和几何体构建三角形图像。示例还加入了辅助线，以方便观察最终效果：

<div style="position: absolute; color: #eee; margin: 10px;">点击页面可暂停/继续动画</div>
<script type="module">
	import * as THREE from 'https://638183.freep.cn/638183/web/ku/three.module.min.js';

	const scene = new THREE.Scene;
	const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
	const renderer = new THREE.WebGLRenderer({ antialias: true });
	renderer.setSize(window.innerWidth, window.innerHeight);
	document.body.appendChild(renderer.domElement);

	camera.position.set(0.1, 0.1, 5); // 相机位置（xy方向的设置是为了能看清所有辅助线）

	// 辅助线（右手坐标系）
	const axesHelper = new THREE.AxesHelper(10);
	scene.add(axesHelper);

	// 按上、左、右角顺序画个三角形
	const x = 0, y = 0; // 以圆心 (0, 0) 为起点
	const shape = new THREE.Shape(); // 实例化 THREE 形状
	shape.moveTo(x, y + 1); // 画笔移至三角形的顶点
	shape.lineTo(x - 1, y - 1); // 从顶点画直线到左下
	shape.lineTo(x + 1, y - 1); // 从左下画直线到右下（剩下一条线会自闭合）

	const geometry = new THREE.ShapeGeometry(shape); // 实例化形状缓冲几何体 ：参数缺省时默认是一个三角形
	// 使用基础材质
	const material = new THREE.MeshBasicMaterial({
		side: THREE.DoubleSide, // 双面渲染
		transparent: true, // 开启透明
		opacity: 0.5, // 透明度
	});
	const mesh = new THREE.Mesh(geometry, material); // 构建三角形
	scene.add(mesh); // 三角形图像加入场景

	const clock = new THREE.Clock();

	const animate = () => {
		requestAnimationFrame(animate);
		const delta = clock.getDelta();
		mesh.rotation.y -= delta / 2;
		renderer.render(scene, camera);
	};

	window.onresize = () => {
		camera.aspect = window.innerWidth / window.innerHeight;
		camera.updateProjectionMatrix();
		renderer.setSize(window.innerWidth, window.innerHeight); // 动画运行时变个颜色
	}

	document.onclick = () => {
		clock.running ? clock.stop() : clock.start();
		if (clock.running) mesh.material.color.set(Math.random() * 0xFFFFFF);
	}

	animate();
</script>