HTML5和CSS的混合,html5 – three.js正确混合css3d和webgl

我试图结合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)来运行.

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;

}

three.js - css3d sandbox

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 );

}

这是一个带有代码的fiddle.