I'm trying to create a water surface via the three.js example object "water2".

This is a demo of the object: https://threejs.org/examples/?q=water#webgl_water

I use this code to create the water surface, which is taken directly from the demo code:

    const waterGeometry = new THREE.PlaneGeometry( 16, 16 );
    water = new Water( waterGeometry, {
        color: '#aabbcc',
        scale: 4,
        flowDirection: new THREE.Vector2( 1, 1 ),
        textureWidth: 1024,
        textureHeight: 1024
    } );
    water.position.z = 0.1;
    scene.add( water );

The water plane renders (as you can see in the left image); However the water surface is not transparent like in the demo scene on the right image. What could be the issue here? I checked the demo and there is nothing else there that interacts with the water plane. How is it possible it displays so differently on my own implementation, despite code being a 1:1 copy?