Three.js CSS3DRenderer 可以控制渲染顺序吗？答案

【问题标题】：Three.js CSS3DRenderer possible to control render order?Three.js CSS3DRenderer 可以控制渲染顺序吗？
【发布时间】：2014-12-18 09:26:44
【问题描述】：

我需要能够强制 1 或 2 个元素在场景的其余部分上绘制，无论它们与相机的实际距离如何。

在使用 CSS3DRenderer 时有什么方法可以控制渲染顺序？

我尝试在创建 CSS3DObjects 的 dom 元素上使用 zIndex 和 z-index，但没有任何效果。

object.renderDepth 好像没有效果。

我没有追求使用重叠场景，因为这非常复杂，我认为这不会起作用，因为 CSS3DRenderer 是如何在 dom 内部工作和清除的......

如果这提供了一个简单的解决方案或（不太可能）使事情复杂化，我也在使用 jquery。

【问题讨论】：

标签： javascript jquery three.js

【解决方案1】：

使用CSS3DRenderer 时，您可以通过将元素添加到第二个场景并渲染到第二个画布中来强制在顶部渲染。

renderer = new THREE.CSS3DRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

renderer2 = new THREE.CSS3DRenderer();
renderer2.setSize( window.innerWidth, window.innerHeight );
renderer2.domElement.style.position = 'absolute';
renderer2.domElement.style.top = 0;
document.body.appendChild( renderer2.domElement );

scene.add( object );
scene2.add( object2 );

然后，在动画循环中：

renderer.render( scene, camera );
renderer2.render( scene2, camera );

【讨论】：

这解决了渲染问题，但引发了一个新问题：renderer2 阻止了与第一个渲染器元素的交互，即点击被渲染器 2 吸收，并且永远不会到达渲染器中的任何内容。我通过在 renderer2 的 dom 对象上设置“pointer-events:none”，用一点 CSS 解决了这个问题。不适用于所有浏览器，但应该适用于支持 CSS3DRenderer 的任何浏览器。需要在 render2 中可点击的实体需要“pointer-events:visibleFill”或类似的。