three.js几何体之十二面体
<style>#btnPrev { box-shadow: 2px 2px 6px rgba(0,0,0,.5); }
#btnPrev:hover { box-shadow: 2px 2px 12px rgba(0,0,0,.5); font-weight: bold; }
</style>
<p>十二面缓冲几何体（DodecahedronGeometry）是一个用于创建十二面几何体的类。构造器：</p>
<blockquote>DodecahedronGeometry(radius : Float, detail : Integer)</blockquote>
<p> 其中：</p>
<blockquote>
radius — 十二面体的半径，默认值为 1<br>
detail — 默认值为 0。将这个值设为一个大于0的数将会为它增加一些顶点，使其不再是一个十二面体
</blockquote>
<p>以下代码中使用十二面缓冲几何体+法向量材质创建一个漂亮的十二面体图案：</p>
<div id="hEdiv"><pre id="hEpre">
<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>
</pre></div>
<blockquote><button id="btnPrev" name="btnPrev" type="button" value="prev">运行代码</button></blockquote>
<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/helight/helight1.js';
hlight.hl(hEdiv, hEpre);
btnPrev.onclick = () => {
const value = hEpre.textContent + '<style>body {margin: 0; }</style>';
const previewWindow = window.open('', 'preview1', 'width=1200,height=768,top=100,left=100');
previewWindow.document.open();
previewWindow.document.write(value);
setTimeout(function() { previewWindow.document.title = "预览" }, 100);
previewWindow.document.close();
};
</script> 漂亮！谢谢马老师精彩分享{:4_191:} 回老师，清理了，还是点不动。 12个五边形组成是12面体。这个漂亮，渲染得特别美{:4_199:} radius — 十二面体的半径，默认值为 1
这个的半径怎么算的？是从中心到各个顶点的距离么？ 这个参数少，看着特别便捷的感觉{:4_173:} “十二面体网格对象”这个开启的是材质对象吧？没看到网格啊。 这个更漂亮了，每面都有不同的颜色，比较接近于平时使用的色彩。。不再之前的亚光色。
基础材质默认值所以颜色才随机的么。
但实例《天上的云》分明只设了透明度，颜色变同色了。
这个还得仔细瞅瞅{:4_173:} 花飞飞 发表于 2025-5-15 19:02
这个更漂亮了，每面都有不同的颜色，比较接近于平时使用的色彩。。不再之前的亚光色。
基础材质默认值所以 ...
这个材质是自带颜色的材质 每次刷新每一面的颜色排列是不变的，看来并不随机。。{:4_173:}
光这颜色够学一阵子的了。。 这个十二面几何体，半径可随意大小。。。
后面的默认0改1下，就快变成球体了。果然加了不少顶点。。。{:4_173:}还是默认的好看 花飞飞 发表于 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
专业是十二面体，必要的时候可以充当球体
试了，球体的话上面会有一些小小凸起在动。。。
{:4_173:} 马黑黑 发表于 2025-5-15 19:09
不是随机的
这默认设定蛮好看的{:4_173:} 马黑黑 发表于 2025-5-15 19:09
这种材质怎么转，颜色基本都固定吧
之前立方体啥的也都固定不变么？还是我没留意{:4_170:} 花飞飞 发表于 2025-5-15 19:20
之前立方体啥的也都固定不变么？还是我没留意
有个概念你得弄清楚：是谁在旋转。
一楼代码是设置了相机沿着场景绕圈旋转，3d图形也自旋转。我们看到的色彩在不同面的变化实际上是相机绕圈圈造成的，可以停止相机的旋转，若此，所有3d图形的颜色层次都是一样的（就是你开始时看到的一样）。 花飞飞 发表于 2025-5-15 19:19
这默认设定蛮好看的
之前说过，这个材质主要是内部使用，用来确定一些数据，一般不用于生产环境（当然也可以使用）