我正在尝试将webgl和css3d场景结合起来，使得两个场景中的对象能够正确地混合在一起。我遵循了这里描述的模式：here，并通过修改three.js示例css3d_sandbox.html创建了一个简单的示例。
在我的版本中，我向webGl场景中添加了一个立方体，并期望它能够与现有平面正确混合，无论该立方体在这些对象的前面还是后面。
我注意到两个异常。第一个是，一旦添加了立方体，当你在周围移动时，平面会以意外的位置消失，就好像远近平面值没有被正确地尊重或对象被错误地确定为在其他东西的后面。
第二个问题是，当使用three.js r67运行时，css3d对象根本不渲染，但针对r61运行时则可以渲染。我尝试用r61替换CSS3DRenderer.js的r67版本，但仍然看不到任何css3d对象。
在r67中，当注释掉将webGl dom作为css3d dom的子元素添加的代码行时，css3d对象会出现。
我希望能得到解决这些问题的任何建议。下面是示例代码，可以通过将其放入任何版本的three.js示例文件夹（例如r61或r67）中来运行。
这是一个包含代码的示例。
在我的版本中，我向webGl场景中添加了一个立方体，并期望它能够与现有平面正确混合，无论该立方体在这些对象的前面还是后面。
我注意到两个异常。第一个是，一旦添加了立方体，当你在周围移动时，平面会以意外的位置消失，就好像远近平面值没有被正确地尊重或对象被错误地确定为在其他东西的后面。
第二个问题是，当使用three.js r67运行时，css3d对象根本不渲染，但针对r61运行时则可以渲染。我尝试用r61替换CSS3DRenderer.js的r67版本，但仍然看不到任何css3d对象。
在r67中，当注释掉将webGl dom作为css3d dom的子元素添加的代码行时，css3d对象会出现。
我希望能得到解决这些问题的任何建议。下面是示例代码，可以通过将其放入任何版本的three.js示例文件夹（例如r61或r67）中来运行。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
background-color: #ffffff;
margin: 0;
overflow: hidden;
}
#info {
position: absolute;
top: 0px;
width: 100%;
color: #000000;
padding: 5px;
font-family: Monospace;
font-size: 13px;
text-align: center;
z-index: 1;
}
a {
color: #000000;
}
</style>
</head>
<body>
<div id="info"><a href="http://threejs.org" target="_blank">three.js</a> - css3d sandbox</div>
<script src="../build/three.min.js"></script>
<script src="js/controls/TrackballControls.js"></script>
<!--<script src="js/renderers/CSS3DRenderer-r61.js"></script>-->
<script src="js/renderers/CSS3DRenderer.js"></script>
<script>
var camera, sceneGl, rendererGl;
var sceneCss, rendererCss;
var controls;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 200, 200, 200 );
controls = new THREE.TrackballControls( camera );
sceneGl = new THREE.Scene();
sceneCss = new THREE.Scene();
var material = new THREE.MeshBasicMaterial( { color: 0x000000, opacity : 0.0 } );
material.blending = THREE.NoBlending;
//
var xpos = [50, -10, 30, 70, 110];
var ypos = [60, -40, 0, 40, 80];
var zpos = [-30, -50, 0, 50, 100];
for ( var i = 0; i < 5; i ++ ) {
var element = document.createElement( 'div' );
element.style.width = '100px';
element.style.height = '100px';
element.style.opacity = 1.0;
element.style.background = new THREE.Color( Math.random() * 0xffffff ).getStyle();
var object = new THREE.CSS3DObject( element );
object.position.x = xpos[i];
object.position.y = ypos[i];
object.position.z = zpos[i];
object.rotation.x = Math.PI/(i + 5);
object.rotation.y = Math.PI/(21 - 2 * i);
object.rotation.z = Math.PI/(3 * i + 25);
object.scale.x = i/12 + 0.5;
object.scale.y = 1/ (12 - i) + 0.5;
sceneCss.add( object );
var geometry = new THREE.PlaneGeometry( 100, 100 );
var mesh = new THREE.Mesh( geometry, material );
mesh.position.copy( object.position );
mesh.rotation.copy( object.rotation );
mesh.scale.copy( object.scale );
sceneGl.add( mesh );
}
//
var boxGeom = new THREE.CubeGeometry( 60, 60, 60 );
var cubeMaterial = new THREE.MeshBasicMaterial(
{ color: 0x05009A, shading : THREE.FlatShading, side: THREE.FrontSide } );
var cube = new THREE.Mesh( boxGeom, cubeMaterial );
cube.position.copy( new THREE.Vector3(100, 75, 50) );
cube.rotation.copy( Math.PI/ 6 );
sceneGl.add( cube );
rendererCss = new THREE.CSS3DRenderer();
rendererCss.setSize( window.innerWidth, window.innerHeight );
rendererCss.domElement.style.position = 'absolute';
rendererCss.domElement.style.top = 0;
rendererGl = new THREE.WebGLRenderer();
rendererGl.setClearColor( 0xf0f0f0 );
rendererGl.setSize( window.innerWidth, window.innerHeight );
rendererGl.domElement.style.position = 'absolute';
rendererGl.domElement.style.zIndex = 1;
rendererGl.domElement.style.top = 0;
rendererCss.domElement.appendChild( rendererGl.domElement );
document.body.appendChild( rendererCss.domElement );
}
function animate() {
requestAnimationFrame( animate );
controls.update();
rendererGl.render( sceneGl, camera );
rendererCss.render( sceneCss, camera );
}
</script>
</body>
</html>
这是一个包含代码的示例。