Blog

Three.jsのOrbitControl.jsを使ってマウスやタッチで簡単にカメラ操作

2016.08.23Cat:html5 WebGL デザイナー
nino-eye

WebGLを扱いやすくするライブラリであるThree.jsには、
Three.js本体以外に、ライブラリをさらに補助するために利用できるJSが多く含まれています。

今回はその中でも、マウスやタッチでの操作によるカメラの操作を容易にする、
OrbitControl.jsの導入方法についてご紹介いたします。

↓参考にさせていただいたサイト
Three.js OrbitControls.js – Three.jsを使って、作ってみた

↓OrbitControlを使って作ってみたもの
DEMO

方法

Three.jsをダウンロードして、
以下のファイルをコピーして、サイトのJSを配置するディレクトリに置く。

three.js-master/build/three.min.js
three.js-master/examples/js/controls/OrbitControls.js

HTMLで読み込む

 

Three.jsを記述して、cameraオブジェクトにOrbitControlを適用する。

レンダリングをする箇所で、controlのupdateを行う。

 

Author Profile

ninomiya
ninomiya
Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ