CODEWITHSUNDEEP
three.js
DukeOf1Cat
DukeOf1Cat

Reputation: 1117

Change facing direction of CSS3DObject

I have a 3D scene with a bunch of CSS object that I want to rotate so that they are all pointing towards a point in the space.

My CSS objects are simple rectangles that are a lot wider than they are high:

var element = document.createElement('div');
element.innerHTML = "test";
element.style.width = "75px";
element.style.height = "10px";

var object = new THREE.CSS3DObject(element);

object.position.x = x;
object.position.y = y;
object.position.z = z;

Per default, the created objects are defined as if they are "facing" the z-axis. This means that if I use the lookAt() function, the objects will rotate so that the "test" text face the point.

My problem is that I would rather rotate so that the "right edge" of the div is pointing towards the desired point. I've tried fiddling with the up-vector, but I feel like that wont work because I still want the up-vector to point up. I also tried rotating the object Math.PI/2 along the y axis first, but lookAt() seems to ignore any prior set rotation.

It seems like I need to redefine the objects local z-vector instead, so that it runs along with the global x-vector. That way the objects "looking at"-direction would be to the right in the scene, and then lookAt() would orient it properly.

Sorry for probably mangling terminology, newbie 3D programmer here.

Upvotes: 2

Views: 869

Answers (1)

WestLangley
WestLangley

Reputation: 104783

Object.lookAt( point ) will orient the object so that the object's internal positive z-axis points in the direction of the desired point.

If you want the object's internal positive x-axis to point in the direction of the desired point, you can use this pattern:

object.lookAt( point );
object.rotateY( - Math.PI / 2 );

three.js r.84

Upvotes: 2

Related Questions