代码之家 › 专栏 › 技术社区 › Djé Rèm

三js:在曲面上创建一个对象,并沿该曲面的法线对齐

normals alignment three.js

Djé Rèm · 技术社区 · 7 年前

JSFIDLE比冗长的解释更好:

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

它在表面的上部效果很好,但在下部有问题,我不明白为什么。当法线的角度太低时,它似乎会出错。如果您尝试使用这样的球体,效果会很好:

new T.SphereGeometry(1, 3, 2)

提前谢谢你

2 回复 | 直到 7 年前

pailhead 7 年前

如果记录轴的长度 axis.length() 您会注意到,当从 up . 从底部算起,第三排仍然接近1,但第二排接近0.7。

改变

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

为了安全起见,您可以在变换后对这些轴、法线等进行归一化,然后进行优化。叉积的大小取决于角度,在期望叉积为单位长度的运算中进一步使用叉积。

Dominic M 7 年前

该功能 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