javascript - 如何告诉 tween.js 等待纹理在 Three.js 中显示

Question

我在使用 Three.js 与 tween.js 时遇到问题。问题是，tween.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;
});

Answer 1

您需要将房间可见性代码与 tween.start() 代码结合在一起。

我假设您在代码中的某个位置调用了loadTexture()。第三个参数是在成功加载纹理时调用的回调。所以我会做一些事情来达到以下效果:

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

    // do the tween
}

更新:

另一个选择是在补间之前或在更改球体可见性的代码之后添加渲染调用。这样至少可以通过纹理几何体一次。