Question

我是一名设计师/印刷师，最近刚从编程领域开始。我对threeJS以及用它创建出色互动内容的所有可能性感到非常兴奋。

我想创建一个自定义样条线并在其上拉伸一个形状，如下例所示：https://www.dropbox.com/s/x1f47i3tmq5icz2/Screenshot%202014-07-06%2020.03.50.png

我已经看到我需要绘制ThreeJS向量：

    var sampleClosedSpline = new THREE.ClosedSplineCurve3([
        new THREE.Vector3(0, -40, -40),
        new THREE.Vector3(0, 40, -40),
        new THREE.Vector3(0, 140, -40),
        new THREE.Vector3(0, 40, 40),
        new THREE.Vector3(0, -40, 40),
    ]);

这是一个简化流程的工具吗？或者我必须自己提出每一点意见？

Answer 1

搞清楚，我希望与大家分享。

有一个名为AI2Canvas的插画家插件

将您的设计简化为直线（没有贝塞尔曲线）后，您可以将其导出，它将为您提供以下几点：

  ctx.lineTo(36.4, 96.4);
  ctx.lineTo(44.0, 84.6);
  ctx.lineTo(44.7, 76.4);
  ctx.lineTo(44.7, 66.5);
  ctx.lineTo(44.7, 46.5);
  ctx.lineTo(44.9, 33.0);
  ctx.lineTo(48.9, 21.6);
  ctx.lineTo(60.8, 14.6);
  ctx.lineTo(75.0, 17.3);
  ctx.lineTo(83.3, 30.4);

然后根据你的编辑智慧，你可以让他们像ThreeJS友好一样：

 new THREE.Vector3(12.2- 100, 98.9),
  new THREE.Vector3(36.4- 100, 96.4),
  new THREE.Vector3(44.0- 100, 84.6),
  new THREE.Vector3(44.7- 100, 76.4),
  new THREE.Vector3(44.7- 100, 66.5),
  new THREE.Vector3(44.7- 100, 46.5),
  new THREE.Vector3(44.9- 100, 33.0),
  new THREE.Vector3(48.9- 100, 21.6),
  new THREE.Vector3(60.8- 100, 14.6),
  new THREE.Vector3(75.0- 100, 17.3),
  new THREE.Vector3(83.3- 100, 30.4),

这些没有Z轴，幸运的是我们只能用XY来定义一个点

如何在ThreeJS中创建高级样条线？

1 个答案: