three.js几何体之挤压缓冲几何体
<p>挤压缓冲几何体 ExtrudeGeometry，用来从一个形状路径中，挤压出一个 BufferGeometry（缓冲几何体）。构造器：</p><blockquote>ExtrudeGeometry(shapes : Array, options : Object)</blockquote>
<p> 其中：</p>
<blockquote>
shapes — 形状或者一个包含形状的数组<br>
options — 一个包含有下列参数的对象：<br><br>
curveSegments — 整数型，曲线上点的数量，默认值是 12<br>
steps — 整数型，用于沿着挤出样条的深度细分的点的数量，默认值为 1<br>
depth — 浮点型，挤出的形状的深度，默认值为 1<br>
bevelEnabled — 布尔型，对挤出的形状应用是否斜角，默认值为 true<br>
bevelThickness — 浮点型，设置原始形状上斜角的厚度，默认值为 0.2<br>
bevelSize — 浮点型，斜角与原始形状轮廓之间的延伸距离，默认值为 bevelThickness - 0.1<br>
bevelOffset — 浮点型，斜面偏移量，默认值为 0<br>
bevelSegments — 整数型，斜角的分段层数，默认值为 3<br>
extrudePath — THREE.Curve对象，一条沿着被挤出形状的三维样条线（路径挤压不支持斜面）<br>
UVGenerator — Object（对象），提供了UV生成器函数的对象，该对象将一个二维形状挤出为一个三维几何体。当使用这个几何体创建Mesh的时候，如果你希望分别对它的表面和它挤出的侧面使用单独的材质，你可以使用一个材质数组。 第一个材质将用于其表面；第二个材质则将用于其挤压出的侧面
</blockquote>
<p>下面的代码将绘制一个挤压缓冲几何体 ExtrudeGeometry 图形：</p>
<div id="hEdiv"><pre id="hEpre">
<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 = [
,
,
,
,
];
// 扫描顶点坐标绘制shape形状路径
points.forEach( (p, k) => {
k < 1 ? shape.moveTo(p, p) : shape.lineTo(p, p);
});
// 将形状路径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>
</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_170:}
以前是几个顶点画个形状，现在是设几个顶点画个立体图形。。。
高级。。随意改了下顶点位置，形状随之改变。
如果空间想象能力足够强大，时间充足，可以画出更多美妙的图案吧。。 花飞飞 发表于 2025-5-21 21:12
以前是几个顶点画个形状，现在是设几个顶点画个立体图形。。。
高级。。随意改了下顶点位置，形状随之改变 ...
关键是几何、数学能力要好，这是空间设计的基础 这个挤压几何体的参数真多，这个是用顶点数组挤压出来的吧{:4_187:} 黑黑辛苦了，对每一个都详细解说，真不容易{:4_199:} 红影 发表于 2025-5-21 23:36
黑黑辛苦了，对每一个都详细解说，真不容易
喝茶{:4_190:} 马黑黑 发表于 2025-5-22 13:38
喝茶
解说详细而且这么快，黑黑真花了不少功夫{:4_187:} 红影 发表于 2025-5-22 14:38
解说详细而且这么快，黑黑真花了不少功夫
多喝茶{:4_190:} 马黑黑 发表于 2025-5-21 21:49
关键是几何、数学能力要好，这是空间设计的基础
{:4_173:}这事儿跟天赋没啥关系吧 花飞飞 发表于 2025-5-22 21:08
这事儿跟天赋没啥关系吧
主要是跟幼儿园教育以及受教育者的接受程度有关 马黑黑 发表于 2025-5-22 21:14
主要是跟幼儿园教育以及受教育者的接受程度有关
多读书，多读数理化{:4_173:} 花飞飞 发表于 2025-5-22 21:17
多读书，多读数理化
学好数理化，幼儿园不毕业也不怕 马黑黑 发表于 2025-5-22 19:23
多喝茶
谢谢黑黑的香茶，很香{:4_187:} 红影 发表于 2025-5-22 22:38
谢谢黑黑的香茶，很香
不阔气 马黑黑 发表于 2025-5-22 21:20
学好数理化，幼儿园不毕业也不怕
幼儿园很难考入的。。{:4_173:}门槛越来越高。。 马黑黑 发表于 2025-5-23 18:21
不阔气
应该的{:4_187:} 红影 发表于 2025-5-23 23:23
应该的
嗯嗯，支持 马黑黑 发表于 2025-5-23 23:54
嗯嗯，支持
又学了个回复方法{:4_173:} 红影 发表于 2025-5-24 11:01
又学了个回复方法
回复不易