1

我正在创建一个旨在在手机上运行的相当简单的 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 那样糟糕。

4

0 回答 0