在three.js中将贝塞尔曲线转换为平面路 [英] convert bezier into a plane road in three.js

问题描述

我正在尝试从先前计算得出的一些贝塞尔曲线中的Three.js中绘制一条弯曲的道路，问题是我找不到转换曲线序列的方法（一个开始于曲线的末尾）

I am trying to draw a curved road in three.js from some beziers I get with previous calculations, the problem is that I can't find the way to convert the sequence of curved lines (one starting at the end of the previous one) to a curved plane.

我有一个3D场景，其中有一些汽车，一条用飞机创建的道路以及即将到来的道路的路径。我用我说过的贝塞尔曲线来表示路径为一条直线，

I have a 3D scene where there are some cars, a road created with a plane and the path of the coming road is painted. I use that Bezier curves I said to represent the path as a Line with

function createAdasisBezier(initx, inity, cp1x, cp1y, cp2x, cp2y, finalx, finaly) {
  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)
  );
  curvePath = new THREE.CurvePath();
  curvePath.add(bezier);

  var geoPath = curvePath.createPointsGeometry( 5 );
  var lineMat = new THREE.LineBasicMaterial({color: 0xff0000});

  curveLine = new THREE.Line(geoPath, lineMat);

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

  scene.add(curveLine);
}

首先，我尝试挤压生产线，但后来我意识到这可能不是解决方案，因为我想走一条路，尽管我可以在X和Y上移动顶部顶点以使其位于贝塞尔曲线附近，以使其成为曲线的外部，结果不仅不理想，而且无法保留左右曲线之间的关系。

First, I tried extruding the line, but then I realized that it might not be the solution because I wanted to do a road, and although I could move top vertices on X and Y to place them near the bezier in order to be the external part of the curve, the result was not only unfavourable, it also made impossible to preserve a relation between a left and a right curve.

移动顶点（一旦确定），我做了一个循环并手动移动它们：

To move vertices (once identified) I did a loop and move them manually:

for (var i = 0; i < geoPath.vertices.length; ++i) {
  geoPath.vertices[i].y += 10;
}

斜角

然后我尝试在每个贝塞尔曲线上绘制一个平面（作为它们的子级）并旋转它以面对路径，但是结果

Then I tried to draw a plane over each bezier (as a child of them) and rotate it to face the path, but the result was not as I expected, and it if it were, it would spoil the arcs of the curves.

要做到这一点，我创建了每个贝塞尔曲线的副本，并放置了一个地方

To do it, I created a copy of every bezier, and place it aside the original ones, then I created the plane.

 var plane = new THREE.PlaneBufferGeometry(10,25,1,1);
 var planemesh = new THREE.Mesh(plane, material);
 planemesh.position.set(copy.geometry.vertices[0].x, copy.geometry.vertices[0].y, 0);

最后我想做的是创建线的克隆，将其分开几米，然后将第一个顶点从一个顶点连接到另一个顶点，这样我得到了一个封闭的几何体，并且我可以创建一个面，但是找不到如何从2种不同的几何形状连接 的顶点。我尝试将一个顶点添加到另一个顶点，但是没有用。

Last thing I was trying to do is creating a clone of the line, separate it some meters and "connect" the first vertex from one, to the first of the other, so I get a closed geometry, and I can create a Face, but I don't find how to "connect" vertices from 2 different geometries. I tried adding the vertex from one to the other, but it did not work.

有人知道如何将这条线转换为弯曲的道路吗？

Does anybody have an idea how could I convert the line into a curved road? Thanks in adcance.

推荐答案

您应该尝试查看几何>拉伸>形状示例。正如您所看到的，尽管向左/向右或完全循环，所有挤出的形状仍保持其宽度和方向。

You should try looking at the Geometry > Extrude > Shapes example. As you can see, all extruded shapes maintain their width and direction, despite turning left/right or looping completely.

它们不是使用贝塞尔曲线，而是使用< a href = https://threejs.org/docs/#api/extras/curves/CatmullRomCurve3 rel = nofollow noreferrer> CatmullRomCurve3 来定义拉伸。如果您查看源代码，那么必不可少使红色突出的形状的代码从第69行开始：

Instead of using bezier curves, they're using a CatmullRomCurve3 to define the extrusion. If you look at the source code, the essential code to make the red extruded shape begins in line 69:

// Define the curve
var closedSpline = new THREE.CatmullRomCurve3( [
    new THREE.Vector3( -60, -100,  60 ),
    new THREE.Vector3( -60,   20,  60 ),
    new THREE.Vector3( -60,  120,  60 ),
    new THREE.Vector3(  60,   20, -60 ),
    new THREE.Vector3(  60, -100, -60 )
] );
closedSpline.type = 'catmullrom';
closedSpline.closed = true;

// Set up settings for later extrusion
var extrudeSettings = {
    steps           : 100,
    bevelEnabled    : false,
    extrudePath     : closedSpline
};

// Define a triangle
var pts = [], count = 3;
for ( var i = 0; i < count; i ++ ) {
    var l = 20;
    var a = 2 * i / count * Math.PI;
    pts.push( new THREE.Vector2 ( Math.cos( a ) * l, Math.sin( a ) * l ) );
}
var shape = new THREE.Shape( pts );

// Extrude the triangle along the CatmullRom curve
var geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );
var material = new THREE.MeshLambertMaterial( { color: 0xb00000, wireframe: false } );

// Create mesh with the resulting geometry
var mesh = new THREE.Mesh( geometry, material );

从这里开始，只需对这些参数进行细微调整即可获得特定的道路形状你想要的。

From here, it should only be a matter of small tweaks to these parameters to get the specific road shape you want.

这篇关于在three.js中将贝塞尔曲线转换为平面路的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！