javascript - SVG 样条线(带有贝塞尔曲线)到 Three.js 车床对象

Question

• 我正在创建 theme building 的模型在洛杉矶国际机场参加我编写的游戏

我正在寻找一种方法来获取 svg 样条线(带有贝塞尔曲线)并将其转换为 Three.js 中的车床对象？

• 在 3D 建模器中进行建模，这不起作用，因为我使用连续 LODing 并且希望从服务器发送最少量的数据

Answer 1

从服务器到客户端的数据传输“最快”的方法是:

1. 将样条线/曲线从服务器发送到客户端
2. 将曲线转换为客户端中的多边形
3. 在客户端中从多边形创建车床

<小时/>

您首先需要将 SVG 样条线转换为多边形，然后将其作为车床几何体输入到 Three.js 中。

至于数据量 - 这取决于曲线到多边形转换的保真度有多高(将曲线转换为多边形时要使用多少个样本/分割)，但因为这是可以完成的在客户端中(请参阅下面的代码片段)，那么您就不必太担心。

<小时/>

• 要通过一系列点创建车床几何形状，请参阅 thisanswer

• 要将 SVG 曲线 转换为一系列点，您可以使用此一段代码:

  //convert path to polygon
  function pathToPolygon(path, samples) {
  
  if (!samples) samples = 0;
  
  var poly = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
  
  // Put all path segments in a queue
  for (var segs = [], s = path.pathSegList, i = s.numberOfItems - 1; i >= 0; --i) segs[i] = s.getItem(i);
  var segments = segs.concat();
  
  var seg, lastSeg, points = [],
      x, y;
  var addSegmentPoint = function(s) {
      if (s.pathSegType == SVGPathSeg.PATHSEG_CLOSEPATH) {
  
      } else {
          if (s.pathSegType % 2 == 1 && s.pathSegType > 1) {
              // All odd-numbered path types are relative, except PATHSEG_CLOSEPATH (1)
              x += s.x;
              y += s.y;
          } else {
              x = s.x;
              y = s.y;
          }
          var lastPoint = points[points.length - 1];
          if (!lastPoint || x != lastPoint[0] || y != lastPoint[1]) points.push([x, y]);
      }
  };
  for (var d = 0, len = path.getTotalLength(), step = len / samples; d <= len; d += step) {
      var seg = segments[path.getPathSegAtLength(d)];
      var pt = path.getPointAtLength(d);
      if (seg != lastSeg) {
          lastSeg = seg;
          while (segs.length && segs[0] != seg) addSegmentPoint(segs.shift());
      }
      var lastPoint = points[points.length - 1];
      if (!lastPoint || pt.x != lastPoint[0] || pt.y != lastPoint[1]) points.push([pt.x, pt.y]);
  }
  for (var i = 0, len = segs.length; i < len; ++i) addSegmentPoint(segs[i]);
  for (var i = 0, len = points.length; i < len; ++i) points[i] = points[i].join(',');
  poly.setAttribute('points', points.join(' '));
  return points;
  }