GaussianSplats3D在NextJS中的集成问题与解决方案

GaussianSplats3D在NextJS中的集成问题与解决方案

问题背景

GaussianSplats3D是一个用于渲染3D高斯点云数据的JavaScript库。在将GaussianSplats3D集成到NextJS应用中时，开发者遇到了一个特定问题：当NextJS处于开发模式(development)且启用了React严格模式(reactStrictMode)时，会出现"signal is aborted without reason"的错误。这个错误在生产模式下不会出现，或者当关闭严格模式时也不会出现。

问题分析

这个问题本质上与React严格模式下的双重渲染机制有关。在严格模式下，React会故意执行两次渲染以帮助开发者发现潜在问题。这种机制导致了以下情况：

1. 第一次渲染创建了GaussianSplats3D的Viewer实例
2. 紧接着React立即执行清理函数(dispose)
3. 然后第二次渲染再次创建Viewer实例

在这个过程中，第一次创建的Viewer实例在被清理时，其内部的AbortController被调用，但没有提供适当的reason参数，导致了错误。

解决方案演进

初步解决方案

最初的解决方案是简单地在清理时添加延迟：

setTimeout(() => {
  viewer.dispose()
    .catch(err => console.log("error disposing of GS3 viewer:", err));
}, 3000);

这种方法虽然有效，但不够优雅，且在生产环境中不需要延迟。

库层面的改进

GaussianSplats3D的作者随后在库层面进行了以下改进：

1. 在Viewer.dispose()方法中添加了防止重复清理的检查
2. 确保AbortController.abort()调用时提供有效的reason参数
3. 改进了场景加载过程中的异常处理机制

推荐的React组件实现

基于最新的GaussianSplats3D版本(0.4.4及以上)，推荐使用以下React组件实现：

import * as THREE from "three";
import React, { useState, useEffect } from "react";
import * as GaussianSplats3D from "@mkkellogg/gaussian-splats-3d";

export function SplatsView({ sources, options }) {
  const [scene] = useState(() => new THREE.Scene())

  useEffect(() => {
    const viewer = new GaussianSplats3D.DropInViewer({
      sharedMemoryForWorkers: false,
      showLoadingUI: false,
    });

    const addParams = sources.map((source, index) => {
      const params = { path: source };
      Object.assign(params, (options && options.length > index) ? options[index] : {});
      return params;
    });

    scene.add(viewer);

    viewer.addSplatScenes(addParams, false)
      .catch((err) => {
        console.log("Error loading splat scenes:", err);
      });

    return () => {
      viewer.dispose()
        .catch((err) => {
          console.log("Error disposing of splats viewer:", err);
        });
    };
  }, []);

  return <primitive object={scene} />;
}

关键点总结

1. 严格模式兼容性：React严格模式下的双重渲染机制需要特别处理资源初始化和清理逻辑。

2. 资源清理顺序：确保在组件卸载时正确清理3D资源，防止内存泄漏。

3. 错误处理：妥善处理场景加载和清理过程中可能出现的异常。

4. 性能优化：通过sharedMemoryForWorkers等选项优化性能表现。

最佳实践建议

1. 始终使用最新版本的GaussianSplats3D库，以获得最佳的兼容性和性能。

2. 在开发阶段保持React严格模式启用，以发现潜在问题。

3. 为3D场景的加载和清理添加适当的错误处理逻辑。

4. 考虑使用Three.js的集成方式，如示例中的THREE.Scene和primitive组件。

5. 对于生产环境，确保进行充分的测试，包括快速导航和组件卸载场景。

通过遵循这些指导原则，开发者可以顺利地在NextJS应用中集成GaussianSplats3D，同时保持良好的开发体验和运行时稳定性。