2

I'm working on my first project with Three.js and I'm hitting against a wall right now.

I would like to know what would be the best way to make an animated (low-poly) sea inside Three.js , I've been trying since yesterday with displacementMaps but I have been reading that displacementMaps can't be animated ? (is that true ?) 

var faceGeo = new THREE.PlaneGeometry(200,200,subdivisions,subdivisions);
var faceMat = new THREE.MeshPhongMaterial({color: 0xeeeeee, side: THREE.DoubleSide,transparent: true,opacity: .3,specular: 0x333333,shading: THREE.FlatShading})
var face1 = new THREE.Mesh(faceGeo,faceMat);

face1.rotation.x = -(Math.PI /2);
face1.position.y = -30
face1.position.z = -90

textureDiff.load("_textures/dispmap_sea.png",function(image){
  image.wrapS = THREE.RepeatWrapping;
  image.wrapT = THREE.RepeatWrapping;
  image.repeat = new THREE.Vector2(1,1);
  image.anisotropy = renderer.getMaxAnisotropy();

  face1.material.displacementMap = image;
  face1.material.displacementScale = 10;
});

in update 

displacementPos++;

face1.material.displacementMap.offset = new THREE.Vector2(displacementPos,displacementPos);

face1.material.needsUpdate = true;
face1.material.displacementMap.needsUpdate = true;

It would be the easiest way but if it is impossible, I don't know what my other options are.

Thank you for your help. A Three.js amateur and enthusiast.

Igor Derval
  • 31
  • 1
  • 3
  • Try to see something about the Perlin Noise. While it's used for procedural terrain generation, with some tuning it can generate fantastic low poly waves – Roberto Aureli Aug 11 '20 at 09:31

1 Answers1

2

There are some great examples of shaders for water (in this case called ocean) on the Three.js examples page:

Another good starting point is this dedicated ocean - Realistic water shader for Three.js github page.

Wilt
  • 41,477
  • 12
  • 152
  • 203
  • Those are good examples but they are not what I want to accomplish. I want the vertices of the plane to move like an ocean , but it's all very low poly and shouldn't look realistic at all. ( also I don't understand how to build those custom shaders , I'm truly a beginner in Three.js ) But thanks for the answer anyway. – Igor Derval Apr 21 '16 at 13:42