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で読み込む
|
1 2 | <script src="js/three.min.js"></script> <script src="js/OrbitControls.js"></script> |
|
1 | <div id="canvas-frame"></div> |
Three.jsを記述して、cameraオブジェクトにOrbitControlを適用する。
|
1 2 3 4 | camera = new THREE.PerspectiveCamera( fov, wrapperElm.clientWidth / wrapperElm.clientHeight, 1, 1000 ); camera.up.x = 0; camera.up.y = 0; camera.up.z = -1; camera.position.set(0, 150, 400); controls = new THREE.OrbitControls(camera); |
レンダリングをする箇所で、controlのupdateを行う。
|
1 2 3 4 5 6 7 8 9 | function animate() { requestAnimationFrame( animate ); render(); } function render() { controls.update(); ・・・ renderer.render( scene, camera ); } |
Author Profile
SHARE