Javascript 如何在three.js中为道路标记生成平行曲线?
我试图画一些平行的曲线,一条接一条,但是如果我通过修改/平移它们在一个轴上的位置来分开它们,结果就不是我想要的 代码很简单,一个贝塞尔使中心路径和克隆与其他材料的侧面Javascript 如何在three.js中为道路标记生成平行曲线?,javascript,three.js,bezier,curve,Javascript,Three.js,Bezier,Curve,我试图画一些平行的曲线,一条接一条,但是如果我通过修改/平移它们在一个轴上的位置来分开它们,结果就不是我想要的 代码很简单,一个贝塞尔使中心路径和克隆与其他材料的侧面 var bezier = new THREE.CubicBezierCurve3( new THREE.Vector3(initx, inity, 0), new THREE.Vector3(cp1x, cp1y, 0), new TH
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);
结果是:
以下是我正在寻找的一些例子:
最后两张图片来自图书馆
我认为对曲线应用偏移量,或使用第一条线的法线绘制另一条线可能是解决方案,但我在文档中找不到任何有用的方法。
我认为也可以从相切轴的距离或类似的地方画一条线,但这可能是一种更简单的方法,有什么想法吗
我看了一下,但它是直线。最后,我自己做的 我使用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);
}
我对另一条偏移线做了同样的处理,只是反转了它的旋转,结果如下:
绿色=切线,红色=法线,青色=平行曲线有一个代码笔,带有工作示例。解释很简单。codepen上的许多vector2添加项已经作为three.js的一部分提供。@Radio太棒了。@Radio真是太棒了,但我一直在寻找一种更简单的“原生”方法来使用three.js,虽然我会看一看,然后试着用这样的操作来解决这个问题。你会想读一读——作为你展示的最后两幅图像的创建者,我绝对主张使用偏移曲线。我怀疑three.js是否内置了这一功能,但是你不需要使用“just three.js”,你可以使用类似bezier.js的东西来获得你需要的偏移曲线,然后简单地将通过偏移找到的坐标反馈回three.js,这样它就可以为你绘图了。谢谢@Mike'Pomax'Kamermans我在其描述中添加了图像的来源,但现在我明白了这是不够的,所以我只在一条单独的线上添加了源。因为你只围绕Z旋转,我认为这只适用于2d曲线?这是正确的。谢谢你的预约,这里没有垂直调整,只有平面曲线。生活中最好的事情是你自己做的!你永远不能依赖任何人。尤其不是这样。
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);