Question

我在将tri.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
}

<强>更新：

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

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

1 个答案: