STERFIELD

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

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

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

Webデザイナー兼コーダー出身のフロントエンド開発者です。 UXデザインやチーム開発の効率化など、勉強中です。

SHARE

合わせて読みたい