three.js几何体之多面缓冲几何体
多面缓冲几何体 PolyhedronGeometry 在三维空间中具有一些平面的立体图形。这个类将一个顶点数组投射到一个球面上，之后将它们细分为所需的细节级别。这个类由 DodecahedronGeometry（十二面缓冲几何体）、IcosahedronGeometry（二十面缓冲几何体）、OctahedronGeometry（八面缓冲几何体）和 TetrahedronGeometry（四面缓冲几何体）所使用，以生成它们各自的几何结构。构造器：
PolyhedronGeometry(vertices : Array, indices : Array, radius : Float, detail : Integer)
其中：
vertices — 一个顶点 Array（数组），例如：[1,1,1, -1,-1,-1, ... ]
indices — 一个构成面的索引 Array（数组），例如: [0,1,2, 2,3,0, ... ]
radius — 浮点型，最终形状的半径
detail — 整数型，将对这个几何体细分多少个级别。细节越多，形状就越平滑
下面的代码如何绘制多面缓冲几何体 PolyhedronGeometry 图形：
<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>
前一篇: three.js几何体之挤压缓冲几何体
下一篇: three.js 几何体汇总（内容更新中）
发表评论:
评论列表 [0条]
