three.js几何体之挤压缓冲几何体
挤压缓冲几何体 ExtrudeGeometry，用来从一个形状路径中，挤压出一个 BufferGeometry（缓冲几何体）。构造器：
ExtrudeGeometry(shapes : Array, options : Object)
其中：
shapes — 形状或者一个包含形状的数组
options — 一个包含有下列参数的对象：
curveSegments — 整数型，曲线上点的数量，默认值是 12
steps — 整数型，用于沿着挤出样条的深度细分的点的数量，默认值为 1
depth — 浮点型，挤出的形状的深度，默认值为 1
bevelEnabled — 布尔型，对挤出的形状应用是否斜角，默认值为 true
bevelThickness — 浮点型，设置原始形状上斜角的厚度，默认值为 0.2
bevelSize — 浮点型，斜角与原始形状轮廓之间的延伸距离，默认值为 bevelThickness - 0.1
bevelOffset — 浮点型，斜面偏移量，默认值为 0
bevelSegments — 整数型，斜角的分段层数，默认值为 3
extrudePath — THREE.Curve对象，一条沿着被挤出形状的三维样条线（路径挤压不支持斜面）
UVGenerator — Object（对象），提供了UV生成器函数的对象，该对象将一个二维形状挤出为一个三维几何体。当使用这个几何体创建Mesh的时候，如果你希望分别对它的表面和它挤出的侧面使用单独的材质，你可以使用一个材质数组。 第一个材质将用于其表面；第二个材质则将用于其挤压出的侧面
下面的代码将绘制一个挤压缓冲几何体 ExtrudeGeometry 图形：
<div>点击页面可暂停、继续动画</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);
// 创建多边形轮廓shape
const shape = new THREE.Shape();
// 定义顶点坐标
const points = [
[1, 0],
[1, 1],
[2, 1],
[2, 0],
[0, 0]
];
// 扫描顶点坐标绘制shape形状路径
points.forEach( (p, k) => {
k < 1 ? shape.moveTo(p[0], p[1]) : shape.lineTo(p[0], p[1]);
});
// 将形状路径shape挤压出缓冲几何体
var geometry = new THREE.ExtrudeGeometry(shape); // shape做形状参数
// 定义材质 : 法向量材质，开启透明度+双面渲染
var material = new THREE.MeshNormalMaterial({
transparent: true,
opacity: 0.6,
side: THREE.DoubleSide
});
var mesh = new THREE.Mesh(geometry, material); // 最后成图
mesh.rotateX(Math.PI / 4); // 在Y轴倾斜45度方便观察
scene.add(mesh); // 图形加入场景
var animate = () => {
requestAnimationFrame(animate);
var delta = clock.getDelta();
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>
<style>
/* 预览页面CSS */
body { margin: 0; }
div { margin: 10px; position: absolute; color: #eee; }
</style>
前一篇: three.js几何体之边缘几何体
下一篇: three.js几何体之多面缓冲几何体
发表评论:
评论列表 [0条]
