5

（stackoverflow 的新手，webgl/three.js 的新手，...）

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

这就是我放置气缸的方法：

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

因此，圆柱体放置在正确的偏移处并以某种方式对齐，但不与边缘的两个点（起点、终点）对齐。
任何建议将不胜感激！

4

4 回答 4

8

使用它： 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+ 代码：

 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);
    }
于 2013-03-01T15:09:17.120 回答
1

@jdregister 的答案在 R77 中对我来说不太适用，因为圆柱体最终的中心位于 vstart （旋转和查看其他方面都很好）。

对 R58+ 答案的倒数第二行的这种修改起到了作用：

mesh.position.set(position.x, position.y, position.z);
于 2016-06-04T06:34:19.857 回答
1

这里有一个非常简洁的答案：https ://stackoverflow.com/a/44346439/1556416

我在这里转述：

function drawCylinder(vstart, vend, radius){
    var cylLength = new THREE.Vector3().subVectors(vend, vstart).length();

    var cylGeom = new THREE.CylinderGeometry(radius, radius, cylLength, 16);
    cylGeom.translate(0, cylLength / 2, 0);
    cylGeom.rotateX(Math.PI / 2);

    var material = new THREE.MeshLambertMaterial({color: "blue"})

    var cyl = new THREE.Mesh(cylGeom, material);

    cyl.position.copy(vstart);
    cyl.lookAt(vend);  // and do the trick with orienation

    return cyl
}
于 2021-08-06T23:36:05.863 回答
0

在 R87 中，“vend.clone().add(vstart).divideScalar(2);” 不管用

您可以像这样定位项目 mesh.position.copy(start); mesh.position.lerp(end, 0.5);

R58的所有其他人都很好:)

于 2018-03-29T10:05:42.713 回答