常见网站建设公司术语,网站开发阶段流程,wordpress网页移动端,宝应县建设工程信息网文章目录 问题Echarts 3D如何让曲线变得平滑#xff1f;Echarts 2D图中平滑效果是如何实现的#xff1f;如何在一个Echarts 3D图中画一个圆圈#xff1f;如何在Echarts 3D图中画一个立方体#xff1f; Catmull-Rom插值算法先来回答第二个问题回到第一个问题在Echarts 3D图中… 文章目录 问题Echarts 3D如何让曲线变得平滑Echarts 2D图中平滑效果是如何实现的如何在一个Echarts 3D图中画一个圆圈如何在Echarts 3D图中画一个立方体 Catmull-Rom插值算法先来回答第二个问题回到第一个问题在Echarts 3D图中画一个圆圈在Echarts 3D图中画一个立方体 问题
Echarts 3D如何让曲线变得平滑
假设你遇到了如下需求 将如下数据在Echarts 3D图中展示出来
lineData: [[0, 30, 5],[10, 20, 10],[20, 50, 13],[30, 15, 25],[40, 20, 33],[50, 33, 50],[60, 24, 66],[70, 10, 80],[80, 28, 90],],这个需求很常规最终呈现的效果是这样的 可以看到在Echarts 3D图中line3D模式下上述数据集的成图效果是折线。现在再变更一个需求要求折线数据端点处的过渡要平滑。 于是我们立刻想到了Echarts 2D图中series中是可以配置smooth: true,这个属性的通过这个属性可以让折线在Echarts 2D图上的过渡变得平滑。然而很遗憾当你在Echarts 3D图中进行上述设置时并没有任何效果。
Echarts 2D图中平滑效果是如何实现的
再比如上述数据集只取每个元素的前两个数据不做平滑处理它在Echarts 2D图上成图效果是这样的 开启数据平滑之后它的成图效果是这样的 那么Echarts 2D图中的平滑效果是如何实现的
如何在一个Echarts 3D图中画一个圆圈
如何在Echarts 3D图中画一个立方体
Catmull-Rom插值算法
先来回答第二个问题
实际上在Echarts 2D图中使用的是Catmull-Rom插值算法它的绘图规则是每个点 ( P_i ) 的切线方向等于其相邻两个控制点 ( P_{i-1} ) 和 ( P_{i1} ) 连线的方向。下图为了说明Catmull-Rom插值算法的绘图规则使用P5js curve方法绘制的一个有两个控制点c1和c2经过平面上p1和p2的曲线。而P5js curve方法的底层就是使用的Catmull-Rom插值算法。但是P5js对这个方法的文档描述可能有点问题后半部分参数对照有问题参数的意义应该分别是 控制点、途经点、途经点和控制点。 P25 Curve 回到Echarts 2D图中平滑曲线的实现为了证明Echarts 2D图中使用的是Catmull-Rom插值算法我们把smooth:true的配置去掉然后使用ThreeJs中的SplineCurve构建曲线SplineCurve使用的是Catmull-Rom插值算法然后通过增加细分数也就是调用getPoints(pointCount)方法时增加pointCount的值进行验证。 SplineCurve
const v2Array this.lineData.map((value) {return new THREE.Vector2(value[0], value[1]);});
const curve new THREE.SplineCurve(v2Array);
const points curve.getPoints(this.pointsCount);
// series
series: [{type: line,data: points.map((point) {return [point.x, point.y];}),},
],可以看到当细分数增加时同样的数据集最终和Echarts 2D图中平滑曲线的效果是一致的。
回到第一个问题
通过Catmull-Rom插值算法可以进行二维空间曲线的平滑效果同样的在三维空间中也是可以进行运算的。ThreeJs的CatmullRomCurve3这个曲线就是进行空间曲线Catmull-Rom插值的对象。 // 把关键点变成三维Vector
const keyPoints this.lineData.map((point) {
return new THREE.Vector3(point[0], point[1], point[2]);
});
// 根据关键点生成贝塞尔曲线
const curve new THREE.CatmullRomCurve3(keyPoints);
// 构建series
series: [{type: line3D,data: curve.getPoints(300).map((point) {return [point.x, point.y, point.z];}),lineStyle: {width: 2,color: red,},},
],最终呈现的三维空间平滑曲线效果
在Echarts 3D图中画一个圆圈
在Echarts 2D图中我们通过自定义序列和graphic等API是可以绘制基本几何图形的然而在Echarts 3D图中却没有这个概念。 那么要想在Echarts 3D图中画出一个圆我们通过ThreeJs构建一个圆形然后获取这个圆形每个点的坐标最终通过line3D的方式来画出一个圆
const curve new THREE.EllipseCurve(40,40, // ax, aY20,20 // xRadius, yRadius);
const points curve.getPoints(50);
// 构建series
series: [{type: line3D,data: points.map((point) {return [point.x, point.y, 40];}),lineStyle: {width: 2,color: red,},},
],效果 EllipseCurve 注意这种方法呈现的圆形曲线是平行与xy平面的由于Curve没有旋转API的所以如果需要其他朝向的圆需要使用其他方式。
在Echarts 3D图中画一个立方体
立方体在3d图中的绘制如果基础数据齐全比如知道8个顶点的位置关系还是比较简单的但是如果信息有限8个点的数据需要间接计算出来比如只知道几何体几何中心的位置和长宽高或者需要进行平移旋转等操作那就比较繁琐了。Echarts 3D图中使用ThreeJs能帮助我们绕开这些繁琐的计算。 const geometry new THREE.BoxGeometry(10, 20, 30);geometry.translate(10, 10, 40);// 边信息const linePoints [];const edges new THREE.EdgesGeometry(geometry);const lineSegments new THREE.LineSegments(edges);const lineGeometry lineSegments.geometry;const xyzValues lineGeometry.attributes.position.array;const valuesPerLine 6;for (let i 0; i xyzValues.length; i valuesPerLine) {const chunk xyzValues.slice(i, i valuesPerLine);linePoints.push([chunk.slice(0, 3), chunk.slice(3, 6)]);}// 构建series
series: linePoints.map((pointArray) {return {type: line3D,data: pointArray.map((point) {return [point[0], point[1], point[2]];}),lineStyle: {width: 2,color: red,},};
}),效果
