Solved

THREE.js rotating cylinders and fittings

Posted on 2013-12-28
5
848 Views
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?

Example
0
Comment
Question by:mbeis
5 Comments
 
LVL 8

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.
0
 
LVL 84

Accepted Solution

by:
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
0
 
LVL 12

Assisted Solution

by:satsumo
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.
0

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
How can I repeat this modal box over and over again...? 2 24
alert(innerHTML); 8 32
Make Session back to empty 9 30
return false must be hit after calling certain command 10 31
Artificial Intelligence comes in many forms, and for game developers, Path-Finding is an important ability for making an NPC (Non-Playable Character) maneuver through terrain.  A* is a particularly easy way to approach it.  I’ll start with the algor…
When we purchase storage, we typically are advertised storage of 500GB, 1TB, 2TB and so on. However, when you actually install it into your computer, your 500GB HDD will actually show up as 465GB. Why? It has to do with the way people and computers…
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…
I've attached the XLSM Excel spreadsheet I used in the video and also text files containing the macros used.

792 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