3Dメッシュの頂点座標の更新(Three.js[r145])
three.jsでメッシュの頂点座標を更新すると風にはばたく旗のような物体を表現できます。
頂点座標を更新したら computeVertexNormals() を呼び出して法線ベクトルを更新しないと影が正しく表示されません。
また、
ジオメトリ.attributes.position.needsUpdate = true;
として頂点座標が更新されたことを通知する必要があるようです。
マウス左ドラッグで回転、右ドラッグでカメラの移動、ホイールで拡大縮小できます。
スワイプで回転、画面に2本指を触れてなぞるとカメラの移動、ピンチイン／アウトで拡大縮小できます。
ソースコード
function renderLoop () {
requestAnimationFrame( renderLoop );
//ここで3Dメッシュの頂点Y座標を更新する
phase+=0.05;
for(let z=0;z<pointnum;z++){
for(let x=0;x<pointnum;x++){
meshWave.geometry.attributes.position.array[(z*pointnum+x)*3+1]=
Math.cos(x*Math.PI/8+phase)*Math.sin(z*Math.PI/8+phase)*heightSize;
}
}
meshWave.geometry.computeVertexNormals();
meshWave.geometry.attributes.position.needsUpdate = true;
renderer.render( scene, camera );
}