2

私は 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 のアマチュアであり愛好家です。

4

1 に答える 1

2

Three.js の例のページには、水 (この場合は海) のシェーダーの素晴らしい例がいくつかあります。

別の良い出発点は、この専用の海 - Three.js github ページ用のリアルな水シェーダーです。

于 2016-04-21T11:59:03.390 に答える