优化 Three.js：4 个关键技术

代码也可以是艺术。无论是巧妙的语法、优雅的数据结构还是精致的交互，都有只有程序员才能看到的美——这很好。

但代码也可以创造出视觉上令人惊艳的东西，每个人都会欣赏的东西。这就是 Three.js 等工具的闪光点。然而，Three.js 可能很重，尤其是在用于由具有不同计算能力的设备访问的动态网页时。

如果您像我一样，在网站中添加多个 Three.js 场景（就像我在 didof.dev 上所做的那样），则需要进行优化。以下是三种实用技术，可控制性能。

最初发布在我的博客上。

仅在需要时加载场景

如果场景不可见，则不要加载它。这适用于任何繁重的图形组件。最好的工具是，它可以检测元素何时进入视口。以下是我在 SvelteKit 中处理它的方法：

    {#if download}
        
        {#await import('./three-scene.svelte')}
            Loading
        {:then module}
            
        {:catch error}
            
{error}
        {/await}
    {/if}

暂停视野之外的场景

如果场景不可见，则停止渲染。大多数教程都侧重于单个全屏场景，但对于有多个场景的网站，暂停隐藏场景可以节省资源。

以下是使用“IntersectionObserver”控制场景动画循环的代码片段：

function tick() {
    const elapsedTime = clock.getElapsedTime();

    // Update your scene (e.g. set uniforms, move/rotate geometries...)

    renderer.render(scene, camera);
}

// Start the rendering
renderer.setAnimationLoop(tick);

我们的朋友“IntersectionObserver”再次向我们提供帮助。

let clock: THREE.Clock;
let renderer: THREE.WebGLRenderer;

if (browser)
    onMount(() => {
        const observer = new IntersectionObserver(([entry]) => {
            if (entry.isIntersecting) {
                clock.start();
                renderer.setAnimationLoop(tick); // resume
            } else {
                clock.stop();
                renderer.setAnimationLoop(null); // pause
            }
        });
        observer.observe(canvas);

        // Scene setup...

        return () => {
            observer.disconnect();

            // Other cleanup...
        };
    });

根据视口大小调整着色器工作负载

屏幕较小的设备通常性能较差。请相应地调整着色器的计算工作量。例如，根据视口宽度减少分形着色器中使用的八度音阶数量：

const material = new THREE.ShaderMaterial({
    vertexShader,
    fragmentShader,
    uniforms: {
        uOctaves: new Three.Uniform(octaves) // coming as $prop
    }
});

uniform float uOctaves;

for(float i = 0.0; i <= uOctaves; i++)
{
    elevation += simplexNoise2d(warpedPosition * uPositionFrequency * pow(2.0, i)) /  pow(2.0, i + 1.0);
}

这种方法动态平衡了性能和视觉质量。

让浏览器处理清理

事情变得棘手了。**Three.js 不会自动清理内存**，您需要手动跟踪和处理几何图形、纹理和材质等对象。如果您跳过这一步，每次离开和返回时内存使用量都会增加，最终导致浏览器崩溃。

让我分享一下我在我的主页上观察到的内容：

：22.4MB

：28.6MB（即使该页面是静态 HTML）。

：内存使用量持续上升，直到浏览器崩溃。

为什么？因为 Three.js 对象没有得到正确处理。尽管进行了广泛的研究，但我还是找不到一种可靠的方法来完全清理现代框架中的内存。

这是我找到的最简单的解决方案：**离开包含 Three.js 场景的页面时强制硬重新加载**。硬重新加载可让浏览器：

在 `SvelteKit` 中，使用 data-sveltekit-reload 可以轻松实现这一点。只需为具有场景的页面启用它即可：

export function load() {
    return {
        sveltekitReload: true
    }
}

对于导航链接，动态传递此值：

Docs

如果您使用通用的“ ”组件，则只需要实现一次。

这种方法并不完美——它会禁用特定页面的流畅客户端路由——但**它可以控制内存并防止崩溃**。对我来说，这种权衡是值得的。

最后的想法

这些优化对我来说效果很好，但问题仍然存在：我们如何在现代框架中正确清理 Three.js 对象？如果你找到了可靠的解决方案，我很乐意听到你的意见！