I’m currently learning to draw basic shapes using three.js. I now need to draw a torus at a specified position, and I always know the following parameters about the torus:
const targetData = {
a: [1.78, 6.29, 0],
b: [-1.78, 6.29, 0],
tangentA: [0, 0, 1],
tangentB: [0, 0, 1],
c: [0, 6.29, -1.78],
o: [0, 6.29, 0],
tubeRadius: 0.1,
torusRadius: 1.78,
arc: Math.PI,
}
Where a, b, c are three points on the torus, tangentA is the tangent at endpoint a, tangentB is the tangent at endpoint b, o is the center of the torus, tubeRadius is the radius of the tube, torusRadius is the radius of the torus, and arc is the radian of the torus arc. (This is an example set of parameters)
I provided a CodePen example: https://codepen.io/laddishx/pen/QWzXerL
I know I should use three.js docs to implement it:
const geometry = new THREE.TorusGeometry(1.78, 0.1, 120, 64, Math.PI);
// radius - Radius of the torus, from the center of the torus to the center of the tube. Default is 1.
// tube — Radius of the tube. Default is 0.4.
// radialSegments — Default is 12
// tubularSegments — Default is 48.
// arc — Central angle. Default is Math.PI * 2.
However, the torus drawn with THREE.TorusGeometry is always centered at [0,0,0]. I summarized its parameters as:
Copy code
const originData = {
a: [1.78, 0, 0],
b: [-1.78, 0, 0],
tangentA: [0, -1, 0],
tangentB: [0, -1, 0],
c: [0, 1.78, 0],
o: [0, 0, 0],
tubeRadius: 0.1,
torusRadius: 1.78,
arc: Math.PI,
}
I want to know how to do the transformation to move it to the corresponding position. I tried setting the position, then calculating the angle between the target plane and the default initial plane (xy plane), then rotating around the plane to achieve the effect. This works for the current set of parameters, but when my target parameters change, there are many problems and I can’t achieve the desired effect. Is there a general method to do the transformation based on the known parameters?
