Question

我正在LAX机场创建一个theme building模型，用于我写的游戏

我正在寻找一种方法来获取svg样条（使用Bézier曲线）并将其转换为three.js中的lathe对象？

在3D建模器中对其进行建模，因为我使用连续LOD并且想要从服务器发送最少量的数据，所以无法工作

Answer 1

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

从服务器
将曲线转换为客户端中的多边形
从多边形

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

关于数据量 - 它取决于曲线到多边形转换的保真度有多高（将曲线转换为多边形时要使用多少个样本/细分），但这可以完成在客户端（请参阅下面的代码段），您不必过于担心它。

要从一系列点中创建Lathe几何，请参阅this answer

要将SVG curve转换为一系列积分，您可以使用此功能一段代码：

//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;
}

SVG样条（带Bézier曲线）到three.js车床对象

1 个答案: