three.js几何体之圆锥缓冲几何体

马黑黑 · 发表于 2025-5-13 12:06

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

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

x

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

ConeGeometry(radius : Float, height : Float, radialSegments : Integer, heightSegments : Integer, openEnded : Boolean, thetaStart : Float, thetaLength : Float)

其中：

radius — 圆锥底部的半径，默认值为 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; // 场景
	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); // 实例化轨道控制器
	controller.autoRotate = true; // 开启自动旋转

	// 创建两个嵌套的圆锥体
	const geometry = new THREE.ConeGeometry(1, 2, 32); // 圆锥形几何体
	// 材质 1
	const material1 = new THREE.MeshBasicMaterial({
		color: 0x0a8ff6, // 颜色
		wireframe: true // 线框
	});	
	// 材质 2
	const material2 = new THREE.MeshBasicMaterial({
		color: 0x12ddf0, // 颜色
		transparent: true, // 开启透明度
		opacity: 0.5 // 不透明度（透明度 = 1 - opacity）
	});
	const cone1 = new THREE.Mesh(geometry, material1); // 圆锥 1
	const cone2 = new THREE.Mesh(geometry, material2); // 圆锥 2
	cone1.add(cone2); // 第 2 个圆锥加入到第 1 个圆锥
	scene.add(cone1); // 第 1 个圆锥加入到场景

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

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

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

马黑黑 · 发表于 2025-5-13 12:14

锥体2（无线框、表面上色）作为锥体1（线框、表面透明）的子元素，严丝合缝嵌套在母体中，所以效果只看到一个锥体。实际上是两个锥体，里面的锥体负责表面颜色渲染，外面的锥体负责上线框。

有兴趣的朋友可以试着将子锥体挪开，方法是在 30 和 31 行之间插入一行：

cone2.position.set(4, 0, 0);