Estoy tratando de implementar este Water Shader en mi proyecto pero el agua no aparece. No recibo errores en la consola, solo una advertencia:
React Hook useMemo has a missing dependency: 'gl.encoding'. Either include it or remove the dependency arrayHe intentado quitarlo pero sin suerte. No estoy exactamente seguro de lo que esto podría significar, al principio pensé que el agua no aparecía debido a la textura que estaba cargando, pero este no parece ser el caso.
Mi código está aquí:
function Ocean() { const ref = useRef() const gl = useThree((state) => state.gl) const waterNormals = useLoader(THREE.TextureLoader, 'https://raw.githubusercontent.com/mrdoob/three.js/master/examples/textures/waternormals.jpg') waterNormals.wrapS = waterNormals.wrapT = THREE.RepeatWrapping const geom = useMemo(() => new THREE.PlaneGeometry(10000, 10000), []) const config = useMemo( () => ({ textureWidth: 512, textureHeight: 512, waterNormals, sunDirection: new THREE.Vector3(), sunColor: 0xFFF05D, waterColor: 0x7F7F7F, distortionScale: 3.7, fog: false, format: gl.encoding }), [waterNormals] ) useFrame((state, delta) => (ref.current.material.uniforms.time.value += delta)) return <water ref={ref} args={[geom, config]} rotation-x={-Math.PI / 2} position={[0, 0, 0]} /> }Y el código al llamarlo:
export default function App() { return ( <Canvas camera={{ position: [0, 5, 100], fov: 55, near: 1, far: 20000 }}> <pointLight position={[100, 100, 100]} /> <pointLight position={[-100, -100, -100]} /> <Suspense fallback={null}> <Ocean /> <Box /> </Suspense> <Sky scale={1000} sunPosition={[500, 150, -1000]} turbidity={0.1} /> <OrbitControls /> </Canvas> ) }