ShapeGeometry: Adding lineTo manually closing a shape, this line gets ignore

[ghost]

Description of the problem

If I draw a rectangle (rectangle used for the simplied example, but holds true for any 2D geometry I tried. I always ignores the last segment) with

    svgShape = new THREE.Shape();
    svgShape.moveTo(0.97780502,-1.9777799999999388);
    svgShape.lineTo(0.97780502,-1.9777799999999388);
    svgShape.lineTo(198.02219502,-1.9777799999999388);
    svgShape.lineTo(198.02219502,-99.02216799999997);
    svgShape.lineTo(0.9778050200000052,-99.02216799999997);
    svgShape.lineTo(0.97780502,-1.9777799999999388);  // looking at the rendered result, this line gets ignored? 
    var svgMaterial = new THREE.MeshBasicMaterial( { color: 0x0000ff } )
    svgGeom = new THREE.ShapeGeometry( svgShape );
    var object = new THREE.Line( svgGeom, svgMaterial ) ;
    scene.add(object);

The result has a missing side:

Three.js version

Tested and happens with every version I tried

• 80dev
• r79
• r76

Browser

I only tested Chrome, but quite sure the others have same issue

• All of them
• Chrome
• Firefox
• Internet Explorer

OS

• All of them
• Windows
• Linux
• Android
• IOS

Hardware Requirements (graphics card, VR Device, ...)

Replicated issue in JSFidde:

Replicated here: https://jsfiddle.net/peter6960/e7tbg5fp/7/

[ghost]

Related to LaserWeb/deprecated-LaserWeb3#56 (comment)

[ghost]

Additional note:

Using shape.autoclose DOES close the shape, but I do not think I need to rely on that, since our geometry is dynamically drawn, and some shapes will need to be closed, some wont, its easier to handle drawing the closing segment manually in the upstream code (just follow the SVG path). My parser already generates the closing line: and the code does the last lineTo. Why is it dropped?

[mrdoob]

/ping @zz85

[ghost]

svgShape.moveTo(1,-2);
svgShape.lineTo(0.97780502,-1.9777799999999388);
svgShape.lineTo(198.02219502,-1.9777799999999388);
svgShape.lineTo(198.02219502,-99.02216799999997);
svgShape.lineTo(0.9778050200000052,-99.02216799999997);
svgShape.lineTo(0.97780502,-1.9777799999999388); 

It works just fine.

[ghost]

Replicated here: https://jsfiddle.net/peter6960/e7tbg5fp/7/

svgShape.moveTo(0.97780502,-1.9777799999999388);
svgShape.lineTo(0.97780502,-1.9777799999999388); 

That "LINE" does not make any sense.

[ghost]

The 'move to' exists because some svgs we import has multiple entities, so
we move to to match the position of that entity in relation to the rest of
the objects.

Agreed on the first line to, that can be removed. But removing it doesnt
add the missing last segment.

(commented out, reran fiddle, still not adding last segment

[ghost]

Ok, rereading your first comment, removing the Move to, seems to address the issue and the segment shows up.

[ghost]

Now, I still dont understand WHY it fails with the move to.
Removing the move to is not an option (See result of import in my app, without the move to:

I do admit its 99.999% sure I am doing something wrong, I guess my question is - should I not be using move to (if not, how do I get a "not drawing a line" move to the start of the first path I want to draw?
or, is it the format in which I create the geometry?

I can use another method - the moveto/lineto came from the threejs examples

[ghost]

Now, I still dont understand WHY it fails with the move to.

It doesn't fail.
Please read again (carefully) my first posted message.
The first line must be a VALID one!

[WestLangley]

@openhardwarecoza You are not using three.js correctly.

Copy the coding patterns in http://threejs.org/examples/webgl_geometry_shapes.html.

ShapeGeometry is a geometry appropriate for triangular meshes -- not lines.

// mesh
var svgMaterial = new THREE.MeshBasicMaterial( { color: 0x0000ff } );
svgGeom = new THREE.ShapeGeometry( svgShape );
var object = new THREE.Mesh( svgGeom, svgMaterial ) ;

// line
svgShape.autoClose = true;
var points = svgShape.createPointsGeometry();
var object = new THREE.Line( points, new THREE.LineBasicMaterial( { color: 0x0000ff } ) );

http://jsfiddle.net/e7tbg5fp/8/

[ghost]

Aha, thanks Westlangley! More explained reply - much appreciated! (Adding a little theory helps a lot more in teaching) . I have been battling the ShapeGeometry thing for a few days now!

So, taking your advice, triggered my thinking that of course, I only need lines! So.... Much better:

https://jsfiddle.net/peter6960/e7tbg5fp/10/

var svgGeom = new THREE.Geometry();
svgGeom.vertices.push( new THREE.Vector3( 0.97780502,-1.9777799999999388, 0 ) );
svgGeom.vertices.push( new THREE.Vector3( 198.02219502,-1.9777799999999388, 0 ) );
svgGeom.vertices.push( new THREE.Vector3( 198.02219502,-99.02216799999997, 0 ) );
svgGeom.vertices.push( new THREE.Vector3( 0.9778050200000052,-99.02216799999997, 0 ) );
svgGeom.vertices.push( new THREE.Vector3( 0.97780502,-1.9777799999999388, 0 ) );
var svgMaterial = new THREE.MeshBasicMaterial( { color: 0x0000ff } )
var object = new THREE.Line( svgGeom, svgMaterial ) ;
scene.add(object);

Works perfectly now!

[WestLangley]

@openhardwarecoza Please use LineBasicMaterial for lines.

[ghost]

Yeah, sorry, normally I would SO, but this looked like a bug based on what i thought lineto was supposed to do. (; I did ask MrDoob first in issue on my project (; Wont Happen Again

[WestLangley]

@openhardwarecoza I saw that. No problem. : - )