Three.js: 通过球体上的点建立切平面

Question

我正在尝试在 Three.js (v0.129) 中与球体表面的特定点相交的球体上建立一个切平面。我的算法如下：

获取球心；
找到通过给定点的半径向量；
找到半径矢量的法线
求半径向量和法向量的乘积，因为2个向量的乘积应该是垂直于两个向量的向量；
获取乘积向量和法向量的端点并通过这些点构建一个平面 - 这应该是切平面。

但由于某些原因，乘积并不总是垂直于半径和法向量。而且我不明白为什么，我试图为所有矢量构建线条以将其可视化，但我得到以下信息：

问题是我做错了什么？或者有没有更好的方法来构建通过给定点的球体的切平面？

我的代码如下：


const createTangentPlane = (point: THREE.Vector3, sphere: Entity) => {
sphere.object3D.updateMatrixWorld();

sphere.object3D.updateMatrix();

const center = sphere.object3D.position;
const radiusVector = new THREE.Vector3().subVectors(point, center).normalize();
const radiusNormal = radiusVector
    .clone()
    .applyAxisAngle(new THREE.Vector3(0, 0, 1), Math.PI * 0.5)
    .normalize();
const a = radiusNormal.clone().normalize().setLength(10).add(point);
const b = radiusNormal.clone().normalize().negate().setLength(10).add(point);
const orthogonalVector = radiusVector.clone().cross(radiusNormal);
const a1 = orthogonalVector.clone().setLength(10).add(point);
const b1 = orthogonalVector.clone().negate().setLength(10).add(point);

createLine(([a1, b1]);
createLine([a, b]);
createLine([center, point]);

//createPlaneFrom4Points([a, a1, b1, b]);

}

Answer 1

鉴于：

three.js r130（r129应该没问题）
球体的位置
球体表面的“切点”（假设是Vector3）

假设：

球体位置在世界坐标中
切点也在世界坐标中

let normal = new THREE.Vector3().copy( tangentPoint )
normal.sub( sphere.position ) // remove sphere translation

let plane = new THREE.Mesh(
  new THREE.PlaneGeometry( sphere.radius, sphere.radius )
  new THREE.MeshBasicMaterial( { color: 'red' } )
)
plane.lookAt( normal )
plane.position.copy( tangentPoint )

Three.js: 通过球体上的点建立切平面

Three.js: building a tangent plane through point on a sphere

javascript

math

geometry

three.js