3Dメッシュの頂点座標の更新 ～Webサイトで3Dコンテンツ(Three.js)

• ホーム
• JavascriptのWebGLコンテキストで3Dコンテンツを作る(three.jsを使用)
• 3Dメッシュの頂点座標の更新 ～Webサイトで3Dコンテンツ(Three.js)

3Dメッシュの頂点座標の更新(Three.js[r145]を使用)

マウス左ドラッグで回転、右ドラッグでカメラの移動、ホイールで拡大縮小できます。
スワイプで回転、画面に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 );
}