推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 多边形轮廓Shape(圆弧) 先掌握上节课关于Shape内容，再继续学习本节课关于Shape圆弧的介绍。 圆弧方法.arc() 圆弧方法.arc()使用方式和原来学习过的圆弧曲线ArcCurve整体相似，区别在于圆心定位方式有差异。 圆弧.arc()参数的圆心坐标是相对当前.currentPoint而言,而不是坐标原点。 下面代码绘制了一个矩形+扇形的轮廓，圆心在(100, 0),半径50。 // 下面代码绘制了一个矩形+扇形的轮廓，圆心在(100, 0),半径50。 const shape = new THREE.Shape(); shape.lineTo(100+50, 0); //.currentPoint变为(100+50,0) // 圆弧.arc参数的圆心0,0坐标是相对当前.currentPoint而言，而不是坐标原点

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 多边形轮廓Shape简介 上节课提到多边形轮廓Shape,是直接通过一组二维向量Vector2表示的xy点坐标创建。下面给大家讲解通过Shape的一些2D绘图API表达多边形轮廓。 // Shape表示一个平面多边形轮廓 const shape = new THREE.Shape([ // 按照特定顺序，依次书写多边形顶点坐标 new THREE.Vector2(-50, -50), //多边形起点 new THREE.Vector2(-50, 50), new THREE.Vector2(50, 50), new THREE.Vector2(50, -50), ]); 多边形轮廓Shape的父类Path Shape的父类是Path,Path提供了直线、圆弧、贝塞尔、样条等绘制方法，Shape也会从父类是Path继承这些图形绘制方法。 如何使用Path的直线、圆弧等绘制方法，可以参考原来学习过的各种曲线API和Path的文档。 .current

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 扫描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.

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 拉伸ExtrudeGeometry 拉伸几何体ExtrudeGeometry和上节课讲到的轮廓填充几何体ShapeGeometry一样，都是基于一个基础的平面轮廓Shape进行变换，生成一个几何体。 查看案例源码，你可以看到ExtrudeGeometry的一个拉伸变换案例。 定义一个Shape轮廓 使用拉伸扫描ExtrudeGeometry和轮廓填充ShapeGeometry一样，需要首先定义一个用于拉伸或扫描的平面轮廓Shape。 多边形上随意选择一个点，作为起点，也就是Shape的第一个坐标，然后按照逆时针或顺时针方向依次书写坐标。 // Shape表示一个平面多边形轮廓 const shape = new THREE.Shape([ // 按照特定顺序，依次书写多边形顶点坐标 new THREE.Vector2(-50, -50), //多边形起点 new THREE.Vector2(-50, 50), new THREE.Vector2(50, 5

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 旋转成型LatheGeometry 生活中有很多的几何体具备旋转特征， three.js提供了一个类LatheGeometry()， LatheGeometry可以利用一个2D轮廓，经过旋转变换生成一个3D的几何体曲面。 旋转LatheGeometry案例 格式：LatheGeometry(points, segments, phiStart, phiLength) 参数值pointsVector2表示的坐标数据组成的数组segments圆周方向细分数，默认12phiStart开始角度,默认0phiLength旋转角度，默认2π * LatheGeometry类第一个参数就是旋转轮廓，旋转轮廓使用多个二维向量Vector2表示的xy坐标去描述。 * LatheGeometry的旋转轮廓默认绕y轴旋转生成曲面几何体。 // Vector2表示的三个点坐标，三个点构成的轮廓相当于两端直线相连接 const pointsArr = [ new THREE.Vector2(50,

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 组合曲线CurvePath拼接曲线 通过threejs组合曲线CurvePath对象，你可以把直线、圆弧、贝塞尔等线条拼接为一条曲线。 课件案例源码为大家提供了一个圆弧和直线组合拼接的的U形效果。 直线线段简介 本节课用到的圆弧前面讲解过，下面给大家说下直线相关API，three.js提供了3D直线LineCurve3和2D直线LineCurve。 3D直线线段LineCurve3，参数是表示x、y、z坐标的三维向量Vector3对象。 new THREE.LineCurve3(new THREE.Vector3(), new THREE.Vector3()); 2D直线线段LineCurve，参数是表示x、y坐标的二维向量Vector2对象。 new THREE.LineCurve(new THREE.Vector2(), new THREE.Vector2()); 整体思路CurvePath.curves 整体思路很简单，LineCurve创建两条直线线段，ArcCur

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 贝塞尔曲线 上节课讲解过，threejs可以通过样条曲线或贝塞尔曲线去表达生活中不规则的曲线，下面给大家介绍贝塞尔曲线有关的知识。 二维二次贝塞尔曲线QuadraticBezierCurve // p1、p2、p3表示三个点坐标 // p1、p3是曲线起始点，p2是曲线的控制点 const p1 = new THREE.Vector2(-80, 0); const p2 = new THREE.Vector2(20, 100); const p3 = new THREE.Vector2(80, 0); 二维二次贝赛尔曲线QuadraticBezierCurve的前面三个参数是二维向量对象Vector2。 // 二维二次贝赛尔曲线 const curve = new THREE.QuadraticBezierCurve(p1, p2, p3); 曲线上获取一定数量点，线模型line渲染贝塞尔曲线。 const pointsArr

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 样条曲线 对于一些不规则的曲线，很难用一个圆、椭圆或抛物线函数去描述，这时候，可以使用threejs提供的样条曲线或贝塞尔曲线去表达。 下面就给大家演示下样条曲线的使用特点。 三维样条曲线CatmullRomCurve3 在三维空间中随意设置几个顶点坐标，然后作为三维样条曲线CatmullRomCurve3的参数，你就可以生成一条穿过这几个点的光滑曲线。 CatmullRomCurve3的参数是三维向量对象Vector3构成的数组。 // 三维向量Vector3创建一组顶点坐标 const arr = [ new THREE.Vector3(-50, 20, 90), new THREE.Vector3(-10, 40, 40), new THREE.Vector3(0, 0, 0), new THREE.Vector3(60, -60, 0), new THREE.Vector3(70, 0, 80) ] // 三维样条曲线

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 曲线Curve简介 上节课程绘制一个圆弧线是自己通过算法实现，其实threejs提供了很多常用的曲线或直线API，可以直接使用。这些API曲线都有一个共同的父类Curve。 椭圆EllipseCurve例子 曲线API的使用，具体语法可以查询文档，下面以椭圆为例，给大家绘制一个椭圆曲线效果。 // 参数1和2表示椭圆中心坐标 参数3和4表示x和y方向半径 const arc = new THREE.EllipseCurve(0, 0, 100, 50); 曲线Curve方法.getPoints() 椭圆弧线EllipseCurve的父类是曲线Curve,自然会继承父类曲线.getPoints()方法，通过.getPoints()可以从曲线上获取顶点数据。 通过方法.getPoints()可以从曲线上按照一定的细分精度返回沿着曲线分布的顶点坐标。细分数越高返回的顶点数量越多，自然轮廓越接近于曲线形状。方法.getPoints()的返回值是一个由二维向量Vector2或三维向量Vec