Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

CSS3DSprite rotation

See original GitHub issue

I want CSS3DSprite to self-rotate. The rotation is invalid. such as:

const object = new CSS3DSprite( div );

object.rotation.z = Math.PI * 0.5;

The above code does not respond. Strange, don’t know why…

Issue Analytics

State:
Created 2 years ago
Comments:10 (2 by maintainers)

Top GitHub Comments

1reaction

WestLangleycommented, May 13, 2021

Introducing CSS3DSprite.spriteRotation works well in this proof-of-concept:

(link deleted)

Note that, unlike CSS, a positive rotation is counter-clockwise to remain consistent with THREE.Sprite.

1reaction

Mugen87commented, May 10, 2021

Need to think about this. There are multiple approaches how scene graphs libraries can handle the transform portion.

In the meanwhile, we could consider to introduce CSS3DSprite.spriteRotation which is exclusively processed by CSS3DRenderer. This approach has the least impact and can easily be replaced with something else later.

Top Results From Across the Web

three.js CSS3DSprite reflecting at z-axis - Stack Overflow

Every CSS3D sprite in my scene has a reflection, witch appears when I rotate the camera. Is there a way around this?

CSS3DSprite -> three.js actual - CodeSandbox

object.rotation.set(0, 0, 0);. object.scale.set(1, 1, 1);. const sprite = new CSS3DSprite(element1);. sprite.position.set(1.3, 0, 0);. sprite.rotation.set(1 ...

three-css3d - npm

spriteRatio: The ratio for sprite rotation compensation, 1 for full sprite, 0 for normal 3D object. CSS3DSprite.spriteRatio

CSS3DRenderer disable distance scaling of HTML elements

TL;DR: I am trying to get HTML elements to rotate in conjunction ... Creating the CSS3DSprite objects from <li> elements in the HTML...

three.js: examples/css3d_molecules.html - Fossies

( object instanceof CSS3DSprite ) ) { 207 208 object.element.style.height ... 386 387 object = new CSS3DObject( bond ); 388 object.rotation.y = Math....