THREE.Water is not a constructor

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…!
‘use strict’;

function main(){

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

const renderer = new THREE.WebGLRenderer({canvas});
      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 );




Water is not part of the core library. You have to import it into your code for it to be available. See here:

1 Like

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??

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.

1 Like

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