Question

点击它时，我想在对象上放置箭头。

JsFiddle比长篇解释更好：

我的来源：https://github.com/mrdoob/three.js/issues/1486

它在表面的上半部分很好用，但在下半部分有缺陷，我不明白为什么。当法线的角度很低时，它似乎会出现问题。如果你尝试这样的球体，那么效果很好：

new T.SphereGeometry(1, 3, 2)

先谢谢你

Answer 1

如果您记录轴axis.length()的长度，您会注意到它从up增加角度时会减小。从底部开始，它仍然接近第3行的1，但是在第二行是0.7。

更改

var axis = new T.Vector3().crossVectors(up, normal)
.normalize(); //add this

它会起作用

为了安全起见，您可以在转换后始终对这些轴，法线等进行标准化，然后进行优化。交叉产品的大小取决于角度，并且您在期望它是单位长度的操作中进一步使用它。

Answer 2

那个函数orientAlongNormal做了太多的数学事情。如果我用它替换它：

function orientAlongNormal(object, coords, normal, scalar) {

  var up = new T.Vector3(0, 0, 1);
  object.up = up;//Z axis up

  //create a point to lookAt
  var newPoint = new THREE.Vector3(
      coords.x + normal.x,
      coords.y + normal.y,
      coords.z + normal.z
  );

  //aim object in direction of vector "normal" using lookAt
  object.lookAt(newPoint ); 

  //in this case the cone model is a bit wrong so we have to rotate it by 90 degrees
    object.rotateX( 0.5*Math.PI );

  //put object to coords
    object.position.addVectors(coords, normal.clone().multiplyScalar(scalar));
}

有效：https://jsfiddle.net/hanalulu/j9Lgeys7/

这个帖子帮助了我：Issue aligning faces in Three.JS from two seperate objects

但关键的问题是你不要自己做复杂的矢量数学，而是在3d引擎中寻找适合你的方法：）

Three.js：在曲面上创建一个对象，并沿着该曲面的法线对齐它

2 个答案: