three.js几何体之二维圆环和三维圆环

马黑黑 · 发表于 2025-5-16 18:06

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

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

x

1. 二维圆环几何体

圆环缓冲几何体 RingGeometry 是一个用于生成二维圆环几何体的类。构造器：

RingGeometry(innerRadius : Float, outerRadius : Float, thetaSegments : Integer, phiSegments : Integer, thetaStart : Float, thetaLength : Float)

其中：

innerRadius — 内部半径，默认值为 0.5
outerRadius — 外部半径，默认值为 1
thetaSegments — 圆环的分段数。这个值越大，圆环就越圆。最小值为 3，默认值为 32
phiSegments — 圆环半径的分段数字。最小值为 1，默认值为 1
thetaStart — 起始角度，默认值为 0
thetaLength — 圆心角，默认值为 Math.PI * 2

2. 三维圆环几何体

圆环缓冲几何体 TorusGeometry 是一个用于生成三维圆环几何体的类。构造器：

TorusGeometry(radius : Float, tube : Float, radialSegments : Integer, tubularSegments : Integer, arc : Float)

其中：

radius - 环面的半径，从环面的中心到管道横截面的中心。默认值是 1
tube — 管道的半径，默认值为 0.4
radialSegments — 管道横截面的分段数，默认值为 12
tubularSegments — 管道的分段数，默认值为 48
arc — 圆环的圆心角（单位是弧度），默认值为 Math.PI * 2

下面的代码将绘制上述两个几何体。每一行代码都有说明：

<script type="module">
	import * as THREE from 'https://esm.sh/three'; // 导入three.js 模块
	import { OrbitControls } from "https://esm.sh/three/examples/jsm/controls/OrbitControls"; // 导入相机轨道控制模块

	const scene = new THREE.Scene; // 场景
	const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); // 相机
	camera.position.set(0, -1, 10); // 相机位置
	const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); // 渲染器
	renderer.setSize(window.innerWidth, window.innerHeight); // 渲染器渲染范围
	document.body.appendChild(renderer.domElement); // 渲染器元素加入到body标签

	const controller = new OrbitControls(camera, renderer.domElement); // 实例化相机轨道
	controller.autoRotate = true; // 开启相机轨道自动旋转

	const ring_geometry = new THREE.RingGeometry(); // 二维圆环几何体
	const torus_geometry = new THREE.TorusGeometry(); // 三维圆环几何体
	const material = new THREE.MeshNormalMaterial({ side: THREE.DoubleSide }); // 法向量材质（两个几何体共用）
	const ring_mess = new THREE.Mesh(ring_geometry, material); // 二维圆环（即网格对象 Mess 实例化）
	ring_mess.position.set(-2, 0, 0); // 二维圆环位置
	const torus_mess = new THREE.Mesh(torus_geometry, material); // 三维圆环（即网格对象 Mess 实例化）
	torus_mess.position.set(2, 0, 0); //三维圆环位置
	scene.add(ring_mess, torus_mess); // 图形都加入到场景中

	// 动画 : 相机绕场景跑
	const animate = () => {
		requestAnimationFrame(animate);
		controller.update();
		renderer.render(scene, camera);
	};

	window.onresize = () => renderer.setSize(window.innerWidth, window.innerHeight); // 窗口自适应
	animate(); // 运行动画函数
</script>

<style> body { margin: 0; background: beige; /* 预览窗口样式 */ } </style>