JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://mrdoob.github.com/three.js/build/three.min.js"></script>
JavaScript
// Globals
var camera, scene, renderer;
var refObj, looker;
var origin = new THREE.Vector3();
/**
* Looks at and orients an object. This is what I'm trying to figure out.
*/
function lookAtAndOrient(
objectToAdjust,
pointToLookAt,
pointToOrientXTowards
) {
// First we look at the pointToLookAt
objectToAdjust.lookAt(pointToLookAt);
// QUESTION HERE:
// Now, we need to rotate the object around its local Z axis such that its X axis
// lies on the plane defined by objectToAdjust.position, pointToLookAt and pointToOrientXTowards
// objectToAdjust.rotation.z = ??;
}
/**
* Sets up the example problem.
*/
function setupProblem() {
// This is the reference object that we want to orientate our looker to
refObj = new THREE.Mesh(
new THREE.SphereGeometry( 1, 10, 10 ),
new THREE.MeshNormalMaterial()
);
scene.add(refObj);
refObj.position.x = 25;
refObj.position.y = 33;
refObj.position.z = 20;
// This is the object whose Z-axis needs to point at the origin, and whose X
// axis needs to point at refObj
looker = new THREE.AxisHelper(5);
scene.add(looker);
looker.material.linewidth = 3;
looker.position.x = 10;
looker.position.y = 25;
looker.position.z = 30;
// Illustrate the relationship between the three points (origin, ref and looker), showing the plane
// created by them.
var refPlane = new THREE.Geometry();
refPlane.vertices.push(origin);
refPlane.vertices.push(looker.position);
refPlane.vertices.push(refObj.position);
refPlane.faces.push(new THREE.Face3(0, 1, 2));
refPlane.faces.push(new THREE.Face3(2, 1, 0));
var refPlaneMesh = new THREE.Mesh(
refPlane,
new THREE.MeshBasicMaterial({
color: 0xCCCCCC
})
);
scene.add(refPlaneMesh);
// This function should cause the looker to look at the origin and orient its X axis towards
// refObj.
lookAtAndOrient(looker, origin, refObj);
}
init();
animate();
function init() {
camera = new...