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屋！