我正在尝试将webgl和css3d场景结合起来，以便两个场景中的对象正确地融合在一起。我遵循描述here：
的模式并通过修改three.js示例css3d_sandbox.html创建了一个简单示例。
在我的版本中，我已经在webGl场景中添加了一个立方体，并希望它能够与现有的平面正确混合，无论多维数据集是在这些对象的前面还是后面。
我注意到两个异常现象。第一个是，一旦添加了立方体，当你平移时平面就会消失在意想不到的位置，好像远距离和近距离平面值没有被正确识别，或者对象被错误地确定为落后于其他东西。
第二个问题是css3d对象在针对three.js r67运行时根本不渲染，但是在针对r61运行时它们会渲染。我尝试用r61替换r67版本的CSS3DRenderer.js，但仍然没有看到任何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>
以下是带有代码的fiddle。
答案 0 :(得分：7)
评论中的链接很有帮助。正如该解决方案所提到的，将alpha设置为true可解决使用r67获取css3d对象的问题。使webGl背景透明可以解决css3d对象在平移时消失的问题。
链接中提到的解决方案然后将webgl和css3d dom添加为文档的子元素。这种方法在我的案例中不起作用。我发现有必要将webgl dom作为css3d dom的子节点，以便立方体在这些对象的前面和后面都能正确地与平面混合。
以下工作代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
background-color: #ffffff;
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<script src="../build/three.min.js"></script>
<script src="js/controls/TrackballControls.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,
side: THREE.DoubleSide
});
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() * 0xff0000).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.DoubleSide
});
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({alpha:true});
rendererGl.setClearColor(0x00ff00, 0.0);
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>