Simplest method of displaying an SVG-Path in WebglRenderer

Questions
, ,
1

We are dealing with 2D-Objects in ThreeJS and along with some data i get an SVG-Path string from the server. This string describes the outline of the object. (Example: “M0,0h299.978v167.391h-299.978z”)
What’s the simplest way to convert this to let’s say a LineSegment or similar so the outline can be shown on the object?
So far i’ve tried svg-mesh-3d which seems to fill the outline into a whole object.
And also the example with the imported transformSVGPath() function, but that does also result in some solid object.
Also modifying that example into:

    var simpleShapes = shapepath.toShapes( true );
    var shape3d = new THREE.ShapeGeometry( simpleShape);
    var mesh = new THREE.LineSegments( shape3d, new THREE.LineBasicMaterial() );

The resulting shape shows only 2 sides of the 4 i need.
I’m a bit at a loss here and any help would be greatly appreciated.

2

Try to use THREE.Line() or THREE.LineLoop() instead of THREE.LineSegments().

https://jsfiddle.net/prisoner849/8r8bgpvL/

var shapepath = transformSVGPath('M0,0h299.978v167.391h-299.978z');

var simpleShape = shapepath.toShapes(true);
for (var i = 0; i < simpleShape.length; i++){
  let shape3d = new THREE.BufferGeometry().setFromPoints(simpleShape[i].getPoints());
  let line = new THREE.Line(shape3d, new THREE.LineBasicMaterial());
  scene.add(line);
}
3

BTW: You should not apply an instance of ShapeGeometry directly to a Line constructor. That won’t give you proper results. Geometry data are always dependent on the actual type of primitive (gl.TRIANGLES, gl.LINES etc.). ShapeGeometry is intended for meshes not for lines.

4

Many thanks, this seems to work!

5

You’re welcome :beers:

6

Hello, I used your code to transform SVG to path but it only returns some rectangles with borders.