Three.js : 在一个表面上创建一个对象，并沿着这个表面的法线对齐答案

【问题标题】：Three.js : Create an object on a surface and align it along the normal of this surfaceThree.js : 在一个表面上创建一个对象，并沿着这个表面的法线对齐
【发布时间】：2017-09-20 15:10:09
【问题描述】：

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

一个 JsFiddle 胜过冗长的解释：

https://jsfiddle.net/p820c246/4/

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

它在表面的上部运行良好，但在下部却出现错误，我不明白为什么。当法线的角度太低时，它似乎会出错。如果您尝试使用这样的球体，效果会很好：

new T.SphereGeometry(1, 3, 2)

提前谢谢你

【问题讨论】：

标签： three.js alignment normals

【解决方案1】：

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

改变

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

它会起作用的

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

【讨论】：

谢谢 Pailhead，这正是我所需要的 :)

【解决方案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 引擎中为您寻找方法:)

【讨论】：

crossVectors, setFromRotationMatrix 都是3d引擎的方法:)
您是否刚刚对我的工作答案投了反对票？我不是以英语为母语的人，我将代码重写为 KISS，这是我想说的
一点也不。我想取消反对票，但我这样做主要是因为您更改了他的代码太多。如果该示例使用叉积来获得方向，并且该方向用于旋转，我认为应该解决数学问题（归一化），而不是改变整个方法。
感谢您的帮助。它更好，但并不完全令人满意。它适用于常规领域，但看看这个：jsfiddle.net/j9Lgeys7/2 但在某些情况下它可能是一个很好的 hack。
我投票支持 :) 我不同意“数学太多”的说法，如果将其编辑为“这是另一种方法”，我将不胜感激