three.js几何体之胶囊图形几何体

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

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

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

x

胶囊图形几何体（CapsuleGeometry）CapsuleGeometry是一个胶囊图形类，通过半径和高度来进行构造。构造器：

CapsuleGeometry(radius : Float, height : Float, capSegments : Integer, radialSegments : Integer, heightSegments : Integer)

其中：

radius — 胶囊半径。可选的; 默认值为1
height — 中间区域的高度。可选的; 默认值为1
capSegments — 构造盖子的曲线部分的个数。可选的; 默认值为4
radialSegments — 覆盖胶囊圆周的分离的面的个数。可选的; 默认值为8
heightSegments — 胶囊侧面沿其高度的段数，默认值为 1

下面的示例，我们用胶囊几何体+基础材质画一个线框立体图案：

<div style="position: absolute;color: #eee;margin: 10px;">可以使用鼠标操作图像</div>

<script type="module">
	import * as THREE from 'https://esm.sh/three'; // three主库
	import { OrbitControls } from "https://esm.sh/three/examples/jsm/controls/OrbitControls"; // 轨道控制库

	const scene = new THREE.Scene; // 场景
	scene.background = new THREE.Color('rgba(40,40,40,0.5)'); // 场景背景色
	const camera = new THREE.PerspectiveCamera(75, 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 controller = new OrbitControls(camera, renderer.domElement); // 实例化轨道控制器

	const geometry = new THREE.CapsuleGeometry(1, 1, 4, 8);; // 胶囊图形几何体
	// 基础材质 ：颜色+线框
	const material = new THREE.MeshBasicMaterial({
		color: 'cyan',
		wireframe: true
	});

	const capsule = new THREE.Mesh(geometry, material); // 创建胶囊对象 : 几何体+材质
	scene.add(capsule); // 胶囊对象加入到场景

	// renderer.render(scene, camera); // 至此已经可以将效果渲染出来

	// 动画函数
	const render = () => {
		requestAnimationFrame(render); // 请求关键帧动画递归调用函数自身
		controller.update(); // 更新控制器
		renderer.render(scene, camera); // 渲染效果
	};

	render(); // 运行动画
	
	window.onresize = () => renderer.setSize(window.innerWidth, window.innerHeight);
</script>