React+threejs两种3D多场景渲染方案

在现代 Web 开发中，3D 可视化需求日益增长，特别是在 React 生态系统中实现多 3D 场景的展示与交互。本文通过对比两种实现方案，探讨 React 中构建多 3D 场景的最佳实践，分析它们的技术特点、性能表现和适用场景。

方案一：React Three Fiber 组件化方案

采用 @react-three/fiber（RTF）框架，将每个 3D 场景封装为独立的 组件，充分利用 React 的组件化思想管理场景元素。

方案二：原生 Three.js 多视口方案

直接使用 Three.js 原生 API，通过单一 Canvas 元素手动管理多个视口。所有场景共享同一个渲染器，利用视口裁剪技术实现多场景并行渲染。

此方案特别适合需要呈现大量 3D 元素且对性能要求较高的场景，如产品展示墙或 3D 数据可视化。通过精细的视口管理和资源优化，可在单个 Canvas 中高效渲染数十至上百个独立 3D 场景。

 在Three.js开发中，多场景渲染是一个常见挑战。以商业网站为例，当需要展示多个3D模型时，开发者往往会为每个模型创建独立的Canvas元素和Renderer实例。也就是本文说的方案一。

然而，这种做法会带来两个显著问题：

1. WebGL上下文数量限制 浏览器通常对WebGL上下文数量设置了8个的上限，超出限制时，系统会自动释放最早创建的上下文。

2. WebGL资源无法共享 不同WebGL上下文之间不能共用资源。例如，当两个Canvas都需要加载相同的10MB模型和20MB纹理时，这些资源会被重复加载两次。这不仅导致初始化、着色器编译等操作重复执行，而且随着Canvas数量增加，性能问题会愈发严重。

另一种解决方案是在整个背景中使用单一Canvas填充视口，并通过其他元素来模拟\"虚拟画布\"(virtual canvas)。具体实现方式是：仅在主Canvas中加载一个Renderer，同时为每个virtual canvas创建独立的场景(Scene)。我们只需确保每个virtual canvas的位置准确，THREE.js就能将它们正确渲染到屏幕对应位置。

这种方法仅使用一个Canvas和一个WebGL上下文，既解决了资源共享问题，又避免了WebGL上下文数量限制的风险。 

 方案一：每个场景拥有独立的Canvas组件（@react-three/fiber）

import { useRef, useEffect, useState } from \'react\'import { Canvas, useFrame } from \'@react-three/fiber\'import { OrbitControls } from \'@react-three/drei\'import * as THREE from \'three\'import { Flex } from \'antd\'import \'./index.less\'type SceneData = { id: number geometry: THREE.BufferGeometry color: THREE.Color}const SceneItem = ({ geometry, color,}: { geometry: THREE.BufferGeometry color: THREE.Color}) => { const meshRef = useRef(null) useFrame(() => { if (meshRef.current) { meshRef.current.rotation.y += 0.01 } }) return (    )}const SceneWithControls = ({ sceneData }: { sceneData: SceneData }) => { return ( <Canvas camera={{ position: [0, 0, 2], fov: 50 }} gl={{ antialias: true }} style={{ width: \'300px\', height: \'300px\' }} >      )}const MultipleElementsDemo = () => { const [scenes, setScenes] = useState([]) useEffect(() => { if (scenes.length === 0) { const geometries = [ new THREE.BoxGeometry(1, 1, 1), new THREE.SphereGeometry(0.5, 12, 8), new THREE.DodecahedronGeometry(0.5), new THREE.CylinderGeometry(0.5, 0.5, 1, 12), ] const newScenes = Array.from({ length: 10 }, (_, i) => ({ id: i + 1, geometry: geometries[Math.floor(Math.random() * geometries.length)], color: new THREE.Color().setHSL(Math.random(), 1, 0.75), })) setScenes(newScenes) } }, [scenes]) return ( 
  {scenes.map((scene) => ( 
  
Scene {scene.id}
 
 ))}  
 )}export default MultipleElementsDemo

代码解析

多Canvas架构：

• 为每个3D场景创建一个独立的组件（共10个）

• 每个Canvas拥有自己独立的WebGL上下文、场景图和渲染循环

场景数据结构：

type SceneData = { id: number geometry: THREE.BufferGeometry color: THREE.Color}

存储几何体和颜色等差异化的场景数据

组件结构：

• SceneWithControls：包装单个场景的完整环境（灯光、控制器等）

• SceneItem：处理单个3D对象的渲染和动画

动态场景生成：

Array.from({ length: 40 }, (_, i) => ({ id: i + 1, geometry: geometries[Math.floor(Math.random() * geometries.length)], color: new THREE.Color().setHSL(Math.random(), 1, 0.75)}))

独立动画控制：

useFrame(() => { meshRef.current.rotation.y += 0.01 // 每个场景独立动画})

性能问题：

• 内存消耗：10个+独立WebGL上下文占用大量内存

• 渲染开销：同时维护10个渲染循环（即使场景不可见）

• GPU资源：重复创建相似资源（如几何体、材质）

方案二：基于原生 Three.js 的多视口实现

import { useRef, useEffect, useState } from \'react\';import * as THREE from \'three\';import { OrbitControls } from \'three/examples/jsm/controls/OrbitControls.js\';import \'./index.less\';// 场景项类型定义type SceneItem = { id: number; geometry: THREE.BufferGeometry; color: THREE.Color; position: [number, number];};// 场景数据初始化const initializeSceneData = () => { const geometries = [ new THREE.BoxGeometry(1, 1, 1), new THREE.SphereGeometry(0.5, 12, 8), new THREE.DodecahedronGeometry(0.5), new THREE.CylinderGeometry(0.5, 0.5, 1, 12), ]; return Array.from({ length: 40 }, (_, i) => { const row = Math.floor(i / 5); const col = i % 5; return { id: i + 1, geometry: geometries[Math.floor(Math.random() * geometries.length)], color: new THREE.Color().setHSL(Math.random(), 1, 0.75), position: [col * 370 + 40, row * 370 + 40] as [number, number], }; });};// 创建单个场景const createScene = (scene: SceneItem, material: THREE.MeshStandardMaterial) => { const sceneObj = new THREE.Scene(); // 创建几何体网格 const mesh = new THREE.Mesh(scene.geometry, material.clone()); mesh.material.color = scene.color; sceneObj.add(mesh); // 添加光照 sceneObj.add(new THREE.HemisphereLight(0xaaaaaa, 0x444444, 3)); const light = new THREE.DirectionalLight(0xffffff, 1.5); light.position.set(1, 1, 1); sceneObj.add(light); return sceneObj;};// 初始化所有场景const initializeScenes = (scenes: SceneItem[]) => { const material = new THREE.MeshStandardMaterial({ roughness: 0.5, metalness: 0, flatShading: true, }); return scenes.map(scene => createScene(scene, material));};// 更新Canvas位置const updateCanvasPosition = (container: HTMLDivElement, canvas: HTMLCanvasElement) => { const containerRect = container.getBoundingClientRect(); canvas.style.transform = `translateY(${window.scrollY}px)`; canvas.style.top = `${containerRect.top}px`;};// 清理资源const cleanupResources = ( animationId: number, renderer: THREE.WebGLRenderer, sceneControls: OrbitControls[], sceneObjects: THREE.Scene[]) => { window.cancelAnimationFrame(animationId); renderer.dispose(); // 清理控制器 sceneControls.forEach(ctrl => ctrl.dispose()); // 清理几何体和材质 sceneObjects.forEach(scene => { scene.traverse(obj => { if (obj instanceof THREE.Mesh) { obj.geometry.dispose(); if (Array.isArray(obj.material)) { obj.material.forEach(m => m.dispose()); } else { obj.material.dispose(); } } }); });};const MultiViewportDemo = () => { const canvasRef = useRef(null); const containerRef = useRef(null); const scenesRef = useRef(null); const [scenes, setScenes] = useState([]); const rendererRef = useRef(null); const animationRef = useRef(0); const sceneCamerasRef = useRef([]); const sceneControlsRef = useRef([]); const sceneObjectsRef = useRef([]); // 初始化场景数据 useEffect(() => { const newScenes = initializeSceneData(); setScenes(newScenes); }, []); // 初始化Three.js和滚动处理 useEffect(() => { if (!scenes.length || !canvasRef.current || !scenesRef.current || !containerRef.current) return; const canvas = canvasRef.current; const container = containerRef.current; // 初始化渲染器 const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, }); rendererRef.current = renderer; // 初始化所有场景 sceneObjectsRef.current = initializeScenes(scenes); // 渲染函数 const render = () => { if (!rendererRef.current) return; const renderer = rendererRef.current; const width = window.innerWidth; const height = window.innerHeight; // 更新渲染器尺寸 if (canvas.width !== width || canvas.height !== height) { renderer.setSize(width, height, false); } // 初始清除 renderer.setClearColor(0xffffff); renderer.setScissorTest(false); renderer.clear(); // 设置公共渲染状态 renderer.setClearColor(0xe0e0e0); renderer.setScissorTest(true); // 渲染每个场景 scenes.forEach((scene, i) => { const element = scenesRef.current?.children[i] as HTMLElement; if (!element) return; const rect = element.getBoundingClientRect(); // 检查是否在可视区域内 if ( rect.bottom  window.innerHeight || rect.right  window.innerWidth ) return; // 计算视口参数 const viewportWidth = rect.right - rect.left; const viewportHeight = rect.bottom - rect.top; const left = rect.left; const bottom = height - rect.bottom; // 初始化相机（延迟初始化） if (!sceneCamerasRef.current[i]) { const camera = new THREE.PerspectiveCamera(50, viewportWidth / viewportHeight, 1, 10); camera.position.z = 2; sceneCamerasRef.current[i] = camera;  // 初始化控制器 const controls = new OrbitControls(camera, element); controls.minDistance = 2; controls.maxDistance = 5; sceneControlsRef.current[i] = controls; } // 更新相机比例 const camera = sceneCamerasRef.current[i]; camera.aspect = viewportWidth / viewportHeight; camera.updateProjectionMatrix(); // 更新控制器 sceneControlsRef.current[i].update(); // 更新场景动画 const mesh = sceneObjectsRef.current[i].children[0] as THREE.Mesh; mesh.rotation.y += 0.01; // 设置视口并渲染 renderer.setViewport(left, bottom, viewportWidth, viewportHeight); renderer.setScissor(left, bottom, viewportWidth, viewportHeight); renderer.render(sceneObjectsRef.current[i], camera); }); animationRef.current = requestAnimationFrame(render); }; // 开始渲染循环 render(); updateCanvasPosition(container, canvas); // 事件监听器 const handleScroll = () => { updateCanvasPosition(container, canvas); }; const handleResize = () => { renderer.setSize(window.innerWidth, window.innerHeight, false); updateCanvasPosition(container, canvas); }; window.addEventListener(\'scroll\', handleScroll); window.addEventListener(\'resize\', handleResize); // 清理函数 return () => { cleanupResources( animationRef.current, renderer, sceneControlsRef.current, sceneObjectsRef.current ); window.removeEventListener(\'scroll\', handleScroll); window.removeEventListener(\'resize\', handleResize); }; }, [scenes]); return ( 
 {/* Three.js画布 */} <canvas ref={canvasRef} id=\"three-canvas\" style={{ position: \'fixed\', left: 0, width: \'100%\', height: \'100%\', zIndex: 0, pointerEvents: \'none\', // 允许穿透到下方元素 }} /> {/* 视口定位元素 */} <div ref={scenesRef} style={{  position: \'relative\', zIndex: 1, width: \'100%\', }} > {scenes.map((scene) => ( <div key={scene.id} className=\"scene-viewport\" style={{  position: \'absolute\',  left: `${scene.position[0]}px`,  top: `${scene.position[1]}px`,  width: \'300px\',  height: \'300px\',  pointerEvents: \'auto\', // 恢复交互 }} > 
Scene {scene.id}
 
 ))}