I am currently working on constructing a tangent plane on the surface of a sphere at a specific point using Three.js (v0.129). The algorithm I have been following is outlined as follows:
- Locate the center of the sphere;
- Determine the radius vector that intersects the given point;
- Calculate the normal vector to the radius vector;
- Multiply the radius vector by the normal vector, as their product should yield a vector perpendicular to both;
- Identify the endpoints of the product vector and the normal vector to create a plane through those points - this will be the tangent plane.
However, I have encountered an issue where the product vector is not always perpendicular to the radius and the normal vectors. I have attempted to visualize this by drawing lines for each vector, leading to the diagram shown below:
https://i.sstatic.net/xX22e.png
My question is: what mistake am I making in my approach? Is there a more effective method for constructing a tangent plane to a sphere at a specified point?
The code snippet I am using is as follows:
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]);
}