WebGL Three.js在画布Div可见之前，不会加载某些内容

WebGL Three.js Something is not loaded until canvas Div is made visible

本文关键字：加载 js Three Div WebGL 更新时间：2024-06-27

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

这三个画布位于一个自定义滑块内，该滑块一次只显示一个完全窗口大小的画布。我遇到的问题是，即使我在初始化期间加载了三个视图，也有一些东西不会加载到不可见的webgl画布中，直到我滑到它，然后它才会被加载和显示。当我说已加载时，我指的是渲染中的某些内容，因为场景和所有方法从一开始就可以正确工作。

我检测到这一点是因为在第一次滑动到这个div的过程中，它需要一些时间，并且在这段时间内控件会卷曲，用户真的不知道他是否正确点击了，因为"下一次滑动"按钮的活动状态直到这个未知加载结束才被激活。幻灯片动画也被跳过，可能是因为加载比滑动花费更多的时间。一旦它显示了一次，行为就是正确的，它会从一个视图快速滑动到下一个视图。

即使画布在屏幕外，渲染或浏览器中是否有强制加载的选项？理想情况下，只有在初始化期间，因为我不希望GPU渲染没有显示的东西，只需预加载它们。

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

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