three.js - 使用样条曲线制作填充多边形

Question

如何在 Three.js 中使用 SplineCurve 制作填充多边形

我曾尝试输入点列表来制作 Three.Shape，但由于三角测量“无法三角测量多边形”的一些问题，它不起作用。我知道样条曲线充当曲线而不是可以闭合的路径。那么有什么方法可以用不同的颜色填充样条曲线的下部，如下图所示。

我希望在盒子的背面切割样条线。无论如何我可以用不同的材料或颜色填充曲线的下部和上部。

我不知道样条方法在这里很好。如果不是请纠正我

Answer 1

曲线 ：

var line = new THREE.SplineCurve( 
                [

                  new THREE.Vector2( 30, 12),
                  new THREE.Vector2( 40, 20),
                  new THREE.Vector2( 60, 40),
                  new THREE.Vector2( 10, 60),
                  new THREE.Vector2( 25, 80)

                ]);

形状 ：

var shape = new THREE.Shape(line.getSpacedPoints(100));

形状几何和网格：

var geometry = new THREE.ShapeGeometry( shape );

var mesh = THREE.SceneUtils.createMultiMaterialObject( geometry, [ new THREE.MeshLambertMaterial( { color: 0xeeeeee } )] );

第二种可能的方法是创建自定义几何和彩色面。您可以使用Blender创建自定义几何图形，并自己导出或添加顶点和面。