Three.jsでのMMDHelperでTHREE.MMDHelper is not a constructorのエラーが出る。

###前提・実現したいこと
three.jsとartoolkit5を利用して,マーカーに反応してMMDモデルを出したいのだが,
MMDモデルを出すコードでTHREE.MMDHelper is not a constructorのエラーが発生する。

###発生している問題・エラーメッセージ

THREE.MMDHelper is not a constructor
黒い画面が右上に小さく出てくるだけ。

###該当のソースコード

JavaScript
1<html>
2<head>
3<title>Pattern marker example with Three.js</title>
4<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
5<style>
6html,body {
7	margin: 0;
8	padding: 0;
9	width: 100%;
10	text-align: center;
11	overflow-x: hidden;
12}
13.portrait canvas {
14	transform-origin: 0 0;
15	transform: rotate(-90deg) translateX(-100%);
16}
17.desktop canvas {
18 	transform: scale(-1, 1);
19}
20</style>
21</head>
22<body>
23
24<h1>Pattern marker example with Three.js</h1>
25<p>On Chrome on Android, tap the screen to start playing video stream.</p>
26<p>Show  <a href="https://github.com/artoolkit/artoolkit5/blob/master/doc/patterns/Hiro%20pattern.pdf">Hiro pattern</a> and <a href="https://github.com/artoolkit/artoolkit5/blob/master/doc/patterns/Kanji%20pattern.pdf">Kanji pattern</a> to camera to display a colorful objects on top of them. Tap the screen to rotate the objects.
27
28<p>&larr; <a href="index.html">Back to examples</a></p>
29
30<script async src="./jsartoolkit5/build/artoolkit.min.js"></script>
31<script async src="./jsartoolkit5/examples/js/third_party/three.js/three.min.js"></script>
32<script async src="./jsartoolkit5/js/artoolkit.three.js"></script>
33
34
35<script src="js/libs/mmdparser.min.js"></script>
36<script src="js/libs/ammo.js"></script>
37
38<script src="js/loaders/TGALoader.js"></script>
39<script src="js/loaders/MMDLoader.js"></script>
40<script src="js/effects/OutlineEffect.js"></script>
41<script src="js/animation/CCDIKSolver.js"></script>
42<script src="js/animation/MMDPhysics.js"></script>
43
44<script src="js/controls/OrbitControls.js"></script>
45
46<script src="js/Detector.js"></script>
47<script src="js/libs/stats.min.js"></script>
48<script src="js/libs/dat.gui.min.js"></script>
49<script>
50
51window.ARThreeOnLoad = function() {
52
53
54    ARController.getUserMediaThreeScene({maxARVideoSize: 320, cameraParam: './jsartoolkit5/examples/Data/camera_para-iPhone 5 rear 640x480 1.0m.dat',
55	onSuccess: function(arScene, arController, arCamera) {
56
57		document.body.className = arController.orientation;
58
59		var renderer = new THREE.WebGLRenderer({antialias: true});
60		if (arController.orientation === 'portrait') {
61			var w = (window.innerWidth / arController.videoHeight) * arController.videoWidth;
62			var h = window.innerWidth;
63			renderer.setSize(w, h);
64			renderer.domElement.style.paddingBottom = (w-h) + 'px';
65		} else {
66			if (/Android|mobile|iPad|iPhone/i.test(navigator.userAgent)) {
67				renderer.setSize(window.innerWidth, (window.innerWidth / arController.videoWidth) * arController.videoHeight);
68			} else {
69				renderer.setSize(arController.videoWidth, arController.videoHeight);
70				document.body.className += ' desktop';
71			}
72		}
73
74		document.body.insertBefore(renderer.domElement, document.body.firstChild);
75
76		var rotationV = 0;
77		var rotationTarget = 0;
78
79		// ここから
80
81		renderer.domElement.addEventListener('click', function(ev) {
82			ev.preventDefault();
83			rotationTarget += 1;
84		}, false);
85
86        var helper = new THREE.MMDHelper();
87        var fmodel = './models/pmd/miku_v2.pmd';
88        var fvmd = ['./models/vmd/wavefile_v2.vmd'];
89
90        var onProgress = function (xhr) {
91        };
92        var onError = function (xhr) {
93            alert('読み込みに失敗しました。');
94        };
95
96        var loader = new THREE.MMDLoader();
97        loader.load(fmodel, fvmd, function (object) {
98
99            mesh = object;
100            mesh.position.y = -10;
101            mesh.position.z = 0.5;
102            helper.add(mesh);
103            helper.setAnimation(mesh);
104
105            /*
106             * Note: create CCDIKHelper after calling helper.setAnimation()
107             */
108            ikHelper = new THREE.CCDIKHelper( mesh );
109            ikHelper.visible = false;
110            scene.add( ikHelper );
111
112            /*
113             * Note: You're recommended to call helper.setPhysics()
114             *       after calling helper.setAnimation().
115             */
116            //helper.setPhysics( mesh );
117            physicsHelper = new THREE.MMDPhysicsHelper( mesh );
118            physicsHelper.visible = false;
119            scene.add( physicsHelper );
120
121            //helper.unifyAnimationDuration( { afterglow: 2.0 } );
122        }, onProgress, onError);
123
124        // ここまで
125
126        var sphere = new THREE.Mesh(
127			new THREE.SphereGeometry(0.5, 8, 8),
128			new THREE.MeshNormalMaterial()
129		);
130		sphere.material.shading = THREE.FlatShading;
131		sphere.position.z = 0.5;
132
133		var torus = new THREE.Mesh(
134			new THREE.TorusGeometry(0.3, 0.2, 8, 8),
135			new THREE.MeshNormalMaterial()
136		);
137		torus.material.shading = THREE.FlatShading;
138		torus.position.z = 0.5;
139		torus.rotation.x = Math.PI/2;
140
141		arController.loadMarker('./jsartoolkit5/examples/Data/patt.hiro', function(markerId) {
142			var markerRoot = arController.createThreeMarker(markerId);
143			markerRoot.add(loader);
144			arScene.scene.add(markerRoot);
145		});
146
147		arController.loadMarker('./jsartoolkit5/examples/Data/patt.kanji', function(markerId) {
148			var markerRoot = arController.createThreeMarker(markerId);
149			markerRoot.add(torus);
150			arScene.scene.add(markerRoot);
151		});
152
153		var tick = function() {
154			arScene.process();
155
156			rotationV += (rotationTarget - sphere.rotation.z) * 0.05;
157			sphere.rotation.z += rotationV;
158			torus.rotation.y += rotationV;
159			rotationV *= 0.8;
160
161			arScene.renderOn(renderer);
162			requestAnimationFrame(tick);
163		};
164
165		tick();
166
167	}});
168
169	delete window.ARThreeOnLoad;
170
171};
172
173if (window.ARController && ARController.getUserMediaThreeScene) {
174	ARThreeOnLoad();
175}
176</script>
177
178</body>
179</html>

###試したこと
Three.jsのソースコードのexampleが正常に動くことを確認した。
なお, この自前の部分のコードがなければARとして正常に動くことも確認している
ライブラリなどは, three.jsのexampleと同じものを入れた。
しかし, 右上に黒い画面が出てくるだけで正常にカメラも立ち上がらない。

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

行動規範の内容に同意します

回答1件

ベストアンサー

artoolkit5 のサンプルに同梱されている three.js は、２年前のr71と、だいぶ古いもののようです。
現在、Three.jsはr85で、特にr83からMMDLoaderは変更が大きく、最新バージョンをThree.js.orgから取得したとしても、うまくいかないでしょう。

また、さらに残念なことに、Three.js の r71では、MMDloaderはまだ作られていませんでした。

そのため、 jsartoolkit5/examples/js/third_party/three.js/ のフォルダの中の three.min.js を、最新のr85（または手元にあるMMDLoaderの中のバージョン）として、MMDLoaderが動くかどうか（そしてartoolkitが動くか）を試してみるとよいかもしれません。

または、three.js でMMDLoaderが作られた、一番古いバージョンである r74を試してみるのもアリでしょう。

three.js r74

投稿2017/06/05 14:12