在 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

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

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

另一个好的起点是这个专用于 Three.js github 页面的海洋现实水着色器。