我正在创建一个旨在在手机上运行的相当简单的 3D 环境。为此，我使用了 three.js 和 CSS3 渲染器。我对所有元素使用 jpg，然后将它们添加到 3D 对象中。这是一个例子：
var alley1LeftWall = document.createElement('div');
var alley1LeftImg = document.createElement('img');
alley1LeftWall.style.background = 'rgba(0,0,0,1)';
alley1LeftWall.id = 'alley1LeftWall';
alley1LeftWall.style.width = '1000px';
alley1LeftWall.style.height = '200px';
alley1LeftImg.src = 'img/alley1_left_wall.jpg';
alley1LeftWall.appendChild(alley1LeftImg);
var alley1LeftWall3d = new THREE.CSS3DObject(alley1LeftWall);
alley1LeftWall3d.position.x = -50;
alley1LeftWall3d.position.y = 0;
alley1LeftWall3d.position.z = -700;
alley1LeftWall3d.rotation.x = 0;
alley1LeftWall3d.rotation.y = (Math.PI/180)*90;
alley1LeftWall3d.rotation.z = 0;
将 3D 环境想象成经典的德军总部游戏。
体验在 iPhone5 上运行完美，但是当我在 Android 设备上进行测试时，我遇到了一些深度问题。在动画过程中，远处的墙壁会从前景中弹出并闪烁进出深度。
在我研究这个问题的过程中，我真正能发现的是 Android 确实存在一些 z-index 问题，但我不确定这是这里的问题，因为threejs 使用 css3 3D 来获得深度。
我在 threejs IRC 聊天室问了这个问题，但没有真正得到任何结果，可以理解的是，大多数人对 WebGL 而不是 CSS3 渲染器感兴趣。
以前有人经历过吗？这是 Android 手机的特定限制吗？
谢谢。
编辑：移动设备上的 Chrome v18 在 CSS3D 翻译方面存在重大问题。这似乎是一个已知的错误， http: //krpano.com/docu/html5/#androidchrome。
仍在为 Android 上的标准浏览器苦苦挣扎。仍然非常有问题，但没有 Chrome v18 那样糟糕。