Three.js:将Cylinder旋转到Vector3方向

时间:2014-07-21 14:59:23

标签: javascript three.js

我已经搜索过,但找不到任何有用的东西:

我有一个矢量和一个CylinderGeometry网格物体。我想表示,气缸正面向矢量显示的点。作为输入,我得到一个位置(c)和一个方向(m)(如线方程:y = mx + c):

function draw (m,c, _color) {
  //... create the geometry and mesh
  // set the position
  line.position.x = c.x;
  line.position.y = c.y;
  line.position.z = c.z;

  // i've tried something like this:
  line.lookAt(c.add(m));

  //.. and add to scene
}

但看起来这个方向与我想要的方向正好相反。

我也尝试过像翻译这样的东西:

geometry.applyMatrix( new THREE.Matrix4().makeTranslation(0, length/2, 0));

并尝试像line.rotation.x = direction.angleTo(vec3(1,0,0))* 180 / Math.PI;一样手动获取轮播。但它们都没有像我需要的那样工作。

1 个答案:

答案 0 :(得分:4)

这对我有用:

  // Make the geometry (of "distance" length)
  var geometry = new THREE.CylinderGeometry( 0.6, 0.6, distance, 8, 1, true );
  // shift it so one end rests on the origin
  geometry.applyMatrix( new THREE.Matrix4().makeTranslation( 0, distance / 2, 0 ) );
  // rotate it the right way for lookAt to work
  geometry.applyMatrix( new THREE.Matrix4().makeRotationX( THREE.Math.degToRad( 90 ) ) );
  // Make a mesh with the geometry
  var mesh = new THREE.Mesh( geometry, material );
  // Position it where we want
  mesh.position.copy( from.sceneObject.position );
  // And make it point to where we want
  mesh.lookAt( to.sceneObject.position );