1

Three.js を使用する pannellum (http://www.mpetroff.net/archives/2012/08/28/pannellum-1-2/) を使用しており、それを使用してローカル ファイルを操作しています。小さなファイルでは問題なく動作しますが、私が持っている画像は 5000 * 10000 で、それらをロードしません。制限とは何ですか。また、大きな画像で使用するにはどうすればよいですか。img タグを使用して画像をロードし、その画像をアプリケーションに挿入できますか? 私が持っていることがわかったコードで：

var panoimage = new Image();

彼のようなものと交換できますか？

 var panoimage = document.getElementById('PanImage');

Image() のソース コードはどこにありますか? それはJSの一部ですか？このクラスに関する情報は見つかりませんでした。

編集1

pannellum に次の変更を加えて、動的にロードするのではなく、html の画像から画像をロードするようにしました。

pannellum.htm に次の html を追加しました。

 <img id='panimage' src="000063.jpg" style="visibility: collapse;"/>

pannellum.js で、104 行目を次のように変更します。

var panoimage = document.getElementById('panimage');

もコメントアウトしました

panoimage.onerror = function() {

したがって、画像がダウンロードされた後に呼び出されるコードはすぐに呼び出されます（彼のポイントに到達するまでに、画像はすでにダウンロードされているため）

また、画像のソースを設定する行をコメントアウトしました。

画像をダウンロードしません。黒い画面しか表示されません。

4

2 に答える 2

1

さまざまなブラウザが、大きすぎると思われる画像をレンダリングしないようにすることを発見しました（しばらく前に尋ねたこの質問を参照してください）。悲しいことに、これはユーザーエージェントによって異なります。Canvasにはこれに対処するための抽象化がありますが、前回DHTMLで非常に大きな画像を扱っていたときは、あきらめなければなりませんでした（一口サイズの小さな画像にスライスしても、しばらくするとレンダリングされなくなりました）。

new Image()は、ドキュメントの外部に画像要素を最初から作成するための古いDOMメソッドです–ここに記載されています。あなたの最初の行は、次のものと同等です。

var panoimage = document.createElement('img');

置き換えた行は、新しい画像を最初から作成するのではなく、ドキュメント内のすでにどこかにある画像を効果的に取得します。

于 2012-10-02T13:03:52.697 に答える
0

Pannellumのソースコードを見ると、Three.jsのWebGLレンダラーを使っているようです。WebGL には、GPU によって課されるテクスチャ サイズ (したがってレンダリングできる画像サイズ) に制限があります。ここであなたのもの（「最大テクスチャサイズ」）を確認できます：http://jsfiddle.net/DA7wr/

頭に浮かんだもう 1 つのことは、間違った種類のテクスチャ パラメータで非 2 のべき乗の画像サイズを使用していたことですが、Pannellum のデモにも NPOT 画像があるため、これは問題ではないと思います。

于 2012-10-03T08:15:57.240 に答える