Three.js threejs-为直线创建三维透视图

我正在开发一个应用程序，在该应用程序中，我以3d透视图（NAIP图像覆盖在高程数据上）可视化ATV轨迹。我正在使用three.js作为渲染引擎

在上图中，您看到的白线只是一个3.line实例，其中我将一个trails gps坐标转换为3JS坐标。我想在这条线上添加更多的3d透视图。我尝试实现一个THREE.TubeGeometry，其中路径是THREE.CatmullRomCurve3，使用的矢量点与我构建上图中所示直线的方式相同。这并没有产生理想的结果…

从我看过的很多、很多三个例子中，我真的认为拉伸几何体可以达到我想要的外观。。。但我一辈子都搞不懂如何挤出直线的几何体。有什么建议/想法吗

更新1: 这是我想要的外观（相同的轨迹-没有图像）。此图像是在QGIS中使用Q23JS插件生成的

更新2:以下是我如何尝试创建管几何体的代码。也许我把事情搞砸了

// trailVectors are an array of Vector3 - same as ones used to create line
var trailCurve = new THREE.CatmullRomCurve3(trailVectors);
var tubeGeometry = new THREE.TubeGeometry(trailCurve,80,1,15,false);
var material = new THREE.MeshBasicMaterial({color:0x00ff00});
var tubeMesh = new THREE.Mesh(tubeGeometry,material);
var wireframeMaterial = new THREE.LineBasicMaterial({color:0xffffff,lineWidth:2});
var wireframe = new THREE.Mesh(tubeGeometry,wireframeMaterial);
tubeMesh.add(wireframe);
scene.add(tubeMesh);

更新3 根据mzartman的要求，3.管道几何结构（追踪曲线，80,4,2，假）

---

我认为你应该能够通过一个管状几何体实现你想要的。我认为最重要的是，您的示例（如图所示）有两个以上的半径段。这使得它呈管状，看起来有点像一个水滴。如果您将“径向分段计数”设置为2（如下所示），那么我认为它看起来会更好

    tubeGeometry = new THREE.TubeBufferGeometry( 

     [YOUR_PATH_HERE], 
     params.extrusionSegments,   // <--- Edit this for higher resolution on the spline
     3,                          // <--- This defines the height
     2,                          // <--- This 2 keeps 2D (i.e. not a tube!!!!)
     true );

     var mesh = new THREE.Mesh( geometry, material );
     var wireframe = new THREE.Mesh( geometry, wireframeMaterial );

     mesh.add( wireframe );
     scene.add( mesh );

---

我认为，你应该能够实现你想要的与管几何。我认为最重要的是，您的示例（如图所示）有两个以上的半径段。这使得它呈管状，看起来有点像一个水滴。如果您将“径向分段计数”设置为2（如下所示），那么我认为它看起来会更好

    tubeGeometry = new THREE.TubeBufferGeometry( 

     [YOUR_PATH_HERE], 
     params.extrusionSegments,   // <--- Edit this for higher resolution on the spline
     3,                          // <--- This defines the height
     2,                          // <--- This 2 keeps 2D (i.e. not a tube!!!!)
     true );

     var mesh = new THREE.Mesh( geometry, material );
     var wireframe = new THREE.Mesh( geometry, wireframeMaterial );

     mesh.add( wireframe );
     scene.add( mesh );

---

另外，给它一个线框可能有助于为材料提供一些结构。谢谢你的评论。当我查看示例TubeGeometry（）时，您可以使用segments、radius和radialSegments属性。我尝试了所有不同的组合，但我的tubegeometry从未与该页面上的tubegeometry接近。。。我已经在我的原始帖子中添加了一个代码片段——也许我把事情搞砸了。我知道你现在要做什么了。如果你想做一个盒子，那可能会更难，但是如果你改变径向段，你可以把一个管子变成一个基本上是平面的东西<代码>变量tubeGeometry=新的三个。tubeGeometry（trailCurve，80,4,2，false）更改时可以显示输出吗？再次感谢您的帮助。我已根据您的要求附上一张带有三个.TubeGeometry（trailCurve，80,4,2，false）的图像。；更新了我的原始答案。也许再试试，看看你是否喜欢这个结果。如果你不喜欢它的外观，那么最好弄点灯光，去掉线框，然后再看看它的外观。除此之外，我能想到的最好的方法是在点之间做数学运算，然后做一个长方体几何，但那需要更多的工作。我认为管子的几何结构应该足够好，适合你所要做的。另外，给它一个线框可能有助于为材料提供一些结构。谢谢你的评论。当我查看示例TubeGeometry（）时，您可以使用segments、radius和radialSegments属性。我尝试了所有不同的组合，但我的tubegeometry从未与该页面上的tubegeometry接近。。。我已经在我的原始帖子中添加了一个代码片段——也许我把事情搞砸了。我知道你现在要做什么了。如果你想做一个盒子，那可能会更难，但是如果你改变径向段，你可以把一个管子变成一个基本上是平面的东西<代码>变量tubeGeometry=新的三个。tubeGeometry（trailCurve，80,4,2，false）更改时可以显示输出吗？再次感谢您的帮助。我已根据您的要求附上一张带有三个.TubeGeometry（trailCurve，80,4,2，false）的图像。；更新了我的原始答案。也许再试试，看看你是否喜欢这个结果。如果你不喜欢它的外观，那么最好弄点灯光，去掉线框，然后再看看它的外观。除此之外，我能想到的最好的方法是在点之间做数学运算，然后做一个长方体几何，但那需要更多的工作。我认为管子的几何结构应该足以满足您的要求。您是否试图在路径上画一条粗线？您是否可以根据您想要的外观添加一些参考快照/照片/图纸？我不太清楚如何解释“为线条添加更多3d透视”。假设你让TubeGeometry开始工作，你想要一个管状的外观来寻找你的轨迹吗？（还有，也许只有我，但我觉得你有一个非常好的可视化的东西，与简单的线渲染）谢谢你的评论。我已经编辑了我的帖子，添加了一张所需外观的图片。您是否试图在路径上画一条粗线？您是否可以根据所需外观添加一些参考快照/照片/图纸？我不太清楚如何解释“为线条添加更多3d透视”。假设你让TubeGeometry开始工作，你想要一个管状的外观来寻找你的轨迹吗？（还有，也许只有我，但我觉得你有一个非常好的可视化的东西，与简单的线渲染）谢谢你的评论。我已经编辑了我的帖子，添加了一张所需外观的图片。