在 Three.js 中为程序海设置动画

Question

我正在使用 Three.js 进行我的第一个项目，但我现在正在碰壁。

我想知道在 Three.js 中制作动画（低多边形）海的最佳方法是什么，从昨天开始我一直在尝试使用置换贴图，但我一直在阅读置换贴图无法动画化? （这是真的吗？）

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;
});

更新中

displacementPos++;

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

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

这将是最简单的方法，但如果不可能，我不知道我的其他选择是什么。

感谢您的帮助。 一个 Three.js 的业余爱好者和爱好者。

Answer 1

the Three.js examples page 上有一些很好的水着色器示例（在本例中称为海洋）：

• http://threejs.org/examples/#webgl_shaders_ocean
• http://threejs.org/examples/#webgl_shaders_ocean2

另一个好的起点是this dedicated ocean - Realistic water shader for Three.js github page。