前提・実現したいこと
dotinstallでThree.jsを学習中です。#13 Geometryについて見ていこうで事件発生
発生している問題・エラーメッセージ
Uncaught TypeError: Cannot read property 'addEventListener' of undefined at new THREE.OrbitControls (OrbitControls.js:1100) at (index):54 at (index):71
該当のソースコード
JavaScript
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>Three.js Practice</title> 6</head> 7<body> 8 <div id="stage"></div> 9 <script src="js/three.min.js"></script> 10 <script src="js/OrbitControls.js"></script> 11 <script> 12 (function() { 13 'use strict'; 14 15 let scene; 16 let box; 17 let light; 18 let ambient; 19 let camera; 20 let gridHelper; 21 let axisHelper; 22 let lightHelper; 23 let renderer; 24 let width = 500; 25 let height = 250; 26 let controls; 27//scene 28 scene = new THREE.Scene(); 29//mesh 30 box = new THREE.Mesh( 31 new THREE.BoxGeometry(50, 50, 50), 32 new THREE.MeshLambertMaterial({color: 0xff0000 }) 33 ); 34 box.position.set(0, 0, 0); 35 scene.add(box); 36//light 37 light = new THREE.DirectionalLight(0xffffff, 1); 38 light.position.set(0, 100, 30); 39 scene.add(light); 40 ambient = new THREE.AmbientLight(0x404040); 41 scene.add(ambient); 42//camera 43 camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000); 44 camera.position.set(200, 100, 300); 45 camera.lookAt(scene.position); 46//helper 47 gridHelper = new THREE.GridHelper(200, 50); 48 scene.add(gridHelper); 49 axisHelper = new THREE.AxisHelper(1000); 50 scene.add(axisHelper); 51 lightHelper = new THREE.DirectionalLightHelper(light, 20); 52 scene.add(lightHelper); 53//controls 54 controls = new THREE.OrbitControls(camera); // <- **エラー泣** 55 // controls.autoRotate = true; 56//renderer 57 renderer = new THREE.WebGLRenderer({ antialias: true }); 58 renderer.setSize(width, height); 59 renderer.setClearColor(0xefefef); 60 renderer.setPixelRatio(window.devicePixelRatio); 61 document.getElementById('stage').appendChild(renderer.domElement); 62 63 64 function render() { 65 requestAnimationFrame(render); 66 renderer.render(scene, camera); 67 } 68 render(); 69 70 })(); // <- **エラー** 71 </script> 72</body> 73</html>
試したこと
dotinstallの用意したお手本コードと自分のコードが変わらないことを確認
補足情報(FW/ツールのバージョンなど)
Three.jsのバージョンだけが自分とdotinstallさんとで違います。
自分はThree.js r114対してdotinstallさんはThree.js r75です。
それとOrbitControls.js部分のエラーOrbitControls.js:1100は
JavaScript
1scope.domElement.addEventListener( 'contextmenu', onContextMenu, false ); 2 3```で[OrbitControls.js](https://github.com/mrdoob/three.js/blob/dev/examples/js/controls/OrbitControls.js)の1100行目のことです。お願いします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/03/12 04:24