如何判斷tween.js是否等待在three.js中顯示紋理

我與three.js結合使用tween.js存在問題。問題是，tween.js動畫的計時器在顯示球體的紋理之前開始。如何判斷tween.js是否等待在three.js中顯示紋理

我正在用Firefox的three.js構建一個全景瀏覽器。全景圖像被映射到一個球體，相機位於其中心。可以改變顯示的全景以虛擬訪問不同的房間（這是通過將不同的紋理變成可見的來完成的）。當房間改變時，用tween.js將光線變成動畫，將房間變暗。然後光線再次上升，並顯示新的全景圖像。

問題是，如果第一次訪問房間，它需要一些時間來顯示圖像。發生這種情況是因爲圖像在顯示之前未被加載到內存中。

如果房間保持黑暗狀態，直到全景圖完全加載到內存並準備顯示，這並不壞。但tween.js的動畫計時器在圖像顯示之前啓動。

結果是，根據需要，光線無法通過動畫慢慢打開，而是需要很短的時間來顯示新的全景圖，然後光線完全打開，而沒有任何動畫。動畫的持續時間設置爲500毫秒，顯示全景圖像需要大致相同的時間。

我的問題是，有沒有辦法知道，何時呈現紋理？這樣我可以在圖像顯示時觸發動畫？

Three.js版本是r71。

//after light turns dark, the panorama is changed and light goes up again 
tweenDarkenLight.onComplete(function() { 

    roomModule.setRoomVisible(); //sets new room visible 

    tweenEnhanceLight.start(); //start of animation to enlighten the scene 
});

所有房間/全景圖紋理都會在應用程序啓動時加載並附加到球體上。但是，直到用戶選擇其中的一個，它們中的每一個都保持不變。

texture = new THREE.Texture(); 

loader = new THREE.ImageLoader(manager); 

//the url for each panorama is stored in roomAssetArray 
loader.load(roomAssetArray.panorama, 

    function (image) { 

    texture.image = image; 
    texture.needsUpdate = true; 
});

來源

2015-11-17 Tenn

你可以提供一個jsfiddle，或者至少分享你加載這個紋理的代碼部分。提及您正在使用的three.js版本也很有幫助。 – Leeft

您需要將您的房間知名度代碼與您的tween.start()代碼結合在一起。

我假設你的代碼中的某個地方叫做loadTexture()。這第三個參數是一個回調，它被稱爲成功加載紋理。所以我會做一些事情來的效果：

texture = THREE.ImageUtils.loadTexture("room.jpg", {}, function() { 
    // room texture has been loaded 

    // do the tween 
}

更新：

另一種選擇是隻補間之前或改變球體的可見性的代碼後添加一個渲染調用。這樣至少會有一次穿過紋理幾何體。

來源

2015-11-17 13:37:40 gaitat

感謝您的回答，但所有圖像都在應用程序的開始時加載。所以所有的紋理都已經從服務器加載，但是它們必須保存在內存中以便毫不拖延地顯示它們。當一個房間被訪問，全景圖像在內存中，可以重新訪問，沒有任何延遲，一切工作正常。 – Tenn

已更新的答案。 – gaitat

如何判斷tween.js是否等待在three.js中顯示紋理

回答

相關問題