THREE.js rotating cylinders and fittings

Posted on 2013-12-28
Last Modified: 2014-03-03
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?

Question by:mbeis

Expert Comment

by:Wojciech Duda
ID: 39744524
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.
LVL 84

Accepted Solution

ozo earned 250 total points
ID: 39744569
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
LVL 12

Assisted Solution

satsumo earned 250 total points
ID: 39744706
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.

Featured Post

Comprehensive Backup Solutions for Microsoft

Acronis protects the complete Microsoft technology stack: Windows Server, Windows PC, laptop and Surface data; Microsoft business applications; Microsoft Hyper-V; Azure VMs; Microsoft Windows Server 2016; Microsoft Exchange 2016 and SQL Server 2016.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Article by: Nicole
This is a research brief on the potential colonization of humans on Mars.
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Although Jacob Bernoulli (1654-1705) has been credited as the creator of "Binomial Distribution Table", Gottfried Leibniz (1646-1716) did his dissertation on the subject in 1666; Leibniz you may recall is the co-inventor of "Calculus" and beat Isaac…
Finds all prime numbers in a range requested and places them in a public primes() array. I've demostrated a template size of 30 (2 * 3 * 5) but larger templates can be built such 210  (2 * 3 * 5 * 7) or 2310  (2 * 3 * 5 * 7 * 11). The larger templa…

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question