title: threejs water2 changing reflection state
body: <p>there is a strange irregularity happening with my attempt of implementing the water2.js material onto a long surface that i can't explain.
  When I start my app, the water is rendered correctly (see screenshot 1).</p>
  
  <p><a href="https://i.stack.imgur.com/MjGVk.jpg" rel="nofollow noreferrer">->water showing correctly</a></p>
  
  <p>The player moves forward quite a bit and suddenly the water turns into what you can see in screenshot 2. </p>
  
  <p><a href="https://i.stack.imgur.com/GkYFV.jpg" rel="nofollow noreferrer">->water not showing correctly</a></p>
  
  <p>I can't explain why or how it happens as it starts out exactly as I want it.
  Anybody stumbled upon this before? How can I prevent it from turning into this solid mirror of my scene background?</p>
  
  <p>DevBrowser: <strong>Chrome65</strong><br>
  Threejs: <strong>r91</strong></p>
  
  <p><strong>Example code</strong>  </p>
  
  <p>Using these three scripts from the three.js examples</p>
  
  <pre><code>&lt;script src="js/objects/Reflector.js"&gt;&lt;/script&gt;
  &lt;script src="js/objects/Refractor.js"&gt;&lt;/script&gt;
  &lt;script src="js/objects/Water2.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>As seen here: <a href="https://threejs.org/examples/webgl_water.html" rel="nofollow noreferrer">https://threejs.org/examples/webgl_water.html</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var splines = new THREE.CatmullRomCurve3( [
   new THREE.Vector3( -10, 0, 10 ),
   new THREE.Vector3( -5, 5, 5 ),
   new THREE.Vector3( 0, 0, 0 ),
   new THREE.Vector3( 5, -5, 5 ),
   new THREE.Vector3( 10, 0, 10 )
  ] );
  
  //my curve is generated through waypoints so I inserted the standard curve as a stand in
  
      
  var waterGeo = new THREE.TubeBufferGeometry(splines, 100, 4, 8, false);
  
  var water = new THREE.Water( waterGeo, {
            color: 0xffffff,
            scale: 1,
            flowDirection: new THREE.Vector2( 1, 0 ),
            textureWidth: 1024,
            textureHeight: 1024
        } );
  
  scene.add(water);
    </code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Example2</strong><br>
  <em>I recreated a similar effect, where after one camera turn the water turns black and will not go reflective anymore</em><br>
  <strong>working example here:</strong> <a href="http://staging.onewavestudios.com/waterexample/" rel="nofollow noreferrer">http://staging.onewavestudios.com/waterexample/</a>  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    //skybox
          var path = "assets/skybox/";
          var format = ".jpg";
          var skymaterials = [
          path + "ft" + format,
          path + "bk" + format,
          path + "up" + format,
          path + "dn" + format,
          path + "rt" + format,
          path + "lf" + format
          ];
          var skybox = new THREE.CubeTextureLoader().load(skymaterials);
          skybox.format = THREE.RGBFormat;
  
      //scene setup
          var scene = new THREE.Scene();
          scene.background = skybox;
      
      //camera
      var camera = new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight,0.1,1000);
          camera.position.set( 20, 0, 25 );
    camera.lookAt( scene.position );
          scene.add(camera);
  
      //lights
          var ambientLight = new THREE.AmbientLight( 0xbbffff, 0.5 );
          scene.add(ambientLight);
  
      //objects
          //box1 - representation for the arms in my scene
          var geometry = new THREE.BoxGeometry( 10, 5, 5 );
          var material = new THREE.MeshLambertMaterial( { color: 0xbada55, envMap: skybox, reflectivity: 0.1 } );
          material.shadowSide = THREE.DoubleSide;
          material.side = THREE.DoubleSide;
    var cube = new THREE.Mesh( geometry, material );
          cube.position.y += 8;
          cube.position.z += 5;
    scene.add( cube );
  
          var splines = new THREE.CatmullRomCurve3([
              new THREE.Vector3(-10, 0, 10),
              new THREE.Vector3(-5, 5, 5),
              new THREE.Vector3(0, 0, 0),
              new THREE.Vector3(5, -5, 5),
              new THREE.Vector3(10, 0, 10)
          ]);
          //my original curve is generated through waypoints so I inserted the standard curve as a stand in
  
          //waterbody
          var waterGeo = new THREE.TubeBufferGeometry(splines, 100, 4, 8, false);
          var water = new THREE.Water(waterGeo, {
              color: 0xffffff,
              scale: 1,
              flowDirection: new THREE.Vector2(1, 0),
              textureWidth: 1024,
              textureHeight: 1024
          });
          scene.add(water);
  
          //waterslide - representation
          var material2 = new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: skybox, reflectivity: 0.8 } );
          material2.shadowSide = THREE.DoubleSide;
          material2.side = THREE.DoubleSide;
          var container = new THREE.Mesh( waterGeo, material2 );
          container.position.y -= 5;
    scene.add( container );
  
      //renderer
          renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );
          document.body.appendChild( renderer.domElement );
          animate();
  
      //render
          function animate() {
                  camera.rotation.z += 0.005;
      requestAnimationFrame( animate );
      render();
     }
     function render() {
      renderer.render( scene, camera );
     }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width,initial-scale=1.0"&gt;
      &lt;title&gt;TubeWater Example&lt;/title&gt;
  
      &lt;style&gt;
          body {
              margin: 0;
          }
  
          canvas {
              width: 100%;
              height: 100%;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/91/three.js"&gt;&lt;/script&gt;
  &lt;script src="https://raw.githubusercontent.com/mrdoob/three.js/master/examples/js/objects/Water2.js"&gt;&lt;/script&gt;
  &lt;script src="https://raw.githubusercontent.com/mrdoob/three.js/master/examples/js/objects/Reflector.js"&gt;&lt;/script&gt;
  &lt;script src="https://raw.githubusercontent.com/mrdoob/three.js/master/examples/js/objects/Refractor.js"&gt;&lt;/script&gt;
  &lt;body&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>