1

私はこのコードを使用しています

 jQuery(document).ready(function () {
    console.log('loaded');
    show();
});

したがって、ページ上のすべてが読み込まれると、プロジェクトを開始する関数が実行されます。ただし、これをThree.JSで使用しており、数mbのモデルにImを読み込んでいます。

スクリプトは数ミリ秒後に「ロード済み」を返しますが、モデルは完全にはロードされていません。さらに、Chromeコンソールは、モデルが完全に読み込まれるまでに数秒かかることを教えてくれます：/

これはそれを回避するための間違った方法ですか？申し訳ありませんが、私はそれにかなり新しいです！

4

4 に答える 4

1

このページ： http： //lightmap.staticloud.com/は、2つのテクスチャがロードされるまで待機してから、レンダリングボタンを表示します。

そのサンプルページのソースコードが役立つかもしれないと思うなら。

var loadCount = 0;

function loadTexture(url) {
    var image = new Image();
    var texture = new THREE.Texture(image);
    image.onload = function() {
        texture.needsUpdate = true;
        console.log("texture " + url + " loaded");
        loadCount++;
        // Enable Render button when both images loaded
        if (loadCount == 2)
            document.getElementById("renderButton").disabled = false;
    };
    image.src = url;
    return texture;
}
于 2012-04-16T12:20:44.200 に答える
0

ドキュメントが読み込まれます。

three.jsは、最初のドキュメントの一部ではないモデルを生成します。これらは、プロジェクトページに示されているように生成されたときにThreeJSによって挿入されます：https ：//github.com/mrdoob/three.js/

次の行に注意してください。

document.body.appendChild( renderer.domElement );
于 2012-04-16T11:32:14.743 に答える
0

jQuery readyイベントは、DOMがロードされた後に発生します。ウィンドウのonloadイベントは、他のすべて（つまり、画像など）がロードされた後に発生します。

于 2012-04-16T11:32:29.037 に答える
0

Thdkによって上記で提供されたloadTexture関数は、基本的に、Three.jsに含まれているImageUtilsソースで提供されているものと同じ関数です。

THREE.ImageUtils.loadTexture関数のソースを見ると、いくつかの小さな変更を除いて、上記のものと同じであることがわかります。テクスチャマッピングとコールバック用の追加パラメータもあります。コールバックは、Imageオブジェクトのonloadイベント内に配置されます。これは、これを利用して、テクスチャが作成されるまでオブジェクトの作成を延期し、アニメートする前にすべてのオブジェクトがロードされていることを確認できることを意味します。

loadTexture: function ( path, mapping, callback ) {

        var image = new Image(), texture = new THREE.Texture( image, mapping );

        image.onload = function () { texture.needsUpdate = true; if ( callback ) callback( this ); };
        image.crossOrigin = this.crossOrigin;
        image.src = path;

        return texture;

    },

コールバックを使用すると、次の方法でコールバックを利用して、目的を達成できます。

THREE.ImageUtils.loadTexture(path1, null, function () {
THREE.ImageUtils.loadTexture(path2, null, function () {
THREE.ImageUtils.loadTexture(path3, null, function () { renderingEnabled = true; }) }) });

次に、アニメーションロジックへの呼び出しとレンダリング呼び出しをで囲みますif(renderingEnabled)。または、すべてを適切に設定した場合は、最後のコールバックからアニメーションループを呼び出すこともできます。

于 2012-06-29T06:29:38.617 に答える