javascript - 如何在 three.js 中修复此几何图形

Question

我正在尝试将在单独的库中生成的几何 canvas2d 命令转换为three.js webgl 输出。我已经剪切了一个示例，并且在一个小提琴和相应的three.js 小提琴中有一个canvas2d 输出。如您所见，three.js 输出不正确。所以我必须修改生成命令的库或添加/删除命令或更改 three.js 参数本身。请问有人可以帮我修复这个例子吗？

这是canvas2d小提琴： https ://jsfiddle.net/onifs/a1L87mhb/2/

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

这里是three.js之一： https ://jsfiddle.net/onifs/s6xn0obu/13/

constructPathShape = new THREE.Shape();

请点击“更多”按钮数次查看形状是如何构建的。

TIA

标签： javascriptthree.js

Answer 1

主轮廓完成后，您需要填充Shape.holes

你的小提琴的固定叉可以在这里找到：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 *\/ ;";