如何将本地加载的NRRD网格集成到React+Three.js画布中？

Hey there! Let’s tackle your two questions one by one—moving vanilla Three.js code to React can feel tricky at first, but once you get the hang of React’s lifecycle hooks and ref system, it’ll click.

1. Integrating Your NRRD Loading Example into a React Project #

The key difference between vanilla JS and React here is that React manages the DOM, so you can’t just grab elements directly from document like you might in plain HTML. Instead, we’ll use React’s useRef and useEffect hooks to handle Three.js setup, loading, and cleanup.

Here’s a step-by-step breakdown with a code example:

• Create a dedicated React component: This keeps your Three.js logic encapsulated.
• Use useRef to access DOM elements: We’ll reference a container div where the Three.js canvas will live, plus refs for the scene, renderer, and animation frame ID to manage cleanup.
• Move your NRRD loading logic into useEffect: This hook runs after the component mounts, which is the right time to initialize Three.js.
• Clean up resources properly: Always dispose of geometries, materials, and the renderer when the component unmounts to avoid memory leaks.

import React, { useRef, useEffect } from 'react';
import * as THREE from 'three';
import { NRRDLoader } from 'three/addons/loaders/NRRDLoader.js';

const NRRDThreeViewer = () => {
  // Refs to hold DOM container, scene, renderer, and animation ID
  const containerRef = useRef(null);
  const sceneRef = useRef(null);
  const rendererRef = useRef(null);
  const animationIdRef = useRef(null);

  useEffect(() => {
    // Exit if container isn't available yet
    if (!containerRef.current) return;

    // Initialize core Three.js components
    const scene = new THREE.Scene();
    scene.background = new THREE.Color(0xf0f0f0);
    sceneRef.current = scene;

    const camera = new THREE.PerspectiveCamera(75, containerRef.current.clientWidth / containerRef.current.clientHeight, 0.1, 1000);
    camera.position.z = 5;

    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(containerRef.current.clientWidth, containerRef.current.clientHeight);
    containerRef.current.appendChild(renderer.domElement);
    rendererRef.current = renderer;

    // Load your NRRD file (place static files in React's public folder)
    const nrrdLoader = new NRRDLoader();
    nrrdLoader.load(
      '/your-nrrd-file.nrrd',
      (volume) => {
        // Create your mesh from the NRRD volume (match your vanilla logic)
        const sliceGeo = volume.createSliceGeometry('z', volume.RASDimensions[2] / 2);
        const sliceMat = new THREE.MeshBasicMaterial({ side: THREE.DoubleSide, map: volume.createTexture() });
        const nrrdMesh = new THREE.Mesh(sliceGeo, sliceMat);
        
        // Add the mesh to the scene
        scene.add(nrrdMesh);
      },
      (xhr) => console.log(`${(xhr.loaded / xhr.total) * 100}% loaded`),
      (err) => console.error('NRRD load error:', err)
    );

    // Animation loop
    const animate = () => {
      animationIdRef.current = requestAnimationFrame(animate);
      renderer.render(scene, camera);
    };
    animate();

    // Handle window resizing
    const handleResize = () => {
      camera.aspect = containerRef.current.clientWidth / containerRef.current.clientHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(containerRef.current.clientWidth, containerRef.current.clientHeight);
    };
    window.addEventListener('resize', handleResize);

    // Cleanup on component unmount
    return () => {
      window.removeEventListener('resize', handleResize);
      cancelAnimationFrame(animationIdRef.current);
      
      // Dispose all geometries and materials to free memory
      scene.traverse((obj) => {
        if (obj.geometry) obj.geometry.dispose();
        if (obj.material) {
          Array.isArray(obj.material) ? obj.material.forEach(m => m.dispose()) : obj.material.dispose();
        }
      });
      
      renderer.dispose();
      containerRef.current.removeChild(renderer.domElement);
    };
  }, []);

  return <div ref={containerRef} style={{ width: '100%', height: '80vh' }} />;
};

export default NRRDThreeViewer;

A quick note: If you’re loading a local file (not from the public folder, like a user-uploaded file), use FileReader to read the file as an ArrayBuffer, then pass that to nrrdLoader.parse() instead of using load() with a URL.

2. Inserting a Locally Loaded Mesh into the Three.js Canvas #

Once you’ve loaded your mesh (whether from NRRD, GLTF, or another format), adding it to the canvas is straightforward—you just need access to your Three.js scene object:

• Save the scene to a ref: As shown in the example above, using sceneRef.current lets you access the scene anywhere in the component.
• Call scene.add(mesh): After creating or loading your mesh, add it directly to the scene. Three.js will automatically render it in the next animation frame.
• Optional: Position/rotate the mesh: Adjust mesh.position, mesh.rotation, or mesh.scale to place it correctly in your scene.

For example, if you’re loading a user-uploaded NRRD file:

const handleFileUpload = (e) => {
  const file = e.target.files[0];
  if (!file) return;

  const reader = new FileReader();
  reader.onload = (event) => {
    const arrayBuffer = event.target.result;
    const volume = nrrdLoader.parse(arrayBuffer);
    
    // Create mesh from volume
    const mesh = new THREE.Mesh(volume.createSliceGeometry('z', 50), new THREE.MeshBasicMaterial({ side: THREE.DoubleSide }));
    
    // Add to scene
    sceneRef.current.add(mesh);
  };
  reader.readAsArrayBuffer(file);
};

内容的提问来源于stack exchange，提问作者Yone