Solved

THREE.js rotating cylinders and fittings

Posted on 2013-12-28
5
879 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Transaction Monitoring Vs. Real User Monitoring

Synthetic Transaction Monitoring Vs. Real User Monitoring: When To Use Each Approach? In this article, we will discuss two major monitoring approaches: Synthetic Transaction and Real User Monitoring.

Question has a verified solution.

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

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
This is a video describing the growing solar energy use in Utah. This is a topic that greatly interests me and so I decided to produce a video about it.

691 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