three.js几何体之圆柱缓冲几何体（CylinderGeometry）

马黑黑 · 发表于 2025-5-14 20:04

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

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

x

圆柱缓冲几何体（CylinderGeometry）是一个用于生成圆柱几何体的类。构造器：

CylinderGeometry(radiusTop : Float, radiusBottom : Float, height : Float, radialSegments : Integer, heightSegments : Integer, openEnded : Boolean, thetaStart : Float, thetaLength : Float)

其中：

radiusTop — 圆柱的顶部半径，默认值是 1
radiusBottom — 圆柱的底部半径，默认值是 1
height — 圆柱的高度，默认值是 1
radialSegments — 圆柱侧面周围的分段数，默认为 32
heightSegments — 圆柱侧面沿着其高度的分段数，默认值为 1
openEnded — 一个Boolean值，指明该圆锥的底面是开放的还是封顶的。默认值为false，即其底面默认是封顶的
thetaStart — 第一个分段的起始角度，默认为 0（三点钟方向）
thetaLength — 圆柱底面圆扇区的中心角，通常被称为“θ”（西塔）。默认值是2*Pi，这使其成为一个完整的圆柱

在下面的代码中，我们用圆柱几何体+颜色+纹理贴图创建一个圆柱立体图案：

<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; // 场景
	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); // 实例化轨道控制器
	controller.autoRotate = true; // 开启自动旋转

	const geometry = new THREE.CylinderGeometry(1, 1, 3); // 创建圆柱形几何体 : 顶、底、高
	// 用图片做纹理贴图（要求图片与页面同源或异域图片支持跨域）
	const texture = new THREE.TextureLoader().load('https://638183.freep.cn/638183/Pic/xuehua.jpg', () => {
		renderer.render(scene, camera); // 立即渲染，否则一开始是黑色效果
	});
	// 创建材质
	const material = new THREE.MeshBasicMaterial({
		color: 'gold', // 颜色（会改变影响纹理贴图）
		map: texture, // 使用上面创建的纹理贴图
		transparent: true, // 开启透明度
		opacity: 0.5 // 不透明度（透明度 = 1 - opacity）
	});
	const cylinder = new THREE.Mesh(geometry, material); // 创建圆柱网格对象

	scene.add(cylinder); // 圆柱网格对象加入到场景

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

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

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