質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.23%

THREE.OrbitControls();エラー:Uncaught TypeError: Cannot read property 'addEventListener' of undefined

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 559

cl_

score 9

前提・実現したいこと

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

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Three.js Practice</title>
</head>
<body>
  <div id="stage"></div>
  <script src="js/three.min.js"></script>
  <script src="js/OrbitControls.js"></script>
  <script>
  (function() {
    'use strict';

    let scene;
    let box;
    let light;
    let ambient;
    let camera;
    let gridHelper;
    let axisHelper;
    let lightHelper;
    let renderer;
    let width = 500;
    let height = 250;
    let controls;
//scene
    scene = new THREE.Scene();
//mesh
    box = new THREE.Mesh(
      new THREE.BoxGeometry(50, 50, 50),
      new THREE.MeshLambertMaterial({color: 0xff0000 })
    );
    box.position.set(0, 0, 0);
    scene.add(box);
//light
    light = new THREE.DirectionalLight(0xffffff, 1);
    light.position.set(0, 100, 30);
    scene.add(light);
    ambient = new THREE.AmbientLight(0x404040);
    scene.add(ambient);
//camera
    camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
    camera.position.set(200, 100, 300);
    camera.lookAt(scene.position);
//helper
    gridHelper = new THREE.GridHelper(200, 50);
    scene.add(gridHelper);
    axisHelper = new THREE.AxisHelper(1000);
    scene.add(axisHelper);
    lightHelper = new THREE.DirectionalLightHelper(light, 20);
    scene.add(lightHelper);
//controls
    controls = new THREE.OrbitControls(camera); // <- **エラー泣**
    // controls.autoRotate = true;
//renderer
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(width, height);
    renderer.setClearColor(0xefefef);
    renderer.setPixelRatio(window.devicePixelRatio);
    document.getElementById('stage').appendChild(renderer.domElement);


    function render() {
      requestAnimationFrame(render);
      renderer.render(scene, camera);
    }
    render();

  })();                  // <- **エラー**
  </script>
</body>
</html>

試したこと

dotinstallの用意したお手本コードと自分のコードが変わらないことを確認

補足情報(FW/ツールのバージョンなど)

Three.jsのバージョンだけが自分とdotinstallさんとで違います。
自分はThree.js r114対してdotinstallさんはThree.js r75です。
それとOrbitControls.js部分のエラーOrbitControls.js:1100は

scope.domElement.addEventListener( 'contextmenu', onContextMenu, false );

OrbitControls.jsの1100行目のことです。お願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

var OrbitControls = function ( object, domElement ) {

    if ( domElement === undefined ) console.warn( 'THREE.OrbitControls: The second parameter "domElement" is now mandatory.' );


three.js/OrbitControls.js at master · mrdoob/three.js · GitHub

とのことですが……、警告出ていませんか?


バージョン r110 からみたいですね。

Make domElement to a mandatory parameter for all controls. #17612 (@Mugen87)
Release r110 · mrdoob/three.js · GitHub

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/03/12 13:24

    domElementのところにdocument.getElementById('stage')を置いたらできました。
    その解決の導線がわかってなかったみたいです、ありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.23%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる