携帯電話で実行することを目的とした、かなり単純な 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 環境は、古典的な Wolfenstein ゲームのようなものだと考えてください。
エクスペリエンスは iPhone5 で完全に動作しますが、Android デバイスでテストすると、深度の問題がいくつか発生します。アニメーション中に遠くの壁が前景に飛び出し、深さでちらつきます。
この問題を調査しているときに、Android には z-index の問題があることがわかりましたが、threejs は深さのために css3 3D を使用しているため、ここで問題があるかどうかはわかりません。
私は threejs IRC チャット ルームに参加してこの質問をしましたが、実際にはどこにもたどり着きませんでした。当然のことながら、ほとんどの人は CSS3 レンダラーよりも WebGL に興味を持っています。
誰もがこれを以前に経験したように？これは Android フォン固有の制限ですか?
ありがとう。
編集: モバイルの Chrome v18 には、CSS3D 翻訳に関する大きな問題があります。http://krpano.com/docu/html5/#androidchromeという既知のバグのようです。
Androidの標準ブラウザでまだ苦労しています。まだ非常にバグがありますが、Chrome v18 ほど悪くはありません。