javascript - three.js 在渲染时更改管道的路径

Question

我的方法包括以下步骤：

1）为管创建初始路径（点位置数组）

2）基于路径渲染管

3) 改变路径数组

4) 转到第 2 步

所以，也许我需要这样的功能：

function morphPath(path){
// some magic here
return newPath;
}

function morphTube(path){
// change tube's vertices positions based on path
}

假设我想渲染一条爬行的蛇。

我发现对我来说很漂亮而且很复杂，请给我基本的了解如何解决我的问题。

我使用这个函数来创建管：

var geometry = new THREE.TubeGeometry( curve, 10, 3, 20, false );

请建议我使用哪个函数来创建曲线以及如何变形（不缩放、不旋转、不平移管）？

我的点数很简单：

points = [{ x: 0, y: 0, z: 0}, { x: 1, y: 1, z: 0}, { x: 3, y: 0, z: 0}]

score 0 · Accepted Answer

每当您在 THREE.js 中创建任何类型的几何图形的任何实例时，创建的实例都有一个名为“顶点”的属性。在您的特定情况下，Cilinder Geometry 根据您在创建曲线时提供的原始点 (Vector3) 数组创建许多顶点。

所以，我认为你可以在每次想要变形时创建一条新路径。然后，对于 morphTube，根据您创建的路径创建一个新的圆柱体几何体，然后从正在渲染的网格中处理几何体并附加新几何体（这有时可能很棘手），或者您可以从圆柱体几何体中复制每个顶点您刚刚创建了附加到网格的圆柱几何体。

1 回答 1