Three.jsでリアルタイムに3Dメッシュの頂点座標を更新する方法【詳細解説＆コード付き】
Three.jsを活用すると、3Dメッシュの頂点座標を動的に変更し、リアルな動きを表現できます。
本記事では、頂点座標の更新方法と、それに伴う法線ベクトルの調整、needsUpdateの設定について詳しく解説します。
3Dメッシュの頂点座標の更新(Three.js[r145])
頂点座標を更新したら 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 );
}