Three.js Object3d cylindre de rotation pour l'aligner sur un vecteur

J'ai cherché un peu partout, mais n'arrive pas à comprendre cette jolie chose fondamentale. J'ai vu d'autres exemples sur stackoverflow et ailleurs, dans un an ou deux, mais ils ne parviennent pas à travailler avec la dernière version de Three.js.

Voici une version de ce que je suis en train de travailler sur: http://medschoolgunners.com/sandbox/3d/.

Je vais essayer d'obtenir le cône gris exactement aligner avec les sans étiquette rouge vecteur. C'est à dire. Je veux la pointe du cône d'être exactement aligné avec le vecteur et le point depuis l'origine dans cette direction.

Voici le code que j'ai droit:

    //FUNCTION TO CREATE A CYLINDER
function create_cylinder(radiusTop,radiusBottom, height, segmentsRadius, segmentsHeight, openEnded, color)
{
var material = new THREE.MeshLambertMaterial({
    color: color, //0x0000ff
    opacity: 0.2
});
var cylinder = new THREE.Mesh(new THREE.CylinderGeometry(radiusTop,radiusBottom, height, segmentsRadius, segmentsHeight, openEnded), material);

cylinder.overdraw = true;

return cylinder;
}

//ALIGN THE CYLINDER TO A GIVEN VECTOR
var alignVector=new THREE.Vector3(-50,50,50); //the vector to be aligned with

var newcylinder = create_cylinder(0.1, 10, 40, 50, 50, false, "0x0ff0f0");  //the object to be aligned with the vector above

var cylinderQuaternion = new THREE.Quaternion();
cylinderQuaternion.setFromEuler(alignVector);
newcylinder.useQuaternion = true;
newcylinder.quaternion=cylinderQuaternion;

scatterPlot.add(newcylinder);

OriginalL'auteur coder99 | 2012-01-27

20

Si vous avez un vecteur arbitraire:
```
var vector = new THREE.Vector3(100, 60, 20);
```
Vous pouvez aligner un objet, tel qu'un cylindre, pour le vecteur comme ceci:
```
var geometry = new THREE.CylinderGeometry(2, 2, vector.length(), 4, 4);
var mesh = new THREE.Mesh(geometry, someMaterial);
var axis = new THREE.Vector3(0, 1, 0);
mesh.quaternion.setFromUnitVectors(axis, vector.clone().normalize());
```
Où axis est le sens originel de la bouteille (pointant vers le haut).

Vous pouvez également déplacer le cylindre en fonction de la position du vecteur comme ceci:
```
mesh.position.copy(vector.clone().multiplyScalar(0.5));
```
Cela met une extrémité du cylindre à la 0, 0, 0 et l'autre à 100, 60, 20, et travaille parce que j'ai mis la longueur du cylindre à vector.length().

Très utile et bien expliqué :-). btw un trop grand nombre de supports d'extrémité dans la dernière ligne de code: maillage.position.copier(vecteur.clone().multiplyScalar(0.5)));
Ce doit être marqué comme réponse.

OriginalL'auteur peterjwest

je sais que c'est une vieille question, mais au cas où quelqu'un est encore à se demander, ce qui a fonctionné pour moi a été l'ajout d'un vecteur le maillage de la position et de l'utilisation lookAt pour l'aligner sur le vecteur:

//Mesh to align
var material = new THREE.MeshLambertMaterial({color: 0x0000ff});
var cylinder = new THREE.Mesh(new THREE.CylinderGeometry(10, 10, 15), material);

//vector to align to
var vector = new THREE.Vector3(
    5,//x
    10,//y
    15 //z
);

//create a point to lookAt
var focalPoint = new THREE.Vector3(
    cylinder.position.x + vector.x,
    cylinder.position.y + vector.y,
    cylinder.position.z + vector.z
);

//all that remains is setting the up vector (if needed) and use lookAt
cylinder.up = new THREE.Vector3(0,0,1);//Z axis up
cylinder.lookAt(focalPoint);

OriginalL'auteur Kevin Kuyl

Malheureusement je n'ai pas travaillé avec les Quaternions, ne peut donc pas aider beaucoup. Il semble à mon que certains de la compensation est nécessaire, étant donné que le cylindre du pivot est au centre de la maille, et non pas à une fin.

Si joué avec des matrices un peu, et j'ai obtenu des résultats décents.

Voici un moyen de cela, en utilisant Mesh lookAt() méthode:

var HALF_PI = -Math.PI * .5;
var p1 = new THREE.Vector3(Math.random()-.5,Math.random()-.5,Math.random()-.5).multiplyScalar(30);
var p2 = new THREE.Vector3(Math.random(),Math.random(),Math.random()).multiplyScalar(300);
var halfLength = diff.length() * .5;
var c = new THREE.CylinderGeometry(10, 10, halfLength * 2, 12, 1, false );
var orientation = new THREE.Matrix4();
orientation.setRotationFromEuler(new THREE.Vector3(HALF_PI,0,0));//rotate on X 90 degrees
orientation.setPosition(new THREE.Vector3(0,0,halfLength));//move half way on Z, since default pivot is at centre
c.applyMatrix(orientation);//apply transformation for geometry
var m = new THREE.Mesh( c, new THREE.MeshLambertMaterial( { color: 0x009900, wireframe: true, shading: THREE.FlatShading } ) );
scene.add(m);
m.lookAt(p2);//tell mesh to orient itself towards p2
//just for debugging - to illustrate orientation
m.add(new THREE.Axes());
//visualize p1,p2 vectors
var PI2 = Math.PI * 2;
var program = function ( context ) {
context.beginPath();
context.arc( 0, 0, 1, 0, PI2, true );
context.closePath();
context.fill();
}
particleMaterial = new THREE.ParticleCanvasMaterial( { color: 0x990000, program: program } );
var pp1 = new THREE.Particle( new THREE.ParticleCanvasMaterial( { color: 0x990000, program: program } ) );
pp1.scale.multiplyScalar(10);
pp1.position.copy(p1);
scene.add( pp1 );   
var pp2 = new THREE.Particle( new THREE.ParticleCanvasMaterial( { color: 0x009900, program: program } ) );
pp2.scale.multiplyScalar(10);
pp2.position.copy(p2);
scene.add( pp2 );

Cela dessine un cylindre qui commence à p1 se termine à p2 et est orientée vers elle.
La compensation peut-être besoin de quelques ajustements, mais la géométrie suit le vecteur direction d'assez près.

Il y a aussi la version longue de manuellement le calcul des matrices, plutôt que de s'appuyer sur la lookAt() fonctionnalité:

plane.add(getCylinderBetweenPoints(p1,p2,new THREE.MeshLambertMaterial( { color: 0x009900, wireframe: true, shading: THREE.FlatShading } )));
function getCylinderBetweenPoints(point1,point2,material){
var HALF_PI = -Math.PI * .5;
var diff = new THREE.Vector3().sub(point1,point2);//delta vector
var halfLength = diff.length() * .5;
var c = new THREE.CylinderGeometry(10, 10, halfLength * 2, 12, 1, false );
var orientation = new THREE.Matrix4();//a new orientation matrix to offset pivot
var offsetRotation = new THREE.Matrix4();//a matrix to fix pivot rotation
var offsetPosition = new THREE.Matrix4();//a matrix to fix pivot position
orientation.lookAt(point1,point2,new THREE.Vector3(0,1,0));//look at destination
offsetRotation.setRotationX(HALF_PI);//rotate 90 degs on X
offsetPosition.setPosition(new THREE.Vector3(-point1.x,diff.length()*.5+point1.z,point1.y*.5));//move by pivot offset on Y
orientation.multiplySelf(offsetRotation);//combine orientation with rotation transformations
orientation.multiplySelf(offsetPosition);//combine orientation with position transformations
c.applyMatrix(orientation);//apply the final matrix
var m = new THREE.Mesh( c, material );
m.add(new THREE.Axes());
return m;
}
var PI2 = Math.PI * 2;
var program = function ( context ) {
context.beginPath();
context.arc( 0, 0, 1, 0, PI2, true );
context.closePath();
context.fill();
}
//visualize p1,p2 vectors
particleMaterial = new THREE.ParticleCanvasMaterial( { color: 0x990000, program: program } );
var pp1 = new THREE.Particle( new THREE.ParticleCanvasMaterial( { color: 0x990000, program: program } ) );
pp1.scale.multiplyScalar(10);
pp1.position.copy(p1);
plane.add( pp1 );   
var pp2 = new THREE.Particle( new THREE.ParticleCanvasMaterial( { color: 0x009900, program: program } ) );
pp2.scale.multiplyScalar(10);
pp2.position.copy(p2);
plane.add( pp2 );

Ce me ressemble plus de travail que d'utiliser les quaternions, de ce que je vois tu t'en es code. Si le setFromEuler fait la magie pour l'orientation, le maillage de la géométrie pourraient encore avoir besoin de se déplacer (de pivot d'une fin plutôt qu'au centre)

HTH

Viens de vérifier three.js r47 et applyMatrix() est toujours là comme vous pouvez le voir dans la Géométrie de la classe à la ligne 42

OriginalL'auteur George Profenza

Vous devez vous connecter pour publier un commentaire.