CODEWITHSUNDEEP
javascriptthree.js
oisi
oisi

Reputation: 21

how to fix this geometry in three.js

I am trying to translate geometry canvas2d commands which are generated at a separate library to three.js webgl output. I have cutted one example and have a canvas2d output in one fiddle and the corresponding three.js fiddle. As you can see the three.js output is not correct. So I have to modify the library which generates the commands or add/remove commands or change three.js parameters itself. Please can someone help me to fix the example?

Here is the canvas2d fiddle: https://jsfiddle.net/onifs/a1L87mhb/2/

var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d");

And here the three.js one: https://jsfiddle.net/onifs/s6xn0obu/13/

constructPathShape = new THREE.Shape();

Please click "more" button several times to see how the shape is constructed.

TIA

Upvotes: 0

Views: 467

Answers (2)

oisi
oisi

Reputation: 21

I have updated the fiddle. Now I don't need to create holes! I use ShapePath(true) instead.

https://jsfiddle.net/onifs/s6xn0obu/31/ (scroll down a little bit)

var simpleShapes = constructPathShape.toShapes( true );
    for ( var j = 0; j < simpleShapes.length; j ++ ) {
        var simpleShape = simpleShapes[ j ];
        var shape3d = new THREE.ExtrudeBufferGeometry( simpleShape, {
                depth: 2,
                bevelEnabled: false
        } );
        var material = new THREE.MeshLambertMaterial({
            color: 0xff8800
        });

        var mesh = new THREE.Mesh( shape3d, material );
        scene.add( mesh );
}

enter image description here

Upvotes: 0

Alex Khoroshylov
Alex Khoroshylov

Reputation: 2354

Once main contour is complete, you need to populate Shape.holes

Fixed fork of your fiddle can be found here: https://jsfiddle.net/mmalex/6khnx2zy/

...
command[i++] = "constructPathShape.closePath();"; //outer contour is complete

command[i++] = "{ let hole = new THREE.Shape(); "
             + "  hole.autoClose = false; " 
             + "  constructPathShape.holes.push(hole); "
             + "  constructPathShape.holes[0].moveTo( -39.196, -59.186); "
             + "}";

// !!! IMPORTANT: starting from now address .holes[0]
command[i++] = "constructPathShape.holes[0].bezierCurveTo( -38.412,-47.08,-34.342,-37.412,-26.98,-30.181);";
command[i++] = "constructPathShape.holes[0].bezierCurveTo( -19.62,-22.952,-10.54,-19.337,0.261,-19.337);";
command[i++] = "constructPathShape.holes[0].bezierCurveTo( 12.194,-19.337,21.905,-23.867,29.397,-32.925);";
command[i++] = "constructPathShape.holes[0].bezierCurveTo( 34.274,-38.761,37.236,-47.515,38.282,-59.186);";
command[i++] = "constructPathShape.holes[0].lineTo( -39.196, -59.186);";

command[i++] = "constructPathShape.holes[0].closePath();";

command[i++] = " \/* we're done *\/ ;";

dynamically construct three.js shape with holes

Upvotes: 1

Related Questions