1

我有一个使用 3 个画布的 HTML5 应用程序，其中两个包含使用 Three.js 渲染的 WebGL 3D 场景

这三个画布位于一个自定义滑块内，该滑块当时仅以全窗口大小显示一个画布。我遇到的问题是，即使我在初始化期间加载了三个视图，在我滑动到不可见的 webgl 画布之前，还有一些东西没有加载，然后它被加载并显示。当我说加载时，我的意思是渲染中的某些东西，因为场景和所有方法从一开始就可以正常工作。

我检测到这一点是因为在第一次滑动到这个 div 时，它需要一些时间，并且在此期间控件会变得毛躁，用户真的不知道他是否正确单击，因为“幻灯片下一步”按钮的活动状态未激活直到这个未知的加载结束。幻灯片动画也被跳过可能是因为这个加载比滑动花费更多的时间。一旦显示一次，该行为就是正确的行为，它会迅速从一个视图滑到下一个视图。

即使画布不在屏幕上，渲染中是否有选项或浏览器也可以强制执行此加载？理想情况下仅在初始化期间，因为我不希望 GPU 渲染未显示的内容，只需预加载它们即可。

4

1 回答 1

0

如果您使用一些阻塞标志来避免在满足某些条件时更新和渲染场景，请确保在站点初始化期间您允许每个渲染器至少有一个 requestAnimationFrame 循环。在第一个周期中，完成了一些耗时的初始化，如果我们等待第一次渲染场景直到我们需要它的那一刻，它将不得不在那一刻初始化，这可能会扰乱您网站的响应能力：

例如，3 个场景的滑块，每次只显示一个；使用阻塞系统仅更新当前显示的场景。如果我们不允许初始化所有三个场景，只有在站点加载时显示的场景会被初始化，这意味着如果我们滑动到其他场景之一，它们将不得不与滑动动画同时初始化被触发。由于初始化时间比动画长，所以第一次显示该场景时会丢失滑动效果并出现闪烁；之后，行为将是正确的，因为该场景已经初始化。

于 2015-03-03T12:56:35.817 回答