# THREE.Water is not a constructor

**URL:** <https://discourse.threejs.org/t/three-water-is-not-a-constructor/18595>\
**Category:** Questions\
**Tags:** water\
**Created:** [September 10, 2020, 10:52pm UTC](https://discourse.threejs.org/t/three-water-is-not-a-constructor/18595 "2020-09-10T22:52:56Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![juju](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/juju/32/13236_2.png) [@juju](https://discourse.threejs.org/u/juju)\
**Post date:** [September 10, 2020, 10:52pm UTC](https://discourse.threejs.org/t/three-water-is-not-a-constructor/18595/1 "2020-09-10T22:52:56Z")

</div>

hi!! I’m very new in three.js world!  
I’m getting ‘Uncaught TypeError: THREE.Water is not a constructor  
at main (9sep\_water.js:29)  
at 9sep\_water.js:47  
main @ 9sep\_water.js:29  
(anonymous) @ 9sep\_water.js:47’  
and I have no idea what is going on plz someone help…!  
code:  
‘use strict’;

function main(){

```
const canvas = document.querySelector('#c');

const renderer = new THREE.WebGLRenderer({canvas});
      renderer.setPixelRatio(window.devicePixelRatio);
      renderer.setSize(window.innerWidth, window.innerHeight);

const fov = 55;
const aspect = 2;
const near = 0.1;
const far = 2000;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
      camera.position.set( 30, 30, 100 );

const scene = new THREE.Scene();

const sun = new THREE.Vector3();

```

// //water

```
const waterGeometry = new THREE.PlaneBufferGeometry( 20, 20 );
const flowMap = new THREE.TextureLoader().load( 'textures/waternormals.png' );

const water = new THREE.Water( waterGeometry, {
				scale: 2,
				textureWidth: 1024,
				textureHeight: 1024,
				flowMap: flowMap
			} );

			water.position.y = 1;
			water.rotation.x = Math.PI * - 0.5;
			scene.add( water );
    water.rotation.x = - Math.PI / 2;

    scene.add( water );

```

//  
}

main();

thanks!!!

---

<div class="post-metadata">

**Author:** ![marquizzo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/marquizzo/32/25192_2.png) [@marquizzo](https://discourse.threejs.org/u/marquizzo)\
**Post date:** [September 11, 2020, 12:53am UTC](https://discourse.threejs.org/t/three-water-is-not-a-constructor/18595/2 "2020-09-11T00:53:13Z")

</div>

`Water` is not part of the core library. You have to import it into your code for it to be available. See here: [https://github.com/mrdoob/three.js/blob/696d7836d1fc56c4702a475e6991c4adef7357f4/examples/webgl\_shaders\_ocean.html](https://github.com/mrdoob/three.js/blob/696d7836d1fc56c4702a475e6991c4adef7357f4/examples/webgl_shaders_ocean.html)

---

<div class="post-metadata">

**Author:** ![juju](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/juju/32/13236_2.png) [@juju](https://discourse.threejs.org/u/juju)\
**Post date:** [September 11, 2020, 2:13am UTC](https://discourse.threejs.org/t/three-water-is-not-a-constructor/18595/3 "2020-09-11T02:13:58Z")

</div>

hello! thank you for reply!  
but I did import water.js into my code i guess,

script type = “module” src = “three/Water.js”

like this…! is that correct to import??

---

<div class="post-metadata">

**Author:** ![marquizzo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/marquizzo/32/25192_2.png) [@marquizzo](https://discourse.threejs.org/u/marquizzo)\
**Post date:** [September 11, 2020, 5:48am UTC](https://discourse.threejs.org/t/three-water-is-not-a-constructor/18595/4 "2020-09-11T05:48:34Z")

</div>

It depends where the file is stored. By default, it’s in `three/examples/jsm/objects/Water.js`. Additionally, once imported, you should use it as `new Water` and not `new THREE.Water` because it’s its own standalone class.

---

<div class="post-metadata">

**Author:** ![juju](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/juju/32/13236_2.png) [@juju](https://discourse.threejs.org/u/juju)\
**Post date:** [September 11, 2020, 11:04am UTC](https://discourse.threejs.org/t/three-water-is-not-a-constructor/18595/5 "2020-09-11T11:04:08Z")

</div>

thanks! i changed my code to const water = new Water and now i see other error, it says Uncaught ReferenceError: Water is not defined  
at main (9sep\_water.js:29)  
at 9sep\_water.js:47

and if i do water = new Water than  
Uncaught ReferenceError: Water is not defined  
at main (9sep\_water.js:29)  
at 9sep\_water.js:48