Javascript ThreeJS，如何使用CSS3Renderer和WebGLRenderer在同一场景中渲染两个对象并使它们重叠？

JSFiddle：

我正在使用CSS3Renderer将图像渲染为背景，并在应用程序中投影为立方体

我想有对象，在中间使用WebGeldRever渲染（稍后我会让他们用射线检测点击）。 看起来（从下面的代码中），WebGlrendered线框（中间随机生成的正方形的线框）仅在旋转视图以具有白色背景时显示，当背景变成CSS3渲染云时，WebGLRenderer渲染的线框消失。有没有办法使线框保持在视图中

我的最终目标是拥有多个浮动对象（例如3d文本），并将链接作为对象属性，稍后将使其可单击（使用光线）。我想使用CSS3渲染器，因为它在mobile vs canvasrenderer上渲染得很好，如果您有任何想法和建议，我将不胜感激。我的小提琴：

var摄像机、场景、渲染器；
变量场景2，渲染器2；
风险值控制；
init（）；
制作动画（）；
函数init（）{
摄像头=新的三个透视摄像头（45，window.innerWidth/window.innerHeight，11000）；
摄像机位置设置（200200200200）；
控件=新的三个轨迹球控件（摄像头）；
场景=新的三个。场景（）；
scene2=新的三个场景（）；
var材料=新的三网格基本材料({
颜色：0x000000，
线框：对，
线框线宽：1，
侧面：三个。双面
});
//
//
对于（变量i=0；i<1；i++）{
var-element=document.createElement（'div'）；
element.style.width='100px'；
element.style.height='100px'；
element.style.opacity=0.5；
element.style.background=new THREE.Color（Math.random（）*0xffffff.getStyle（）；
var object=new THREE.CSS3DObject（元素）；
object.position.x=Math.random（）*200-100；
object.position.y=Math.random（）*200-100；
object.position.z=Math.random（）*200-100；
object.rotation.x=Math.random（）；
object.rotation.y=Math.random（）；
object.rotation.z=Math.random（）；
object.scale.x=Math.random（）+0.5；
object.scale.y=Math.random（）+0.5；
场景2.添加（对象）；
var几何=新的三个平面几何（100100）；
var mesh=新的三个网格（几何体、材质）；
mesh.position.copy（object.position）；
网格.旋转.复制（对象.旋转）；
mesh.scale.copy（object.scale）；
场景。添加（网格）；
}
//
变量边=[{
网址：'http://threejs.org/examples/textures/cube/skybox/px.jpg',
位置：[-1024,0,0]，
旋转：[0，Math.PI/2，0]
}, {
网址：'http://threejs.org/examples/textures/cube/skybox/nx.jpg',
位置：[1024,0,0]，
旋转：[0，-Math.PI/2，0]
}, {
网址：'http://threejs.org/examples/textures/cube/skybox/py.jpg',
位置：[0,1024,0]，
旋转：[Math.PI/2,0，Math.PI]
}, {
网址：'http://threejs.org/examples/textures/cube/skybox/ny.jpg',
位置：[0，-1024，0]，
旋转：[-Math.PI/2,0，Math.PI]
}, {
网址：'http://threejs.org/examples/textures/cube/skybox/pz.jpg',
位置：[0,0,1024]，
旋转：[0，Math.PI，0]
}, {
网址：'http://threejs.org/examples/textures/cube/skybox/nz.jpg',
位置：[0,0，-1024]，
旋转：[0,0,0]
}];
对于（变量i=0；i

您正在重叠的画布元素中使用

css3drender

和

WebGLRenderer

您需要确保

WebGLRenderer

的背景是透明的。遵循以下模式：

renderer = new THREE.WebGLRenderer( { alpha: true } ); // required
renderer.setClearColor( 0x000000, 0 ); // the default
renderer.setPixelRatio( window.devicePixelRatio );
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 );

---

three.js r.120

这太好了，非常感谢您为我将其分解。但是

轨道控制

不能使用

位置：绝对

？

渲染器

只是用

renderer.doElement.style.position='absolute'

隐藏了

渲染器2

，即使是

{alpha:true}

也不能与React或Node.js中的npm包

three

和

three-css3drenderer

一起工作。

renderer = new THREE.WebGLRenderer( { alpha: true } ); // required
renderer.setClearColor( 0x000000, 0 ); // the default
renderer.setPixelRatio( window.devicePixelRatio );
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 );