如何告诉tween.js等待纹理在three.js中显示

Question

我对three.js和tween.js的组合有问题。问题是，tween.js动画的计时器在球体的纹理显示之前就开始了。

我正在用火狐的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
}

更新

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