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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

WebGL

WebGL(ウェブジーエル)は、ウェブブラウザで 3次元コンピュータグラフィックスを表示させるための標準仕様です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

1628閲覧

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

cl_

総合スコア9

Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

WebGL

WebGL(ウェブジーエル)は、ウェブブラウザで 3次元コンピュータグラフィックスを表示させるための標準仕様です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/03/11 06:41

前提・実現したいこと

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行目のことです。お願いします。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

js

1var OrbitControls = function ( object, domElement ) { 2 3 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/11 09:28

編集2020/03/11 10:33
Lhankor_Mhy

総合スコア35865

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

cl_

2020/03/12 04:24

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問