Three.js - 表示矢量的圆柱体的旋转

我使用three.js创建简单的3d矢量环境。我使用线条来表示所有3个矢量元素x，y，z和最后一个矢量表示的一条线。问题是在Windows中设置线条is not working的宽度。我试图实现的解决方法是将一个圆柱体放置到该线上（请参见下图中的红色对象）。Three.js - 表示矢量的圆柱体的旋转

这就是我目前的结果是：

three.js 3d vector lines

正如你看到的，我不能够在气缸旋转到正确的位置。

我遇到了圆柱体的旋转中心位于物体中间的问题，所以我将旋转点移动到了圆柱体的开始处。但是，旋转仍然无法正常工作。我想，这个轴的旋转会相互影响。

下面是代码：

// VEKTOR 
var vektor = {}; 
vektor._x = 2; 
vektor._y = 1.5; 
vektor._z = 1; 
vektor._length = Math.sqrt(vektor._x*vektor._x + vektor._y*vektor._y + vektor._z*vektor._z); 

// CYLINDER 
var cyl_material = new THREE.MeshBasicMaterial({ color: 0xff0000 }); 
// cylinder which is our line that represents the vector 
var cyl_width = 0.025; // default line width 
var cyl_height = vektor._length; 
// THREE.CylinderGeometry(radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded) 
var cylGeometry = new THREE.CylinderGeometry(cyl_width, cyl_width, cyl_height, 20, 1, false); 

// translate the cylinder geometry so that the desired point within the geometry is now at the origin 
// https://stackoverflow.com/questions/12746011/three-js-how-do-i-rotate-a-cylinder-around-a-specific-point 
cylGeometry.applyMatrix(new THREE.Matrix4().makeTranslation(0, cyl_height/2, 0)); 
var cylinder = new THREE.Mesh(cylGeometry, cyl_material); 

updateCylinder(); 
scene.add(cylinder);

而且updateCylinder改掉做旋转的功能。

function updateCylinder() { 
    // ... stuff, then: 
    cylinder.rotation.x = Math.atan2(vektor._z,vektor._y); 
    cylinder.rotation.y = 0.5*Math.PI+Math.atan2(vektor._x,vektor._z); 
    cylinder.rotation.z = Math.atan2(vektor._x,vektor._y); 
}

这是当前演示：http://www.matheretter.de/3d/vektoren/komponenten/

我在做什么毛病旋转？如何实现它以便气缸跟随矢量线？

感谢您的帮助。

来源

2014-07-14 Kai Noack

不能与数学但你已经得到了在那里线帮助，您也许可以使用这条线来建立你的气缸？ http://threejs.org/examples/#webgl_geometry_extrude_splines 看到这个例子。如果你有一个样条线（你的线），你可以用它来从中挤出一个圆柱体。通过这种方式，您当然可以在每次更改时都创建一个新的几何体。但我只是想将这个添加到您的问题中，作为一种替代方案。 – GuyGood

如果你想使一端为原点，向特定point另一端点改造汽缸，这里是模式可以遵循：

首先，改变你的几何形状，以便一端圆柱体在原点处，而另一端（顶部）在z轴上为正面。

var geometry = new THREE.CylinderGeometry(0, 1, length, 8, 1, true); 

geometry.applyMatrix(new THREE.Matrix4().makeTranslation(0, length/2, 0)); 
geometry.applyMatrix(new THREE.Matrix4().makeRotationX(Math.PI/2));

然后创建你的网格，并调用lookAt()方法：

var mesh = new THREE.Mesh(geometry, material); 
mesh.lookAt(point);

three.js所r.67

来源

2014-07-14 14:10:46 WestLangley

太好了，谢谢。因此，我只是使用'lookAt（point）'来做3次旋转，而'var point = new THREE.Vector3（vektor._x，vektor._y，vektor._z）'。 Math.PI/2为什么'makeRotationX'变得必要？ –

由于默认对象被认为是“看”正z轴。在你的情况下，你需要转换你的几何图形，以便“指向”这个方向。 – WestLangley

Three.js - 表示矢量的圆柱体的旋转

回答

相关问题