CSS3D Object flip 180 degree while rotate the scene

Questions
1

Hi Guys,

Here are some descriptions regarding my question.
There is CSS3DObject in my project and I want it always face towards to viewer in Z axis.
But when I rotate the scene, it will suddenly flip 180 degree in Y axis. Please see attached two pictures
Here are the code for this part:

if (this.cssScene.children.length > 0) {
const position = this.camera.position.clone();
for (let i = 0; i < this.cssScene.children.length; i++) {
position.z = this.cssScene.children[i].position.z;
this.cssScene.children[i].lookAt(position);
}
}

Could you please give me some advice how to solve this?

image
image

2

instead of lookAt, you can copy the cameras quaternion

see lines 416-418 in this modified threejs example

objects.forEach((o) => {
	o.quaternion.copy(camera.quaternion); 
})
3

Hi Mr. seanwasere,

Thanks a lot for your quick reply in the weekend.
I will try to study the example.

4

Hi Mr. seanwasere

Sorry to bother you again.
I used cameras quaternion instead of lookAt, and here comes another question.
It seems with the quaternion coordinates, rotation properties of CSS3D object are not valid anymore, how can I rotate the object in attached picture 90 degree in X axis? Can you give me some advice again?
this.cssScene.children.forEach((o) => {
o.useQuaternion = true;
quaternion.x = 0;
quaternion.y = 0;
o.quaternion.copy(quaternion);
})

image
image292×557 40.4 KB

If I use the following code, CSS3D object will always face the viewer, but as you can see from second picture, the line (also CSS3D object) will also rotate accordingly
this.cssScene.children.forEach((o) => {
o.useQuaternion = true;
o.quaternion.copy(quaternion);
})

image
image230×536 40.4 KB

5

I looked at your original question again and I still dont really get it.
Maybe create a minimal working example that shows exactly the problem.

In the meantine, here is a rework of one of my old demos. The CSS3D objects looks at the character when you walk it around, and they don’t flip upside down.

image

link : SBEDIT : Online Code Editor

1 Like
6

Hi Mr.seanwasere,

Thanks for your patience.
I have created my question based on your first example. If I rotate the scene, CSS3D will flip 180 degree.
I only want CSS3D face towards to viewer in Z axis.
Could you please kindly check and give me some advice again when you have a minute?
Thank you again.

7

I don’t know how to fix your problem. Maybe experimeint with quaternions.
If you change a quaternions attribute, then normalize it.

E.g., lines 894-898

8

Hi Mr.seanwasere,

I read official three.js tutorial and there is one sentence which might be the reason.
I will try to replace TrackballControls with OrbitControls and give it a try.
Thanks again for your advice and patience.

image
image1294×257 26.2 KB