OrbitControls.jsを使うとかなり簡単にマウスドラッグでカメラ回転がで着るようになる。
以下より、three.js-master.zipをダウンロードし展開する。
以下サイトのCubeを表示するHTML+JavaScripファイルを作り.htmlファイルで保存する。
https://ics.media/tutorial-three/camera_orbitcontrols/
そのままコピペすると以下のエラーが出る。
恐らく原因は、three.jsはweb上の指定バージョンの物を使っているのに、OrbitControls.jsはダウンロードした最新バージョンを使っていて、かつ、自分で書いたスクリプトの部分が古いバージョンに対応したコードになっているから。
<html> <head> <meta charset="utf-8" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script> <script src="js/controls/OrbitControls.js"></script> <script> // ...
// カメラコントローラーを作成 const controls = new THREE.OrbitControls(camera); // ...
</script> </head> <body> <canvas id="myCanvas"></canvas> </body> </html>
なのでthree.jsもダウンロードしてorbitcontrols.js共にローカルのファイルを使用して、スクリプト本体もdomElement指定を追加してやる。
<html> <head> <meta charset="utf-8" /> <script src="three.js-master/build/three.min.js"></script> <script src="three.js-master/examples/js/controls/OrbitControls.js"></script> <script> // ...
// カメラコントローラーを作成 const controls = new THREE.OrbitControls(camera,renderer.domElement); // ...
</script> </head> <body> <canvas id="myCanvas"></canvas> </body> </html>
上にも書いたが、domElementを渡していないソースコードが多いが、最新のバージョンではこれが必須になっているらしい。
<html> <head> <meta charset="utf-8" /> <script src="three.js-master/build/three.min.js"></script> <script src="three.js-master/examples/js/controls/OrbitControls.js"></script> <script> // ページの読み込みを待つ window.addEventListener('load', init); function init() { // サイズを指定 const width = 960; const height = 540; // レンダラーを作成 const renderer = new THREE.WebGLRenderer({ canvas: document.querySelector('#myCanvas') }); renderer.setSize(width, height); // シーンを作成 const scene = new THREE.Scene(); // カメラを作成 const camera = new THREE.PerspectiveCamera(45, width / height); // カメラの初期座標を設定 camera.position.set(0, 0, 1000); // カメラコントローラーを作成 const controls = new THREE.OrbitControls(camera,renderer.domElement); // 形状とマテリアルからメッシュを作成します const mesh = new THREE.Mesh( new THREE.BoxGeometry(300, 300, 300), new THREE.MeshNormalMaterial() ); scene.add(mesh); tick(); // 毎フレーム時に実行されるループイベントです function tick() { // レンダリング renderer.render(scene, camera); requestAnimationFrame(tick); } } </script> </head> <body> <canvas id="myCanvas"></canvas> </body> </html>