我正在创建一个非常简单的3D环境,旨在在手机上运行。为此,我使用了three.js和CSS3渲染器。我正在为所有元素使用jpgs,然后将它们添加到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;
想想像经典的Wolfenstein游戏一样的3D环境。
体验在iPhone5上完美运行,但是当我在Android设备上测试时,我遇到了一些深度问题。在动画过程中,远处的墙壁会突然出现在前景中,并且会进出深度闪烁。
在我对这个问题的研究中,我真正发现的是Android确实存在一些z-index问题,但我不确定这是否存在问题,因为threejs使用css3 3D进行深度研究。
我进入了三个IRC聊天室,并且问了这个问题但是并没有真正到达任何地方,大多数人都对WebGL而不是CSS3渲染器感兴趣。
以前有人经历过这个吗?这是Android手机的特定限制吗?
感谢。
编辑: 移动设备上的Chrome v18存在CSS3D翻译的主要问题。这似乎是一个已知的错误,http://krpano.com/docu/html5/#androidchrome。
仍然在使用Android上的标准浏览器。仍然非常马车但不像Chrome v18那么糟糕。