Synchronizing Material Editing in Next.js with Three.js and React Three Fiber

To create a material configurator that keeps your 3D model and UI in sync, you'll need to establish a proper state management system that connects your Three.js materials with your React components. Here's a comprehensive approach using Valtio:

1. Material Reference Management

The key challenge is maintaining a reference to the actual Three.js material objects while allowing UI components to modify them. Here's how to approach this:

Create a Centralized State Store

JSXCopied
// store.js
import { proxy } from 'valtio'

export const state = proxy({
  materialNames: [],
  activeMaterialName: null,
  // This will hold references to the actual Three.js material objects
  materialRefs: {},
  // Material properties for the active material
  activeMaterialProps: {
    color: '#ffffff',
    roughness: 0.5,
    metalness: 0.5
  }
})

2. Extract Materials from GLTF Model

When loading your GLTF model, extract all materials and store references:

JSXCopied
// ModelViewer.jsx
import { useGLTF } from '@react-three/drei'
import { useSnapshot } from 'valtio'
import { state } from './store'
import { useEffect } from 'react'
import * as THREE from 'three'

function ModelViewer({ modelUrl }) {
  const { scene } = useGLTF(modelUrl)
  const snap = useSnapshot(state)
  
  // Extract materials on model load
  useEffect(() => {
    const materials = {}
    const materialNames = []
    
    scene.traverse((node) => {
      if (node.isMesh && node.material) {
        // Handle both single materials and material arrays
        if (Array.isArray(node.material)) {
          node.material.forEach((mat, idx) => {
            const name = mat.name || `material_${idx}`
            materials[name] = mat
            if (!materialNames.includes(name)) materialNames.push(name)
          })
        } else {
          const name = node.material.name || `material_${node.id}`
          materials[name] = node.material
          if (!materialNames.includes(name)) materialNames.push(name)
        }
      }
    })
    
    // Update state with material names and references
    state.materialNames = materialNames
    state.materialRefs = materials
    
    // Set default active material if none is selected
    if (!state.activeMaterialName && materialNames.length > 0) {
      state.activeMaterialName = materialNames[0]
      
      // Initialize active material properties
      const activeMat = materials[materialNames[0]]
      if (activeMat) {
        state.activeMaterialProps = {
          color: activeMat.color ? '#' + activeMat.color.getHexString() : '#ffffff',
          roughness: activeMat.roughness !== undefined ? activeMat.roughness : 0.5,
          metalness: activeMat.metalness !== undefined ? activeMat.metalness : 0.5
        }
      }
    }
  }, [scene])
  
  return <primitive object={scene} />
}

3. Material Selection UI

Create buttons to select the active material:

JSXCopied
// MaterialSelector.jsx
import { useSnapshot } from 'valtio'
import { state } from './store'

function MaterialSelector() {
  const snap = useSnapshot(state)
  
  const handleMaterialSelect = (materialName) => {
    state.activeMaterialName = materialName
    
    // Update active material properties based on the selected material
    const material = state.materialRefs[materialName]
    if (material) {
      state.activeMaterialProps = {
        color: material.color ? '#' + material.color.getHexString() : '#ffffff',
        roughness: material.roughness !== undefined ? material.roughness : 0.5,
        metalness: material.metalness !== undefined ? material.metalness : 0.5
      }
    }
  }
  
  return (
    <div className="material-selector">
      <h3>Materials</h3>
      <div className="material-buttons">
        {snap.materialNames.map((name) => (
          <button
            key={name}
            className={snap.activeMaterialName === name ? 'active' : ''}
            onClick={() => handleMaterialSelect(name)}
          >
            {name}
          </button>
        ))}
      </div>
    </div>
  )
}

4. Material Editor Component

Create the editor UI that updates both the state and the actual Three.js material:

JSXCopied
// MaterialEditor.jsx
import { useSnapshot } from 'valtio'
import { state } from './store'
import { HexColorPicker } from 'react-colorful'
import { useEffect } from 'react'
import * as THREE from 'three'

function MaterialEditor() {
  const snap = useSnapshot(state)
  
  // No active material selected
  if (!snap.activeMaterialName) return null
  
  const updateMaterialProperty = (property, value) => {
    // Update the state
    state.activeMaterialProps[property] = value
    
    // Get reference to the actual Three.js material
    const material = state.materialRefs[snap.activeMaterialName]
    if (!material) return
    
    // Update the Three.js material directly
    if (property === 'color') {
      material.color = new THREE.Color(value)
    } else {
      material[property] = value
    }
    
    // Force material update
    material.needsUpdate = true
  }
  
  return (
    <div className="material-editor">
      <h3>Edit Material: {snap.activeMaterialName}</h3>
      
      <div className="color-picker">
        <label>Color</label>
        <HexColorPicker 
          color={snap.activeMaterialProps.color} 
          onChange={(color) => updateMaterialProperty('color', color)} 
        />
        <input 
          type="text" 
          value={snap.activeMaterialProps.color} 
          onChange={(e) => updateMaterialProperty('color', e.target.value)}
        />
      </div>
      
      <div className="slider">
        <label>Roughness: {snap.activeMaterialProps.roughness.toFixed(2)}</label>
        <input 
          type="range" 
          min="0" 
          max="1" 
          step="0.01" 
          value={snap.activeMaterialProps.roughness} 
          onChange={(e) => updateMaterialProperty('roughness', parseFloat(e.target.value))} 
        />
      </div>
      
      <div className="slider">
        <label>Metalness: {snap.activeMaterialProps.metalness.toFixed(2)}</label>
        <input 
          type="range" 
          min="0" 
          max="1" 
          step="0.01" 
          value={snap.activeMaterialProps.metalness} 
          onChange={(e) => updateMaterialProperty('metalness', parseFloat(e.target.value))} 
        />
      </div>
    </div>
  )
}

5. Putting It All Together

Finally, assemble your components in your main page:

JSXCopied
// page.jsx
'use client'

import { Canvas } from '@react-three/fiber'
import { OrbitControls, Environment } from '@react-three/drei'
import ModelViewer from './ModelViewer'
import MaterialSelector from './MaterialSelector'
import MaterialEditor from './MaterialEditor'
import { useSnapshot } from 'valtio'
import { state } from './store'

export default function Home() {
  const snap = useSnapshot(state)
  
  return (
    <div className="configurator">
      <div className="canvas-container">
        <Canvas>
          <ambientLight intensity={0.5} />
          <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} />
          <ModelViewer modelUrl="/path/to/your/model.glb" />
          <OrbitControls />
          <Environment preset="city" />
        </Canvas>
      </div>
      
      <div className="controls">
        <MaterialSelector />
        {snap.activeMaterialName && <MaterialEditor />}
      </div>
    </div>
  )
}

Key Benefits of This Approach

1. Direct Material Reference: By storing references to the actual Three.js materials, changes are applied directly to the objects in the scene.

2. UI/Scene Synchronization: The Valtio proxy ensures that both the UI components and the 3D scene stay in sync.

3. Separation of Concerns: The model loading, material selection, and material editing are separated into distinct components.

4. Immediate Updates: Changes to material properties are immediately reflected in both the UI and the 3D model.

This architecture provides a clean way to manage material editing while maintaining synchronization between your UI controls and the Three.js scene.