rotation - three.js: dos puntos, un cilindro, problema de alineación

cylindrical

Question

(nuevo en stackoverflow, nuevo en webgl / three.js, ...)

Estoy usando three.js r54 para trazar un gráfico dirigido por la fuerza. los bordes entre los nodos son TRES.Líneas, lo cual está bien, pero las líneas no son seleccionables con un raycaster. así que mi objetivo es tomar cilindros (/ junto con) de líneas (también porque puedo hacer algunas cosas más: usar texturas, ...)

esto es lo que estoy haciendo para colocar los cilindros:

// init reference vector
var upVec = new THREE.Vector3(0,1,0);

//---withhin a loop---
// get direction
var direction = startPoint.subSelf(endPoint).clone();

// half length for cylinder height
var halfLength = direction.length() * 0.5;  

// get offset
var offset = endPoint.clone().addSelf(direction.clone().multiplyScalar(0.5));

// normalize direc
direction.normalize();

//newUpVec = upVec - (upVec *(dot) direction) * direction - projection of direction
var newUpVec = upVec.clone().subSelf(direction.clone().multiplyScalar(upVec.dot(direction.clone()))).normalize();
var right = newUpVec.clone().crossSelf(direction.clone());

//build rotation matrix
var rot = new THREE.Matrix4(right.x, right.y, right.z, 0,
                            newUpVec.x, newUpVec.y, newUpVec.z, 0, 
                            direction.x, direction.y, direction.z,0,
                            0,0,0,1);
//build translation matrix
var transla = new THREE.Matrix4(1, 0, 0, offset.x,
                                0, 1, 0, offset.y,
                                0, 0, 1, offset.z,
                                0, 0, 0, 1);

 //build transformation matrix
 var transfo = new THREE.Matrix4().multiply(transla, rot);

 // create geometry
 var cylgeo = new THREE.CylinderGeometry(2, 2, halfLength * 2, 12, 1, false);
 cylgeo.applyMatrix(transfo);

 var cylMesh = new THREE.Mesh(cylgeo, new THREE.MeshLambertMaterial({color:0x000000, 
            wireframe: true, shading: THREE.FlatShading}));

(descrito en: http://www.fastgraph.com/makegames/3drotation/ )

De modo que los cilindros se colocan en el desplazamiento derecho y se alinean de algún modo, pero no en los dos puntos (inicio, fin) de los bordes.
cualquier sugerencia sería apreciada!

Answer 1

La respuesta de @jdregister no funcionó para mí en el R77, ya que el cilindro terminó con su centro en vstart (rotación y apariencia).

Esta modificación a la segunda última línea de la respuesta R58 + hizo el truco:

mesh.position.set(position.x, position.y, position.z);

Answer 2

usando eso: object3d-rotation-to-align-to-a-vector

dado 2 Vector3 y una escena:

function drawCylinder(vstart, vend,scene){
var HALF_PI = +Math.PI * .5;
var distance = vstart.distanceTo(vend);
var position  = vend.clone().addSelf(vstart).divideScalar(2);

var material = new THREE.MeshLambertMaterial({color:0x0000ff});
var cylinder = new THREE.CylinderGeometry(10,10,distance,10,10,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(vstart,vend,new THREE.Vector3(0,1,0));//look at destination
offsetRotation.rotateX(HALF_PI);//rotate 90 degs on X
orientation.multiplySelf(offsetRotation);//combine orientation with rotation transformations
cylinder.applyMatrix(orientation)

var mesh = new THREE.Mesh(cylinder,material);
mesh.position=position;
scene.add(mesh);

}

código r58 +:

 function drawCylinder(vstart, vend,scene){
    var HALF_PI = Math.PI * .5;
    var distance = vstart.distanceTo(vend);
    var position  = vend.clone().add(vstart).divideScalar(2);

    var material = new THREE.MeshLambertMaterial({color:0x0000ff});
    var cylinder = new THREE.CylinderGeometry(10,10,distance,10,10,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(vstart,vend,new THREE.Vector3(0,1,0));//look at destination
    offsetRotation.makeRotationX(HALF_PI);//rotate 90 degs on X
    orientation.multiply(offsetRotation);//combine orientation with rotation transformations
    cylinder.applyMatrix(orientation)

    var mesh = new THREE.Mesh(cylinder,material);
    mesh.position=position;
    scene.add(mesh);
    }