three.js几何体之十二面体

马黑黑

十二面缓冲几何体（DodecahedronGeometry）是一个用于创建十二面几何体的类。构造器：

DodecahedronGeometry(radius : Float, detail : Integer)

其中：

radius — 十二面体的半径，默认值为 1
detail — 默认值为 0。将这个值设为一个大于0的数将会为它增加一些顶点，使其不再是一个十二面体

以下代码中使用十二面缓冲几何体+法向量材质创建一个漂亮的十二面体图案：

<script type="module">
	/* 十二面缓冲几何体 DodecahedronGeometry */
	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); // 渲染器范围
	renderer.setClearColor(0xf6f5f0);
	document.body.appendChild(renderer.domElement); // 渲染器加入到body标签

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

	// 十二面体几何体
	const geometry = new THREE.DodecahedronGeometry(1.2, 0); // Dradius : Float, detail : Integer
	// 材质
	const material = new THREE.MeshNormalMaterial();
	const dode = new THREE.Mesh(geometry, material); // 十二面体网格对象
	scene.add(dode); // 网格对象加入到场景

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

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

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

运行代码

杨帆

漂亮！谢谢马老师精彩分享

梦江南

回老师，清理了，还是点不动。

红影

12个五边形组成是12面体。这个漂亮，渲染得特别美

红影

radius — 十二面体的半径，默认值为 1
这个的半径怎么算的？是从中心到各个顶点的距离么？

红影

这个参数少，看着特别便捷的感觉

红影

“十二面体网格对象”这个开启的是材质对象吧？没看到网格啊。

花飞飞

这个更漂亮了，每面都有不同的颜色，比较接近于平时使用的色彩。。不再之前的亚光色。
基础材质默认值所以颜色才随机的么。
但实例《天上的云》分明只设了透明度，颜色变同色了。
这个还得仔细瞅瞅

马黑黑

花飞飞 发表于 2025-5-15 19:02
这个更漂亮了，每面都有不同的颜色，比较接近于平时使用的色彩。。不再之前的亚光色。
基础材质默认值所以 ...

这个材质是自带颜色的材质

花飞飞

每次刷新每一面的颜色排列是不变的，看来并不随机。。
光这颜色够学一阵子的了。。

花飞飞

这个十二面几何体，半径可随意大小。。。
后面的默认0改1下，就快变成球体了。果然加了不少顶点。。。还是默认的好看

马黑黑

花飞飞 发表于 2025-5-15 19:05
这个十二面几何体，半径可随意大小。。。
后面的默认0改1下，就快变成球体了。果然加了不少顶点。。。{:4_ ...

专业是十二面体，必要的时候可以充当球体

马黑黑

花飞飞 发表于 2025-5-15 19:03
每次刷新每一面的颜色排列是不变的，看来并不随机。。
光这颜色够学一阵子的了。。

不是随机的

马黑黑

花飞飞 发表于 2025-5-15 19:03
每次刷新每一面的颜色排列是不变的，看来并不随机。。
光这颜色够学一阵子的了。。

这种材质怎么转，颜色基本都固定吧

花飞飞

马黑黑 发表于 2025-5-15 19:03
这个材质是自带颜色的材质

自带颜色的材质比较高级。。。
实例里怎么把颜色统一的了

花飞飞

马黑黑 发表于 2025-5-15 19:08
专业是十二面体，必要的时候可以充当球体

试了，球体的话上面会有一些小小凸起在动。。。

花飞飞

马黑黑 发表于 2025-5-15 19:09
不是随机的

这默认设定蛮好看的

花飞飞

马黑黑 发表于 2025-5-15 19:09
这种材质怎么转，颜色基本都固定吧

之前立方体啥的也都固定不变么？还是我没留意

马黑黑

花飞飞 发表于 2025-5-15 19:20
之前立方体啥的也都固定不变么？还是我没留意

有个概念你得弄清楚：是谁在旋转。

一楼代码是设置了相机沿着场景绕圈旋转，3d图形也自旋转。我们看到的色彩在不同面的变化实际上是相机绕圈圈造成的，可以停止相机的旋转，若此，所有3d图形的颜色层次都是一样的（就是你开始时看到的一样）。

马黑黑

花飞飞 发表于 2025-5-15 19:19
这默认设定蛮好看的

之前说过，这个材质主要是内部使用，用来确定一些数据，一般不用于生产环境（当然也可以使用）