2

I've just started learning about Three.js and I'm currently experimenting with the css3d - periodic table demo. Within the demo, I want an extra sphere object in the center of the sphere periodic table added but I can't figure out how. Is there maybe someone that can help me?

css3d - periodic table demo

css3d - periodic table

Mugen87
  • 28,829
  • 4
  • 27
  • 50
yasuperu
  • 77
  • 5

1 Answers1

2

Adding a sphere mesh into a sphere of CSS3DObjects is problematic because WebGL and HTML/CSS elements are rendered and sorted independently. Meaning the element labels will still be visible even when the sphere mesh is in front of them. This is demonstrated by the following example which is just an enhanced version of the official demo.

https://jsfiddle.net/dvop2wrb/

The basic idea is to create two renderers and place their domElement properties on top of each other like so:

// WebGL
    
rendererWebGL = new THREE.WebGLRenderer( { antialias: true } );
rendererWebGL.setPixelRatio( window.devicePixelRatio );
rendererWebGL.setSize( window.innerWidth, window.innerHeight );
container.appendChild( rendererWebGL.domElement );

// CSS

renderer = new CSS3DRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.domElement.style.position = 'absolute';
renderer.domElement.style.top = 0;
document.getElementById( 'container' ).appendChild( renderer.domElement );

However, even when doing so will not solve the mentioned visual glitch.

Consider to implement the periodic system with simple plane meshes instead of HTML/CSS elements (so you only use WebGLRenderer).

Mugen87
  • 28,829
  • 4
  • 27
  • 50
  • thank you very much! So working with the two renderers would clash and it's better to use the WebGLRenderer but just to be curious if the extra sphere would be in CSS3d will it also work? – yasuperu Oct 19 '20 at 13:14
  • Check out: https://stackoverflow.com/questions/45238194/how-can-i-create-pure-css-3-dimensional-spheres – Mugen87 Oct 19 '20 at 13:45
  • I did some experimenting with your demo and when you bump the: new THREE.SphereGeometry to 800 it gives the illusion of the sphere being in the center. Now I have a follow-up question do you perhaps know how to create an animation whereby the periodic table sphere with all the elements rotates around its center? – yasuperu Oct 23 '20 at 13:46