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.
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);
}
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.