Blog

Three.jsによるWebGLで物体を回転させる

2017.05.09Cat:WebGL デザイナー

簡単に WebGL を実装できる Three.js について、これまでいくつか紹介させていただきましたが(1, 2, 3)、
これまでの方法の中では、表示した物体をいろんな方向から見る場合に、カメラの方を回転させていたのですが、
今回は、物体の方を回転させる方法を調べてやってみました。
カメラを回転させる場合、光源も一緒に回転しますが、
物体の方を回転させる場合、光源は固定されたままなのが違う点です。

特に今回は、複数の物体をまとめて回転させたかったので、その方法についてご紹介いたします。

↓作ってみた物
DEMO

ポイント

  1. meshPhongMaterial() を使うことで、陰を詳細に描画
  2. Shape() とExtrudeGeometry で path から板を生成
  3. Group() で複数の物体をグループ化して、まとめて扱えるようにする
  4. マウス(タッチ)の移動距離を物体の回転にあてる

説明

1. meshPhongMaterial()を使うことで、陰を詳細に描画

これまでは、material の生成に、MeshBasicMaterial を使ってきましたが、今回は陰を描写するため、MeshPhongMaterial を使いました。

2. Shape()とExtrudeGeometryでpathから板を生成

Three.js では Canvas の beginPath() のように、movoTo、lineTo、bezierCurveToを使ってパスから図形を生成することができます。

さらに、ExtrudeGeometry により、押出による板状の物体を生成することができます。

3. Group() で複数の物体をグループ化して、まとめて扱えるようにする

複数の物体は、グループ化することで、まとめて操作することができます。

4. マウス(タッチ)の移動距離を物体の回転にあてる

マウスやタッチのイベントを基に、回転の量を設定して、
物体の回転にあてます。

イベントの操作

 

 

全コード

 

参考サイト

Three.jsの基本⑤ – Three.jsを使って、作ってみた

three.js docs – ExtrudeGeometry

2次元のShapeから厚みをつけて3次元にできる。

Author Profile

ninomiya
ninomiya

Webデザイナー兼コーダーです。
イラストを描くのも好きです。
SVGとCanvasを使ったWEBアプリにも興味があります。
よろしくお願いいたします。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ