Three.js - 表示向量的圆柱体的旋转 [英] Three.js - Rotation of a cylinder that represents a vector
问题描述
我正在使用three.js 创建一个简单的3d 矢量环境.我使用线来表示所有 3 个向量分量 x、y、z 和一条线用于最终向量表示.问题是在 Windows 中设置线的宽度
我在旋转时做错了什么?如何实现它使圆柱体遵循矢量线?
感谢您的帮助.
如果你想变换一个圆柱体,使一端在原点,另一端指向特定的点
,在这里是您可以遵循的模式:
首先,变换几何图形,使圆柱体的一端位于原点,另一端(顶部)位于 正 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 );网格.lookAt(点);
three.js r.67
I am using three.js to create a simple 3d vector environment. I am using lines to represent all 3 vector compontens x, y, z and a line for the final vector representation. Problem is that setting the width of a line is not working in Windows. The workaround that I try to implement is placing a cylinder onto the line (see red object in image below).
That is my current result:
As you see I am not able to rotate the cylinder to the correct position.
I faced the problem that the rotation center of the cylinder is in the middle of the object, so I moved the rotation point to the beginning of the cylinder. But still, rotation is not working correctly. I guess, the rotations around the axis influence each other.
Here is the code:
// 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 );
And the function updateCylinder trys to do the rotation.
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);
}
Here is the current demo: http://www.matheretter.de/3d/vektoren/komponenten/
What am i doing wrong with the rotation? How to implement it so that the cylinder is following the vector line?
Thanks for your help.
If you want to transform a cylinder so that one end is at the origin and the other end points toward a specific point
, here is the pattern you can follow:
First, transform your geometry so one end of the cylinder is at the origin, and the other end (the top) is on the positive z-axis.
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 ) );
Then create your mesh, and call the lookAt()
method:
var mesh = new THREE.Mesh( geometry, material );
mesh.lookAt( point );
three.js r.67
这篇关于Three.js - 表示向量的圆柱体的旋转的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!