threejs 扫描ExtrudeGeometry

最新推荐文章于 2024-01-21 07:41:46 发布

Threejs可视化

最新推荐文章于 2024-01-21 07:41:46 发布

阅读量445

点赞数 8

文章标签： Three.js Threejs

本文链接：https://blog.csdn.net/u014291990/article/details/135013726

版权

本文介绍了如何使用three.js中的ExtrudeGeometry实现扫描成型，通过Shape定义平面轮廓，CatmullRomCurve3创建3D扫描轨迹，详细展示了如何设置扫描轮廓、轨迹和细分精度以创建复杂的3D模型。

摘要由CSDN通过智能技术生成

参考资料：threejs中文网

threejs qq交流群：814702116

扫描成型`ExtrudeGeometry`

通过ExtrudeGeometry除了可以实现拉伸成型，也可以让一个平面轮廓Shape沿着曲线扫描成型。

查看案例源码，你可以看到ExtrudeGeometry的一个扫描变换案例。

在这里插入图片描述

1.扫描轮廓

// 扫描轮廓：Shape表示一个平面多边形轮廓
const shape = new THREE.Shape([
    // 按照特定顺序，依次书写多边形顶点坐标
    new THREE.Vector2(0,0), //多边形起点
    new THREE.Vector2(0,10),
    new THREE.Vector2(10,10),
    new THREE.Vector2(10,0),
]);

2.扫描轨迹

// 扫描轨迹：创建轮廓的扫描轨迹(3D样条曲线)
const curve = new THREE.CatmullRomCurve3([
    new THREE.Vector3( -10, -50, -50 ),
    new THREE.Vector3( 10, 0, 0 ),
    new THREE.Vector3( 8, 50, 50 ),
    new THREE.Vector3( -5, 0, 100)
]);

3.扫描造型

//扫描造型：扫描默认没有倒角
const geometry = new THREE.ExtrudeGeometry(
    shape, //扫描轮廓
    {
        extrudePath:curve,//扫描轨迹
        steps:100//沿着路径细分精度，越大越光滑
    }
);