2016-11-25 230 views
0

我的方法改变管路径包括下列步骤:three.js所在渲染

1)创建初始路径管点的位置的(阵列)

2)渲染管基于路径

3)转换路阵列

4)转到步骤2

所以,也许我需要像以下功能:

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

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

比方说,我想渲染一条爬行的蛇。

我发现美丽和非常复杂的例子,请给我基本的理解如何解决我的问题。

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

我用这个函数来创建管:

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

请,建议我要使用哪个函数的曲线创建以及如何变身(没有形成规模,没有旋转,没有转化管)?

我点的排列很简单:你创建three.js所任何一种几何的任何实例

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

回答

0

任何时间,创建的实例有一个名为“顶点”属性。在您的具体情况中,Cilinder几何会根据创建曲线时提供的原始点(Vector3)数组创建大量顶点。

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