在three.js中将bezier转换成平行线
我试图从以前的计算中得到的一些贝齐尔曲线在three.js中画出一条曲线，问题是我无法找到将曲线序列(一条从前一条曲线的末尾开始)转换为一个弯曲平面的方法。
我有一个3D场景，那里有一些汽车，一条用飞机创建的道路，以及即将到来的道路的道路。我使用我所说的Bezier曲线将路径表示为
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上的顶点移动到bezier附近，以便成为曲线的外部部分，结果不仅不利，而且不可能保持左曲线和右曲线之间的关系。
为了移动顶点(一旦识别)，我执行了一个循环并手动移动它们：
for (var i = 0; i < geoPath.vertices.length; ++i) {
geoPath.vertices[i].y += 10;
}
斜面在正确的方向上是不可能的。
然后我试着在每个bezier (作为他们的孩子)上画一个平面，然后旋转它来面对路径，但是结果并不像我预期的那样，如果是的话，它会破坏曲线的弧线。
为了做到这一点，我创建了每一个bezier的副本，并将其放置在原版的一边，然后我创建了这个平面。
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);
我做的最后一件事就是创建一条线的克隆体，把它分开几米，把第一个顶点从一个连接到另一个，所以我得到了一个封闭的几何图形，我可以创建一个脸，但是我找不到如何从两个不同的几何图形“连接”顶点。我试着把顶点从一个加到另一个，但是它没有工作。
有谁知道我怎样才能把这条线变成一条弯道呢？非常感谢。
回答 1
Stack Overflow用户
发布于 2017-08-04 17:58:02
您应该尝试查看Geometry > Extrude > Shapes示例。如你所见，所有挤压形状都保持其宽度和方向，尽管左/右转或完全循环。
他们没有使用贝塞尔曲线，而是使用CatmullRomCurve3来定义挤压。如果您查看源代码，使红色挤压形状的基本代码开始于第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 );从这里，它应该只是一个小的调整这些参数，以获得特定的道路形状，你想要的。
https://stackoverflow.com/questions/45506426
复制相似问题
腾讯云开发者
