three.js几何体之多面缓冲几何体
<p>多面缓冲几何体 PolyhedronGeometry 在三维空间中具有一些平面的立体图形。这个类将一个顶点数组投射到一个球面上，之后将它们细分为所需的细节级别。这个类由 DodecahedronGeometry（十二面缓冲几何体）、IcosahedronGeometry（二十面缓冲几何体）、OctahedronGeometry（八面缓冲几何体）和 TetrahedronGeometry（四面缓冲几何体）所使用，以生成它们各自的几何结构。构造器：</p><blockquote>PolyhedronGeometry(vertices : Array, indices : Array, radius : Float, detail : Integer)</blockquote>
<p> 其中：</p>
<blockquote>
vertices — 一个顶点 Array（数组），例如：<br>
indices — 一个构成面的索引 Array（数组），例如: <br>
radius — 浮点型，最终形状的半径<br>
detail — 整数型，将对这个几何体细分多少个级别。细节越多，形状就越平滑
</blockquote>
<p>下面的代码如何绘制多面缓冲几何体 PolyhedronGeometry 图形：</p>
<div id="hEdiv"><pre id="hEpre">
<div style="margin:10px;position:absolute;color:#eee;">点击页面可暂停、继续动画</div>
<script type="module">
import * as THREE from 'https://638183.freep.cn/638183/web/ku/three.module.min.js';
var scene = new THREE.Scene;
var clock = new THREE.Clock();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 6);
var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 顶点数组
const verticesOfCube = [
-1,-1,-1, 1,-1,-1, 1, 1,-1, -1, 1,-1,
-1,-1, 1, 1,-1, 1, 1, 1, 1, -1, 1, 1,
];
// 面索引数组
const indicesOfFaces = [
2,1,0, 0,3,2,
0,4,7, 7,3,0,
0,1,5, 5,4,0,
1,2,6, 6,5,1,
2,3,7, 7,6,2,
4,5,6, 6,7,4
];
// 创建多面缓冲几何体（图形骨架）
const geometry = new THREE.PolyhedronGeometry(verticesOfCube, indicesOfFaces, 2, 3);
// 定义材质 : 线框化法向量材质（图形血肉）
const material = new THREE.MeshNormalMaterial({ wireframe: true });
// 成图（图形躯体）
const mesh = new THREE.Mesh(geometry, material);
// 图形加入场景
scene.add(mesh);
// 动画 ：xy轴旋转
const animate = () => {
requestAnimationFrame(animate);
const delta = clock.getDelta();
mesh.rotation.x -= delta / 5;
mesh.rotation.y -= delta / 5;
renderer.render(scene, camera);
};
document.onclick = () => clock.running ? clock.stop() : clock.start();
window.onresize = () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
animate();
</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:} 很像一个空心球。这些点并不是均匀分布的，都是跟设置相关呢。{:4_187:} 看代码点不多，形成的几何体点很多呢，神奇。 这个MeshNormalMaterial材质真美，每次形成的几何体都觉得色彩好漂亮{:4_199:} 这么复杂的球体也能用代码绘出来，真的是太神奇了。 杨帆 发表于 2025-5-22 10:47
漂亮！欣赏学习，谢谢马老师大佬级分享
{:4_190:} 梦江南 发表于 2025-5-22 11:53
这么复杂的球体也能用代码绘出来，真的是太神奇了。
这个有点难懂 红影 发表于 2025-5-22 10:59
很像一个空心球。这些点并不是均匀分布的，都是跟设置相关呢。
麻烦就在这里，但是自由度很高 红影 发表于 2025-5-22 11:00
看代码点不多，形成的几何体点很多呢，神奇。
它有一整套机制 红影 发表于 2025-5-22 11:01
这个MeshNormalMaterial材质真美，每次形成的几何体都觉得色彩好漂亮
这个材质本来是 three.js 内部测试一些数据使用的，或者给基于 three.js 开发者测试用的。不过它封装的特好，用着也简单 马黑黑 发表于 2025-5-22 13:08
麻烦就在这里，但是自由度很高
是的，让各个点位都能被自己设置了。 马黑黑 发表于 2025-5-22 13:08
它有一整套机制
就是靠这套机制补出的那些点吧。 马黑黑 发表于 2025-5-22 13:10
这个材质本来是 three.js 内部测试一些数据使用的，或者给基于 three.js 开发者测试用的。不过它封装的特 ...
是啊，又简单又漂亮，这个封装真的太好了{:4_187:} 红影 发表于 2025-5-22 14:22
是的，让各个点位都能被自己设置了。
好在只是做帖子用用，能用就用，不能用就换别的 红影 发表于 2025-5-22 14:22
就是靠这套机制补出的那些点吧。
嗯嗯嗯，该有的都有，不该有的也能有 红影 发表于 2025-5-22 14:23
是啊，又简单又漂亮，这个封装真的太好了
不过它就是固定的 材质自带光泽，右上方光源照射，可大可小，可密可疏，各种好看。。{:4_173:} 花飞飞 发表于 2025-5-22 20:22
材质自带光泽，右上方光源照射，可大可小，可密可疏，各种好看。。
{:4_196:} 索引数组变化可以看到球体由一片一片的弧面组合起来的过程，
这些数据设置完美，不可更改{:4_173:}
改一个就不圆了，缺块