3

私は、three.jsを使用してビデオプロバイダー(YouTubeなど)と統合されたCSS3Dインターフェイスを作成することで上司を売り込もうとしています。要件の1つは、モバイルデバイスで表示することです。Androidタブレットは風変わりなので、iPadを選択しました。

私のデモは今週の木曜日に予定されているので、私は彼に素晴らしいcss3d_youtubeデモを見せることが最も速いことだと思いました。

問題は、ジェスチャ(タッチピンチズーム)を使用するように構成されておらず、これを行うのに苦労していることです。

また、背景画像やYouTubeプレーヤーを全画面表示にする機能など、いくつか追加する必要があったため、元のコードを取得して変更する必要がありました。周期表を見たので、コードでTrackBallコントローラーを使用することにしました。あなたは私の修正されたコードをここで見ることができます

トラックボールコントローラーがカメラのy位置をシフトしているようです。タブレットで表示すると、ここで作成した実際のページを確認できます。私はModernizrライブラリを使用して、デバイスがタッチスクリーンであるかどうかを認識したため、デスクトップブラウザを使用しただけではデバイスが表示されません。

さらに役立つ場合は、その状態を削除して、デスクトップブラウザで表示できるようにすることができます。

カメラの位置を台無しにしているコードを削除すると(コード内でModernizr.touchを検索すると、これをどこで行うかがわかります)、ボタンをクリックしたときにカメラがビデオポスター画像の中央に配置されなくなります。

また、次の関数を追加して、通常のJavaScriptジェスチャイベントだけを試しました。

function onPinch(e) {
  move(e.scale)
}

そしてそれをイベントハンドラーで呼び出します:

`document.body.addEventListener('gestureend', onPinch, false)`

しかし、それは惨事でした。CSS3Dオブジェクトのレンダリングは非常に遅くなります。

誰かがピンチズーム機能をcss3dyoutubeデモに追加するのを手伝ってもらえますか?または、少なくとも続行する方法についてアドバイスを提供しますか?Google-ingを介して役立つものを見つけることができませんでした

4

1 に答える 1

1

TrackballControls.jsが更新され、タッチズームジェスチャがサポートされるようです。

他の誰かがこの問題を抱えている場合は、最新バージョンを入手してください。

CSS3D周期表YouTubeの例も更新されているようです。

于 2013-06-25T16:12:35.717 に答える