时间戳

首页 > 解决方案 > threejs - 为一条线创建 3d 透视图

three.js - threejs - 为一条线创建 3d 透视图

问题描述

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

在上图中，您看到的白线只是一个 THREE.Line 实例，我在其中将 trails 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 THREE.TubeGeometry(trailCurve,80,4,2,false) 每个 mzartman 请求 在此处输入图像描述

标签： three.js

解决方案

我认为您应该能够使用 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);

推荐阅读