WebGL Three.js 在 canvas Div 可见之前未加载某些内容
WebGL Three.js Something is not loaded until canvas Div is made visible
我有一个 HTML5 应用程序使用 3 个 canvases，其中两个包含使用 Three.js
渲染的 WebGL 3D 场景
这三个 canvas 位于一个自定义滑块内，该滑块当时仅显示一个 canvas 完整 window 大小。我遇到的问题是，即使我在初始化期间加载了三个视图，在不可见的 webgl canvas 中也有一些东西没有加载，直到我滑动到它，然后它被加载并显示。当我说加载时，我指的是渲染中的某些东西，因为场景和所有方法从一开始就正常工作。
我检测到这个是因为在第一张幻灯片到这个 div 时，它需要一些时间并且控件在这段时间变得毛躁，用户真的不知道他是否正确点击，因为"slide next" 按钮直到未知加载结束才被激活。幻灯片动画也被跳过，可能是因为加载比滑动花费更多时间。一旦显示一次，行为就是正确的，它会从一个视图快速滑动到下一个视图。
即使 canvas 不在屏幕上，渲染器或浏览器中是否有强制加载的选项？理想情况下只在初始化期间因为我不希望 GPU 渲染未显示的内容，只需预加载它们即可。
如果您使用一些阻塞标志来避免在满足某些条件时更新和渲染场景，请确保在站点初始化期间允许每个渲染器至少有一个 requestAnimationFrame 循环。在第一个周期中，完成了一些耗时的初始化，如果我们第一次渲染场景直到我们需要它的那一刻，它必须在那一刻进行初始化，这可能会扰乱您网站的响应能力：
例如一个包含 3 个场景的滑块，每次只显示一个场景；使用阻塞系统只更新当前显示的场景。如果我们不允许三个场景都初始化，那么只有在site loading时显示的场景已经初始化了，这意味着如果我们滑动到其他场景之一，它们将不得不与滑动动画同时初始化被触发。由于初始化时间比动画长，第一次显示该场景时，滑动效果丢失，出现闪烁；在那之后，行为将是正确的，因为该场景已经初始化。
我有一个 HTML5 应用程序使用 3 个 canvases，其中两个包含使用 Three.js
渲染的 WebGL 3D 场景这三个 canvas 位于一个自定义滑块内，该滑块当时仅显示一个 canvas 完整 window 大小。我遇到的问题是，即使我在初始化期间加载了三个视图，在不可见的 webgl canvas 中也有一些东西没有加载，直到我滑动到它，然后它被加载并显示。当我说加载时，我指的是渲染中的某些东西，因为场景和所有方法从一开始就正常工作。
我检测到这个是因为在第一张幻灯片到这个 div 时，它需要一些时间并且控件在这段时间变得毛躁，用户真的不知道他是否正确点击，因为"slide next" 按钮直到未知加载结束才被激活。幻灯片动画也被跳过，可能是因为加载比滑动花费更多时间。一旦显示一次，行为就是正确的，它会从一个视图快速滑动到下一个视图。
即使 canvas 不在屏幕上，渲染器或浏览器中是否有强制加载的选项？理想情况下只在初始化期间因为我不希望 GPU 渲染未显示的内容，只需预加载它们即可。
如果您使用一些阻塞标志来避免在满足某些条件时更新和渲染场景，请确保在站点初始化期间允许每个渲染器至少有一个 requestAnimationFrame 循环。在第一个周期中，完成了一些耗时的初始化，如果我们第一次渲染场景直到我们需要它的那一刻，它必须在那一刻进行初始化，这可能会扰乱您网站的响应能力：
例如一个包含 3 个场景的滑块，每次只显示一个场景；使用阻塞系统只更新当前显示的场景。如果我们不允许三个场景都初始化，那么只有在site loading时显示的场景已经初始化了，这意味着如果我们滑动到其他场景之一，它们将不得不与滑动动画同时初始化被触发。由于初始化时间比动画长，第一次显示该场景时，滑动效果丢失，出现闪烁；在那之后，行为将是正确的，因为该场景已经初始化。