Fixing the Water2 Custom Shader Issue

The error you're encountering with Cannot set properties of undefined (setting 'value') is happening because the Water2 class from Three.js doesn't directly use your custom shader in the way you're expecting. When you provide a custom shader to Water2, it doesn't simply replace the entire shader but rather incorporates parts of it into its own shader system.

The Problem

The main issue is in your useFrame callback where you're trying to access the time uniform directly:

TYPESCRIPTCopied
water.material.uniforms["time"].value -= 0.4 / 60.0;

The Water2 class doesn't expose your custom uniforms directly in this way. Instead, it has its own set of uniforms that you need to work with.

Solution

Here's how to fix the issue:

1. First, check what uniforms are actually available in the Water2 material:

TYPESCRIPTCopied
useFrame(() => {
  if (waterRef.current) {
    const water = waterRef.current.children[0] as Water2;
    
    // Log available uniforms to see what's actually there
    console.log(water.material.uniforms);
    
    // Use the correct uniform - Water2 has its own 'time' uniform
    if (water.material.uniforms.time) {
      water.material.uniforms.time.value -= 0.4 / 60.0;
    }
  }
});

2. Alternatively, you can create a reference to the water object and access it directly:

TYPESCRIPTCopied
const WaterEx = () => {
  const waterRef = useRef<THREE.Group>(null);
  const waterInstanceRef = useRef<Water2 | null>(null);
  
  // Rest of your code...
  
  useEffect(() => {
    if (waterRef.current) {
      // Your existing code...
      const water = new Water2(waterGeometry, {
        // Your options...
      });
      
      // Store reference to the water instance
      waterInstanceRef.current = water;
      
      waterRef.current.add(water);
      // Rest of your code...
    }
  }, []);
  
  useFrame(() => {
    if (waterInstanceRef.current) {
      // Access the correct uniforms
      const uniforms = waterInstanceRef.current.material.uniforms;
      if (uniforms.config) {
        // Water2 often stores time in a config uniform
        uniforms.config.value.w += 0.4 / 60.0; // Might need to adjust this based on actual structure
      }
    }
  });
  
  // Rest of your component...
};

3. For a more direct approach to custom water shaders, you might consider:

TYPESCRIPTCopied
useEffect(() => {
  if (waterRef.current) {
    // Create water instance
    const water = new Water2(waterGeometry, {
      // Your options...
    });
    
    // After creation, you can extend or modify the material's shader
    // This is a more advanced approach
    const originalUniforms = water.material.uniforms;
    originalUniforms.customColor = { value: new THREE.Color(0x001e0f) };
    
    // Store the water instance
    waterInstanceRef.current = water;
    waterRef.current.add(water);
  }
}, []);

Understanding Water2

The Water2 class in Three.js uses a complex shader system that combines multiple effects. When you provide a custom shader, you need to understand how it integrates with the existing shader code.

I recommend examining the actual uniforms available in the Water2 material by logging them to the console, then updating the appropriate ones based on what you find. The structure might be different from what you're expecting.