在a-Frame和Three.js中使用多平面绘制曲线

我正在创建一个a-Frame应用程序（使用Three.js）使用Three.CatmullRomCurve3绘制道路

该应用程序的概念是绘制一条连接多个点的道路，我想绘制精确宽度的道路（例如：宽度为3米的道路），我使用THREE.PlaneGeometry连接两个点

还有我的代码片段

var场景、摄影机、渲染器；
var立方；
风险值控制；
函数initScene（）{
场景=新的三个。场景（）；
摄像头=新的三个透视摄像头（80，window.innerWidth/window.innerHeight，0.11000）；
摄像机位置z=30；
renderer=new THREE.WebGLRenderer({
阿尔法：是的
});
renderer.setSize（window.innerWidth、window.innerHeight）；
控制装置=新的三个控制装置（摄像机）；
控件更新（）；
document.body.appendChild（renderer.doElement）；
}
函数render（）{
请求动画帧（渲染）；
//如果controls.enableDamping或controls.autoRotate设置为true，则需要此选项
控件更新（）；
渲染器。渲染（场景、摄影机）；
}
函数drawRoadByLine（）{
//创建一个封闭的wavey循环
var曲线=新的3.CatmullRomCurve3([
新的三矢量3（-10,0,10），
新的三矢量3（-5，5，5），
新的三个矢量3（0，0，0），
新的三个向量3（5，-5,5），
新三，向量3（10，0，10）
]);
var points=曲线。getPoints（50）；
var geometry=新的三个.BufferGeometry（）.setFromPoints（点）；
var材料=新的三线基本材料({
颜色：0xff0000
});
//创建要添加到场景中的最终对象
var curveObject=新的三条直线（几何体、材质）；
场景。添加（曲线对象）；
}
函数drawRoadByPlane（）{
//创建一个封闭的wavey循环
var曲线=新的3.CatmullRomCurve3([
新的三矢量3（-10,0,10），
新的三矢量3（-5，5，5），
新的三个矢量3（0，0，0），
新的三个向量3（5，-5,5），
新三，向量3（10，0，10）
]);
var points=曲线。getPoints（50）；
var group=新的三个.group（）；
var-currentPos；
var-nextPos；
var距离；
var平面；
var旋转矩阵；
对于（变量i=0；i
正文{
保证金：0；
宽度：100%；
身高：100%；
溢出：隐藏；
背景色：#000000；
}

更新：

我刚刚将解决方案更改为使用THREE.Face3而不是THREE.PlaneGeometry

这是我的代码片段


var场景、摄影机、渲染器；
var立方；
风险值控制；
函数initScene（）{
场景=新的三个。场景（）；
摄像头=新的三个透视摄像头（80，window.innerWidth/window.innerHeight，0.11000）；
摄像机位置z=30；
renderer=new THREE.WebGLRenderer（{alpha:true}）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
控件=新的三个.轨道控件（摄影机、渲染器.doElement）；
控件更新（）；
}
函数render（）{
请求动画帧（渲染）；
渲染器。渲染（场景、摄影机）；
}
函数绘图（）{
var dummyPoints=[
新的三矢量3（-10,0,10），
新的三矢量3（-5，5，5），
新的三个矢量3（0，0，0），
新的三个向量3（5，-5,5），
新三，向量3（10，0，10）
];
//创建一个封闭的wavey循环
var曲线=新的三个.CatmullRomCurve3（dummyPoints）；
var material=新的三个.MeshBasicMaterial（{VertexColor:THREE.FaceColor，side:THREE.DoubleSide}）；
//创建三角形几何体
var点=曲线。获取点（100）；
var道路点=[]；
变量长度=points.length；
对于（变量i=0；i