Q&A前提・実現したいこと
threejsを利用してWEB開発をしています。
こちらのサイトを参考にして、threejsを利用していますが、カメラの制御が解説のとおりできません。
解決に向け、ご教授いただけないでしょうか？
発生している問題・エラーメッセージ
Uncaught TypeError: Cannot read property 'addEventListener' of undefined at new THREE.OrbitControls (OrbitControls.js:1100) at init (main.js:24)
該当のソースコード
html
1<html> 2<head> 3 <meta charset="utf-8"> 4 <meta name="viewport" content="width=device-width, initial-scale=1,"> 5 <meta name="description" content=""> 6 <meta name="author" content=""> 7 <title>threejs Test</title> 8 <!-- my_css --> 9 <link rel="stylesheet" type="text/css" href="/static/css/mystyle.css"> 10 <!-- bootstrap_css --> 11 12 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" 13 integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> 14</head> 15<body> 16 17<h1>test</h1> 18<div class="canvas_wrapper"> 19 <canvas id="myCanvas"></canvas> 20</div> 21 <!-- my_js --> 22 <script src="static/js/three.min.js"></script> 23 <!-- three.js_js --> 24 <script src="static/js/OrbitControls.js"></script> 25 <script src="static/js/main.js"></script> 26 <!-- bootstrap_js --> 27 <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" 28 integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 29 crossorigin="anonymous"></script> 30 <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" 31 integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" 32 crossorigin="anonymous"></script> 33 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" 34 integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" 35 crossorigin="anonymous"></script> 36</body> 37</html>
js
1// ページの読み込みを待つ 2window.addEventListener('load', init); 3 4function init() { 5 // サイズを指定 6 const width = 960; 7 const height = 540; 8 9 // レンダラーを作成 10 const renderer = new THREE.WebGLRenderer({ 11 canvas: document.querySelector('#myCanvas') 12 }); 13 renderer.setSize(width, height); 14 15 // シーンを作成 16 const scene = new THREE.Scene(); 17 18 // カメラを作成 19 const camera = new THREE.PerspectiveCamera(45, width / height); 20 // カメラの初期座標を設定 21 camera.position.set(0, 0, 1000); 22 23 // カメラコントローラーを作成 24 const controls = new THREE.OrbitControls(camera); 25 26 // 形状とマテリアルからメッシュを作成します 27 const mesh = new THREE.Mesh( 28 new THREE.BoxGeometry(300, 300, 300), 29 new THREE.MeshNormalMaterial() 30 ); 31 scene.add(mesh); 32 33 tick(); 34 35 // 毎フレーム時に実行されるループイベントです 36 function tick() { 37 // レンダリング 38 renderer.render(scene, camera); 39 requestAnimationFrame(tick); 40 } 41}
css
1body { 2 margin: 0; 3 /* overflow: hidden; */ 4} 5 6.canvas_wrapper{ 7 width: 500px; 8 margin: auto; 9} 10 11#myCanvas { 12 display: block; 13 position: absolute; 14 top: 0; 15 right: 0; 16 bottom: 0; 17 left: 0; 18 margin: auto; 19}
補足情報（FW/ツールのバージョンなど）
- three.js:r116
回答1件
0
自己解決
const controls = new THREE.OrbitControls(camera);
こちらのコードを以下のようにする事で解決できました。
var controls = new OrbitControls( camera, renderer.domElement );
参考サイト
three.jsr116
投稿2020/05/02 22:32
総合スコア84
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。