CODEWITHSUNDEEP
three.js
Cathal Coffey
Cathal Coffey

Reputation: 1117

Behind a THREE.CSS3DObject

I have created an object (a business card) as follows.

var object = new THREE.CSS3DObject( dom );

When the business card is clicked, it rotates 180 degrees about the y axis.

dom.addEventListener( 'click', function ( event ) {
  new TWEEN.Tween( object.rotation )
    .to( { x: 0, y: (object.rotation.y == Math.PI) ? 0: Math.PI, z: 0 }, 1000 )
    .easing( TWEEN.Easing.Exponential.InOut )
    .start();
}, false );

I would now like to design the back of the business card. However, at the moment all I see is the reverse of the front of the business card. How do I design the reverse side of a THREE.CSS3DObject?

On the left is the original business card, on the right is the card after it has been rotated by 180 degrees about the y axis.

enter image description here

Is there anything like the following available?

var object = new THREE.CSS3DObject( dom );
object.doubleSided = true;
object.reverse = new THREE.CSS3DObject( reverseDom);

Upvotes: 1

Views: 2261

Answers (1)

IceCreamYou
IceCreamYou

Reputation: 1882

No -- I haven't dug into the internals of the CSS3D renderer but it's very likely that what you're seeing is a single DOM object with the CSS property transform: rotateY(180deg); or similar.

Since it looks like the CSS3D renderer does not support meshes, a possible solution is to create another CSS3D object that is just barely located behind your card, and contains the "back" of the card. Then, rotate the front and back at the same time. Keep in mind that your "back" needs to be flipped to start with, because otherwise when you flip the card over it will also appear backwards just like the front. You could either design it backwards, rotate it initially 180deg in the opposite direction that you will be flipping the card, or flip the scale (e.g. obj.scale = new THREE.Vector3(-1, 1, 1); Note that flipping the scale can also change the direction of rotation, which could be a problem when rotating in coordination with the front of the card.

To do this simultaneous rotation, besides the obvious manual way, Three.js actually supports object groups (you can .add() objects to other objects) so if you add the back to the front then you can rotate the front as normal and the back will rotate with it.

Upvotes: 1

Related Questions