问题描述:

How make a a filled polygon using SplineCurve in Three.js

I had tried to to feed point list to make a Three.Shape but it doesnt work because of some problem with the triangulation "Unable to triangulate polygon". I know spline act as curve not as path that can be closed. So is there any way I can fill the lower part of the spline with a different color for the image shown below.

I want the spline to be cut the back side of the box. Is there anyway I can fill the lower and upper portion of the curve with different material or color.

I dont know the spline approach is good here. If not please correct me

网友答案:

Curve :

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)

                ]);

Shape :

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

Shape geometry and mesh :

var geometry = new THREE.ShapeGeometry( shape );

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

Second possible approach is to create custom geometry and color faces. Custom geometry you can create with Blender and export or add vertices and faces yourself.

相关阅读:
Top