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?
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).