three.js在渲染时更改管道

时间:2016-11-25 16:51:22

标签: javascript three.js morphing

我的方法包括以下步骤:

1)创建管的初始路径(点的位置数组)

2)基于路径渲染管

3)更改路径数组

4)转到第2步

所以,也许我需要这样的功能:

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

让我们说我想渲染一条爬行的蛇。

我找到了美丽而且非常复杂的例子,请让我基本了解如何解决我的问题。

示例 - http://codepen.io/tdhooper/full/ZGPOQJ/

我使用此功能创建管:

{{1}}

请建议我使用哪个函数进行曲线创建以及如何变形(不缩放,不旋转,不翻译管)?

我的观点很简单:

{{1}}

1 个答案:

答案 0 :(得分:0)

无论何时在THREE.js中创建任何类型的几何实例,创建的实例都有一个名为' vertices'的属性。在您的特定情况下,Cilinder Geometry会根据您在创建曲线时提供的原始点(Vector3)数组创建大量顶点。

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