three.js几何体之球缓冲几何体

马黑黑 · 发表于 2025-5-17 09:01

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

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

x

球缓冲几何体 phereGeometry 一个用于生成球体的类。构造器：

SphereGeometry(radius : Float, widthSegments : Integer, heightSegments : Integer, phiStart : Float, phiLength : Float, thetaStart : Float, thetaLength : Float)

其中：

radius — 球体半径，默认为 1
widthSegments — 水平分段数（沿着经线分段），最小值为 3，默认值为 32
heightSegments — 垂直分段数（沿着纬线分段），最小值为 2，默认值为 16
phiStart — 指定水平（经线）起始角度，默认值为 0
phiLength — 指定水平（经线）扫描角度的大小，默认值为 Math.PI * 2
thetaStart — 指定垂直（纬线）起始角度，默认值为 0
thetaLength — 指定垂直（纬线）扫描角度大小，默认值为 Math.PI

该几何体是通过扫描并计算围绕着Y轴（水平扫描）和X轴（垂直扫描）的顶点来创建的。因此，不完整的球体（类似球形切片）可以通过为phiStart，phiLength，thetaStart和thetaLength设置不同的值来创建，以定义开始（或结束）计算这些顶点的起点（或终点）。

以下代码实现了带线框的球体绘制，实际上是嵌套了两个球体图形，一个是线框球，另一个是纯色球，代码中还加入了 three.js 的 Clock 对象用于间接控制动画的运行与暂停：

<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(45, window.innerWidth / window.innerHeight, 0.1, 1000); // 相机
	camera.position.set(0, 0, 8); // 相机位置
	const clock = new THREE.Clock(); // 时钟（用于动画）
	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 material = new THREE.MeshBasicMaterial({ color: 0x008080, wireframe: true }); // 材质
	const ball = new THREE.Mesh(geometry, material); // 二十面体网格对象
	const frame_ball = ball.clone(); // 克隆网格对象 ：用作线框
	frame_ball.material = frame_ball.material.clone(); // 克隆自己的材质以便更改参数不影响母体材质
	frame_ball.material.color.set(0x006570); // 设置颜色
	frame_ball.material.wireframe = false; // 设置线框
	ball.add(frame_ball);
	scene.add(ball); // 网格对象加入到场景
	scene.add(ball);

	// 动画函数
	const animate = () => {
		requestAnimationFrame(animate); // 请求关键帧动画递归调用函数自身
		const delta = clock.getDelta();
		ball.rotation.x += delta / 5;
		ball.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>