Code viewer for World:
water
AB.clockTick = 16;
AB.maxSteps = 65545;
const waterTextureFile = "/uploads/mathias/water1.jpg";
function World()
{
let w1,w2;
//==== WavesWater object ========================================================================
function WavesWater(x,y,z,width,height,amplitude,opacity)
{
this.w1;
this.w2;
this.offset = 0;
this.yPos = y;
this.amplitude = amplitude;
let waterGeometry = new THREE.PlaneBufferGeometry( width, height, 32 );
waterGeometry.rotateX( - Math.PI / 2 );
let waterTexture1 = new THREE.ImageUtils.loadTexture ( waterTextureFile ); //I used "/uploads/mathias/water1.jpg"
waterTexture1.minFilter = THREE.LinearFilter;
waterTexture1.wrapS = waterTexture1.wrapT = THREE.RepeatWrapping;
waterTexture1.offset.set( 0, 0 );
waterTexture1.repeat.set( width*4/100, height*4/100 );
let waterTexture2 = new THREE.ImageUtils.loadTexture ( waterTextureFile ); //I used "/uploads/mathias/water1.jpg"
waterTexture2.minFilter = THREE.LinearFilter;
waterTexture2.wrapS = waterTexture2.wrapT = THREE.RepeatWrapping;
waterTexture2.offset.set( 0.5, 0 );
waterTexture2.repeat.set( width*4/100, height*4/100 );
let waterMaterial1 = new THREE.MeshBasicMaterial({map : waterTexture1});
waterMaterial1.transparent = true;
waterMaterial1.opacity = opacity;
let waterMaterial2 = new THREE.MeshBasicMaterial({map : waterTexture2});
waterMaterial2.transparent = true;
waterMaterial2.opacity = opacity;
this.w1 = new THREE.Mesh(waterGeometry, waterMaterial1);
this.w1.position.set(x,y,z);
this.w2 = new THREE.Mesh(waterGeometry, waterMaterial2);
this.w2.position.set(x,y - 0.001,z);
threeworld.scene.add( this.w1 );
threeworld.scene.add( this.w2 );
}
WavesWater.prototype.animate = function()
{
this.w1.material.map.offset.set(Math.sin(this.offset)*this.amplitude+0.2,0);
this.w2.material.map.offset.set(Math.sin(this.offset+0.4)*this.amplitude,0);
this.w1.position.y = this.yPos + Math.sin(this.offset)*0.1;
this.w2.position.y = this.yPos - 0.001 + Math.sin(this.offset)*0.1;
this.offset+=0.012;
}
//=======================================================================================
//==== Water object ========================================================================
function Water(x,y,z,width,height,opacity)
{
this.w1;
this.texture1;
this.texture2;
this.time=0;
this.whatTexture = true;
let waterGeometry = new THREE.PlaneBufferGeometry( width, height, 32 );
waterGeometry.rotateX( - Math.PI / 2 );
this.texture1 = new THREE.ImageUtils.loadTexture ( "/uploads/mathias/water1.jpg" );
this.texture1.minFilter = THREE.LinearFilter;
this.texture1.wrapS = this.texture1.wrapT = THREE.RepeatWrapping;
this.texture1.offset.set( 0, 0 );
this.texture1.repeat.set( width*3, height*3 );
this.texture2 = new THREE.ImageUtils.loadTexture ( "/uploads/mathias/water3.jpg" );
this.texture2.minFilter = THREE.LinearFilter;
this.texture2.wrapS = this.texture2.wrapT = THREE.RepeatWrapping;
this.texture2.offset.set( 0, 0 );
this.texture2.repeat.set( width*3, height*3 );
let waterMaterial1 = new THREE.MeshBasicMaterial({map : this.texture1});
waterMaterial1.transparent = true;
waterMaterial1.opacity = opacity;
this.w1 = new THREE.Mesh(waterGeometry, waterMaterial1);
this.w1.position.set(x,y,z);
threeworld.scene.add( this.w1 );
}
Water.prototype.animate = function()
{
if(this.time == 20)
{
this.time = 0;
if(this.whatTexture) this.w1.material.map = this.texture2;
else this.w1.material.map = this.texture1;
this.whatTexture = !this.whatTexture;
}
else this.time++;
}
//=======================================================================================
this.newRun = function()
{
threeworld.init3d(10, 1000, 0xc2b280);
w1 = new Water(0,0.01,0 ,10,10 ,1 ,0.6);
};
this.nextStep = function()
{
w1.animate();
};
this.endRun = function()
{
};
}