Question

我正在与Three.js合作完成我的第一个项目，现在我正在撞墙。

我想知道在Three.js中制作动画（低聚）海的最佳方法是什么，我从昨天开始尝试使用displaMaps，但我一直在阅读那个displaMaps可以＆＃39动画？（是真的吗？）

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上有一些关于水的着色器（在这种情况下称为海洋）的很好的例子：

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

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

1 个答案: