three.js를 - 두 지점, 하나 개의 실린더, 정렬 문제

Question

내가 three.js를 사용하고

(... 거 같습니다/three.js를 새로운, 유래 할 새)는 포스 - 음모 R54 유향 그래프. 노드 사이의 가장자리는 THREE.Lines이며 괜찮습니다. 그러나 선은 레이 캐스터로 선택할 수 없습니다. 그래서 내 목표는 실린더 (대신에 /와 함께) 줄을 (또한 내가 좀 더 물건을 할 수 있기 때문에 : 텍스처를 사용하여 ...)

이것은 내가 실린더를 배치하고있는거야 :
(에 descripted : http://www.fastgraph.com/makegames/3drotation/)

// 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})); 

은 그래서 실린더가 아니라 가장자리의 두 지점 (시작, 끝)에, 오프셋 및 방법의 일종으로 정렬 오른쪽에 배치됩니다.
제안 사항을 보내 주시면 감사하겠습니다. 그것을 사용

Answer 1

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

주어진 2 Vector3와 장면 :

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); 

} + 코드

R58 : jdregister의 대답 @

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); 
    } 

Answer 2

가 잘 작동하지 않았다 R77에서 나를 위해, 실린더가 위트를 끝내었기 때문에 h vstart의 중심 (회전과 lookAt는 괜찮습니다).

R58 + 응답의 두 번째 마지막 줄이 수정 트릭했다 :

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