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

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

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

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

解決済

Three.jsでMMDを表示させようとすると, loader.load(..)でローカルのファイルのMMDが表示できない。

misogil
misogil

総合スコア13

Three.js

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

1回答

0評価

0クリップ

2503閲覧

投稿2017/06/08 05:57

###前提・実現したいこと
ARでMMDのファイルを出せるようにしたい。
jsartoolkit, three.jsを使って, マーカーにMMDを表示させたい。

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

error { target: XMLHttpRequest, isTrusted: true, lengthComputable: false, loaded: 0, total: 0, eventPhase: 0, bubbles: false, cancelable: false, defaultPrevented: false, composed: false, timeStamp: 1496901170109509 } おそらく, onErrorのときのconsole.log()によるもの

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

JavaScript

barcode_number = 0; function set_BarcodeMarkerNumber(number){ barcode_number = number; } window.ARThreeOnLoad = function() { ARController.getUserMediaThreeScene({maxARVideoSize: 320, cameraParam: 'Data/camera_para-iPhone 5 rear 640x480 1.0m.dat', onSuccess: function(arScene, arController, arCamera) { document.body.className = arController.orientation; arController.setPatternDetectionMode(artoolkit.AR_MATRIX_CODE_DETECTION); var clock = new THREE.Clock(); var renderer = new THREE.WebGLRenderer({antialias: true}); if (arController.orientation === 'portrait') { var w = (window.innerWidth / arController.videoHeight) * arController.videoWidth; var h = window.innerWidth; renderer.setSize(w, h); renderer.domElement.style.paddingBottom = (w-h) + 'px'; } else { if (/Android|mobile|iPad|iPhone/i.test(navigator.userAgent)) { renderer.setSize(window.innerWidth, (window.innerWidth / arController.videoWidth) * arController.videoHeight); } else { renderer.setSize(arController.videoWidth, arController.videoHeight); document.body.className += ' desktop'; } } document.body.insertBefore(renderer.domElement, document.body.firstChild); var markerRoot = arController.createThreeBarcodeMarker(20); arScene.scene.add(markerRoot); // outline var effect = new THREE.OutlineEffect(renderer); // this is a trick to draw outline correctly(?) arScene.camera.projectionMatrix.elements[15] = 0.001; // light var ambient = new THREE.AmbientLight( 0x666666 ); arScene.scene.add( ambient ); var directionalLight = new THREE.DirectionalLight( 0x887766 ); directionalLight.position.set( -1, 1, 1 ).normalize(); arScene.scene.add( directionalLight ); // model, dance, audio var modelFile = 'models/mmd/miku/miku_v2.pmd'; var vmdFiles = ['models/mmd/vmds/wavefile_v2.vmd']; var audioFile = 'https://rawgit.com/mrdoob/three.js/dev/examples/models/mmd/audios/wavefile_short.mp3'; var audioParams = {delayTime: 160 * 1 / 30}; var onProgress = function(xhr) { if (xhr.lengthComputable) { var percentComplete = xhr.loaded / xhr.total * 100; console.log( Math.round(percentComplete, 2) + '% downloaded' ); } }; var onError = function(xhr) { console.error(xhr); console.log("hogehoge"); }; var helper = new THREE.MMDHelper(); var loader = new THREE.MMDLoader(); //loader.setTextureCrossOrigin('anonymous'); var ready = false; var mesh, ikHelper, physicsHelper; loader.load(modelFile, vmdFiles, function(object){ mesh = object; arScene.add(mesh); helper.add(mesh); helper.setAnimation(mesh); ikHelper = new THREE.CDIKHelper(mesh); ikHelper.visible = false; arScene.add(ikHelper); helper.setPhysics(mesh); physicsHelper = new THREE.MMDPhysicsHelper(mesh); physicsHelper.visible = false; arScene.add(physicsHelper); helper.unifyAnimationDUration(); console.log('heyhey'); markerRoot.add(mesh); ready = true; }, onProgress, onError); /** loader.load(modelFile, vmdFiles, function(object) { mesh = object; helper.add(mesh); helper.setAnimation(mesh); helper.setPhysics(mesh); loader.loadAudio(audioFile, function (audio, listener) { listener.position.z = 1; helper.setAudio(audio, listener, audioParams); helper.unifyAnimationDuration(); arScene.scene.add(audio); arScene.scene.add(listener); markerRoot.add(mesh); ready = true; }, onProgress, onError); }, onProgress, onError); **/ var tick = function() { arScene.process(); if (ready) { // this is a trick to let Physics go correctly // with scale and rotation setting mesh.scale.set(1.0, 1.0, 1.0); var parent = mesh.parent; parent.remove(mesh); mesh.rotation.x = 0; mesh.updateMatrixWorld(true); helper.animate(clock.getDelta()); mesh.rotation.x = 60 * Math.PI / 180; mesh.scale.set(0.1, 0.1, 0.1); parent.add(mesh); mesh.updateMatrixWorld(true); } arScene.renderOn(effect); requestAnimationFrame(tick); }; tick(); }}); delete window.ARThreeOnLoad; }; if (window.ARController && ARController.getUserMediaThreeScene) { ARThreeOnLoad(); }

###試したこと
https://takahirox.github.io/mmd-ar/examples/barcode.html
ここのソースコードを利用しているが, ここではモデルのパスが
var model = 'https://rawgit.com/mrdoob/three.js/dev/examples/models/mmd/miku/miku_v2.pmd'
var vmdFiles = ['https://rawgit.com/mrdoob/three.js/dev/examples/models/mmd/vmds/wavefile_v2.vmd']
となっている。これをローカルに変更(上のソースのように)したら, エラーが起きるようになった。

ネットではローカルのファイルを指定するようなものが多いので、うまくいくとおもったがなかなか上手くいかない..。

###補足情報(言語/FW/ツール等のバージョンなど)
Artoolkit5, three.js, MMD

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

kanimaru

2017/06/08 06:43

htmlとほかのスクリプトはありませんか?多分file:によるものかとおもいますが、適当にサーバ立ててlocalhostでアクセスしてもダメですか?
misogil

2017/06/08 06:58

python3でローカルにサーバをたててやってみると解決しました。 すごく助かりました。ありがとうございました。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Three.js

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