三.js - 两点，一个圆柱体，对齐问题 [英] three.js - two points, one cylinder, align issue

问题描述

(stackoverflow 的新手，webgl/three.js 的新手，...)

(new to stackoverflow, new to webgl/three.js, ...)

我正在使用three.js r54 来绘制力导向图.节点之间的边是 THREE.Lines，这很好，但线不能用 raycaster 选择.所以我的目标是用圆柱代替(/连同)线条(也是因为我可以做一些进一步的事情:使用纹理，...)

I'm using three.js r54 to plot a force-directed graph. the edges between the nodes are THREE.Lines, which is fine, but lines are not selectable with a raycaster. so my aim is to take cylinders instead(/along with) of lines(also because I can do some further stuff: using textures,...)

这是我放置圆柱体的方法:

this is what I'm doing to place the cylinders:

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

(描述于:http://www.fastgraph.com/makegames/3drotation/ )

所以圆柱体被放置在正确的偏移处并以某种方式对齐，但不是边缘的两个点(起点，终点).
任何建议将不胜感激！

So the cylinders are placed at the right offset and align in some kind of way, but not to the two points (start, end) of the edges.
any suggestion would be appreciated!

推荐答案

使用那个:object3d-rotation-to-align-to-a-vector

给定 2 Vector3 和一个场景:

given 2 Vector3 and a scene:

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+ 代码:

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

这篇关于三.js - 两点，一个圆柱体，对齐问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！