search

vasturiano / three-globe

WebGL Globe Data Visualization as a ThreeJS reusable 3D object
https://vasturiano.github.io/three-globe/example/links/
MIT License
1.22k stars 147 forks source link

Add class names to CSS2DObjects #65

Closed hellomichael closed 1 year ago

hellomichael commented 1 year ago

Description

The problem: CSS2DObjects are currently hidden/shown using display: none with no alternatives for custom css animations.

There's an open pr to three.js to update CSS2DRenderer, however it was suggested to make this update to the application level instead.

The solution: Adding a class attribute will allow developers to override with css transitions if necessary.

.css-object {
  display: block !important;
  pointer-events: none;
  opacity: 0;
  transition: 500ms opacity;

  &.visible {
    opacity: 1;
    pointer-events: all;
  }
}
vasturiano commented 1 year ago

@hellomichael thanks for your PR. As mentioned in the comment, you should be able to add these classnames in your app itself. Thus, there isn't anything to do on this repo.