道路マーキングのためにthree.jsで平行カーブを作成する方法は？

Question

私はそれらを1軸での位置を変更/翻訳して分けた場合、結果は私が探しているものではありません。

コードはシンプルで、中央のパスを作るためのベジェと、側面のための他の素材とのクローンです。

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); 

これが結果です：

そして、これは私が探しています何のいくつかの例です：

最終2枚の画像がBezier.jsライブラリからです。

私はを適用することが解決策になるかもしれません法線最初の1のを使用して別のラインを描く曲線に、またはをオフセットと思いますが、私はそれを行うには便利な何かを見つけることができませんドキュメンテーション。 私は接線軸のような距離から線を描くこともできると思いますが、それはもっと簡単な方法でしょうか？

私はthisを見ましたが、それは直線です。

Answer 1

最後に、自分でやりました。

Iは正接と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); 

私はちょうどその回転を反転し、他のラインオフセットのための同じを作り、これが結果です：

緑=接線、赤=法線、シアン=パラレル曲線