StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POThree.js - How to rotate an object to lookAt one point and orient towards another
text
Body
copied!<p>I'm new to three.js and 3d programming in general, so this may seem like a very simple question. Ideally, I hope the answer can help me understand the underlying principles.</p> <p>I have an object that needs to "point" at another point (the origin, in this case, for simplicity), which can be done easily with the <code>Object3D.lookAt(point)</code> function. This points the Z axis of the object at the point nicely.</p> <p>I also want to rotate my object, called <code>looker</code>, around its Z axis such that its X axis points generally towards another object, <code>refObj</code>. I know that the X axis can't point directly at the <code>refObj</code> unless that object happens form a right angle with the origin. I want the X axis of <code>looker</code> to lie on the plane created by <code>origin</code>, <code>refObj</code> and <code>looker</code>, as diagramed below:</p> <p><img src="https://i.stack.imgur.com/vAXIA.png" alt="diagram of problem"></p> <p>The simplest way of doing the rotation would seem to be to modify <code>looker.rotation.z</code>, but I don't know how to calculate what the value should be.</p> <p>In general, I would like an extended version of the <code>lookAt</code> function which takes a second coordinate to which the X axis would be oriented. Something like this:</p> <pre><code>function lookAtAndOrient(objectToAdjust, pointToLookAt, pointToOrientXTowards) { // First we look at the pointToLookAt objectToAdjust.lookAt(pointToLookAt); // Then we rotate the object objectToAdjust.rotation.z = ??; } </code></pre> <p>I have created a <a href="http://jsfiddle.net/rQasN/5/" rel="nofollow noreferrer">jsFiddle with the example diagramed above</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload