threejs - 为一条线创建三维透视

Question

我正在开发一个应用程序，在那里我以三维视角显示ATV轨迹（NAIP图像覆盖在高程数据上）。我使用three.js作为渲染引擎。

在上图中，您看到的白线只是一个THREE.Line实例，我将轨迹gps坐标转换为threejs坐标。我想在这一行添加更多的3D视角。我尝试实现THREE.TubeGeometry，其中路径是THREE.CatmullRomCurve3，使用与我在上图中看到的线路相同的Vector3点。这没有产生理想的结果......

从我看过的很多很多三个例子中，我真的认为挤压几何体会实现我所追求的外观......但是我不知道如何为生命线挤出一个几何体。有什么建议/想法吗？

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

更新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请求THREE.TubeGeometry（trailCurve，80,4,2，false）

Answer 1

我认为您应该能够通过TubeGeometry实现您想要的效果。我认为最重要的是你的例子（如图所示）有超过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 );

<强>更新

我认为你可以用一种显示像MeshPhong这样的阴影的材料做得更好。另外，要在线材框架中添加它作为材料初始化中的选项。用以下内容给它一个节目：

var tubeGeometry = new THREE.TubeGeometry(curve,80,1,2,false);
var material = new THREE.MeshPhongMaterial({color:0x00ff00, wireframe: true});
var tubeMesh = new THREE.Mesh(tubeGeometry,material);
scene.add(tubeMesh);