如何在three.js中制作道路标记的平行曲线？

Question

我试图绘制一些并行弯曲的线条，一个接一个，但如果我通过修改/翻译他们在一个坐标轴上的位置来分开它们，结果不是我正在寻找的。

代码很简单，一个bezier使中心路径和克隆与其他材料的双方。

var bezier = new THREE.CubicBezierCurve3(
       new THREE.Vector3(initx, inity, 0), 
       new THREE.Vector3(cp1x, cp1y, 0), 
       new THREE.Vector3(cp2x, cp2y, 0), 
       new THREE.Vector3(finalx, finaly, 0) 
       ); 

var curvePath = new THREE.CurvePath(); 
curvePath.add(bezier); 

var path = curvePath.createPointsGeometry(5); 
path.computeLineDistances(); 

var lineMat = new THREE.LineDashedMaterial({ color: 0xFFFFFF, 
              dashSize: 3, 
              gapSize: 2, 
              linewidth: 10}); 

var curveLine = new THREE.Line(path, lineMat); 

curveLine.rotation.set(-Math.PI/2,0,0); 
curveLine.position.y = 0.1; 

var leftLine = curveLine.clone(); 
leftLine.material = matLine; 

var rightLine = curveLine.clone(); 
rightLine.material = matLine; 

leftLine.translateX(-3.5); 
rightLine.position.set(3.5,0,0); 

scene.add(curveLine); 
scene.add(leftLine); 
curveLine.add(rightLine); 

这是结果：

这是我所期待的一些例子：

最后两个图像是从Bezier.js库。

我认为施加偏移的曲线，或使用法线的第一个可能是解决方案绘制另一条线，但我无法找到任何有用的东西做的文档。 我认为它也可以从切线轴的距离画出一条线或类似的东西，但它可能是一个更简单的方法，任何想法？

我看了一下this，但它的直线。

Answer 1

最后，我自己做了。

予算出的切线和主曲线的使用getTangent（）和旋转90度以获得正常的点正常。我为这个法线创建了更多的顶点，通过标量乘其值。然后我了我在世界上正常人想要的点坐标并连接他们创造一个CatmullRomCurve3几何：

for(var i = 0.0; i <= 1.0; i += 0.2){ 

    var point = curvePath.getPointAt(i); 

    var tangent = curvePath.getTangent(i); 
    var extension1 = new THREE.Vector3(tangent.x*2, tangent.y*2, 0); 
    var extension2 = new THREE.Vector3(extension1.x*2, extension1.y*2, 0); 

    var tangentGeometry = new THREE.Geometry(); 
    tangentGeometry.vertices.push(tangent, extension1, extension2); 

    var tangentLine = new THREE.Line(tangentGeometry,greenMaterial); 
    tangentLine.position.set(point.x, point.y, point.z); 

    normal.updateMatrixWorld(); // VERY IMPORTANT 

    var normal = tangentLine.clone(); 
    normal.rotateZ(Math.PI/2); 

    var normalLastVertex = normal.geometry.vertices[2].clone(); 
    normalLastVertex.applyMatrix4(normal.matrixWorld); //convert to world coords. 

    pointsArray.push(normalLastVertex); //for using them out of the loop 

    curveLine.add(tangentLine); 
    curveLine.add(normal); 
} 

在这里，我有个数组中的最后法线顶点，所以我要创建连接它们的花跳出循环。

var splineCurveOffsetLeft = new THREE.CatmullRomCurve3([ 

     new THREE.Vector3((pointsArray[0].x), pointsArray[0].y, 0), 
     new THREE.Vector3((pointsArray[1].x), pointsArray[1].y, 0), 
     new THREE.Vector3((pointsArray[2].x), pointsArray[2].y, 0), 
     new THREE.Vector3((pointsArray[3].x), pointsArray[3].y, 0), 
     new THREE.Vector3((pointsArray[4].x), pointsArray[4].y, 0), 
     new THREE.Vector3((pointsArray[5].x), pointsArray[5].y, 0)   
    ]); 
splineCurveOffsetLeft.type = 'catmullrom'; 
splineCurveOffsetLeft.closed = false; 

var offsetGeometry = new THREE.Geometry(); 
offsetGeometry.vertices = splineCurveOffsetLeft.getPoints(6); 

var offsetLine = new THREE.Line(offsetGeometry, cyanMaterial); 

offsetLine.rotation.set(-Math.PI/2, 0, 0); 
offsetLine.position.y=0.1; 

scene.add(offsetLine); 

我为其它的补偿线相同的只是反转其旋转，这是结果：

绿色=切线，红色=法线，青色=并行曲线