THREE.js rotating cylinders and fittings

This is a question regarding 3D rotation using THREE.js and predefined mesh models. All components originate on the <0,0,1> vector as shown on the image. I have no problem getting the cylinders rotated into the correct position. I can also get the fitting rotated to fit the receiving cylinder.  The problem is getting the inlet of the fitting rotated around its own Z-axis to meet the incoming cylinder. Note that the cylinders can be pointing in any direction and the angle between them can be anything from 15 to 90 degrees (using the appropriate fitting. Is it possible to have a single method to rotate the Z-axis regardless of angle?

Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Wojciech DudaCommented:
While I see how this question may be gaming related, you believe you have a higher chance of success asking in either one of the Javascript or 3D Programming Topics.
It looks to me like your coordinates are in the order <red,green,blue>
and that the coordinates for the incoming cylinder are reversed,
and that the Fitting mesh points to <0,0,1> and <0-1,0>

Call  <0,0,1> F0 and <0,-1,0> F1
Call the Receiving Cylinder pointing coordinates C0
and the Incoming Cylinder pointing  coordinates -C1
Let N0 = F0 - C0
Normalize N0 = N0 / |N0|
Let F' = F1 - 2*N0 * (F1 dot N0)  
Let N1 = F' - C1
Normalize N1 = N1 / |N1|
Then let A0 be the reflection matrix along N0 = I-2*N0*N0^T   (where ^T means transpose)
and A1 be the reflection matrix along N1 = I-2*N1*N1^T
A0*A1 should then be a rotation matrix that aligns the fitting to the receiving and incoming cylinders, assuming that the receiving and incoming cylinders are at right angles to each other, and that F0 and F1 are at right angles to each other

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
satsumoSoftware DeveloperCommented:
The diagram is confusing. I assume you're using the usual convention of red is x-axis, green is y-axis, and z-axis is blue. In the top two images, positive z points along the pipe and out of the joint. In the bottom left image, the axis do not relate to the joint mesh at all. It appears that the y-axis runs along the incoming pipe which is inconsistent with the other examples. In the bottom right, the axis appear to be flipped, the z-axis points out of the back of the joint.

To restate the problem, I assume you want a matrix where the y-axis matches the z-axis of the receiving cylinder, and the z-axis matches the z-axis of the incoming cylinder, is that right? Do you also need the position of mesh?

Copy the z-axis (elements 2, 6 and 10) from the two pipe object transforms into two Vector3 objects. Receiving object will give vy and incoming will give vz. Use Vector3.crossVectors with vy and vz to get vx. Then use those vectors to set the transform of the joint object with Matrix4.applyMatrix. You may have to negate vz or vy, depends on which end of the pipe you attach to.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Game Programming

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.