Javascript Three.js css3d-添加球体对象的周期表

我刚刚开始学习Three.js，目前正在试用css3d-周期表演示。在演示中，我希望在球体周期表的中心添加一个额外的球体对象，但我不知道如何添加。也许有人能帮我吗

---

将球体网格添加到

CSS3DObject

s的球体中是有问题的，因为WebGL和HTML/CSS元素是独立呈现和排序的。这意味着即使球体网格在元素标签前面，元素标签仍然可见。下面的示例演示了这一点，它只是官方演示的增强版

基本思想是创建两个渲染器，并将它们的

domElement

属性放置在彼此的顶部，如下所示：

//WebGL
rendererWebGL=new THREE.WebGLRenderer（{antialas:true}）；
RenderWebGL.setPixelRatio（window.devicePixelRatio）；
RenderWebGL.setSize（window.innerWidth、window.innerHeight）；
container.appendChild（renderWebGL.doElement）；
//CSS
renderer=new css3drender（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
renderer.doElement.style.position='absolute'；
renderer.doElement.style.top=0；
document.getElementById（'container'）.appendChild（renderer.doElement）；

然而，即使这样做也无法解决上述视觉故障

---

考虑使用简单的平面网格而不是HTML/CSS元素来实现周期系统（因此您只使用

WebGLRenderer

）。

球体对象应该是网格还是CSS3D对象？只是普通网格谢谢！因此，使用两个渲染器会发生冲突，最好使用WebGLRenderer，但只是想知道额外的球体是否在CSS3d中，它是否也会工作？请检查：我对您的演示进行了一些实验，当您将：new THREE.SphereGeometry设置为800时，会产生球体位于中心的错觉。现在我有一个后续问题，你可能知道如何创建一个动画，让周期表球体和所有元素围绕其中心旋转吗？