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

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

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

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

JavaScript

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

Q&A

解決済

1回答

6089閲覧

OBJloader で読み込んだobjファイルのアニメーション

KenjiTakeda

総合スコア9

Three.js

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

JavaScript

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

0グッド

1クリップ

投稿2016/10/29 07:26

編集2016/10/31 03:30

###前提・実現したいこと
はじめまして。three.js を初めて取り組んでいます。
3Dソフト(Cinema 4D=>blender)で書き出した .objファイルを、サイトを参考に読み込みして、表示できたのですが、一部のパーツを単純な回転運動をさせたいのです。
よろしくお願いします。

###発生している問題・エラーメッセージ
rotation.z に、インクリメントすればいいのはわかるのですが、(ここからどっちかというとJSの話になるかもしれません)loop()など別関数から、このパラメータを操作しようとすると、定義されていない、もしくは、パラメータがないと言われてしまいます。

エラーメッセージ
Uncaught ReferenceError: object6 is not defined

###該当のソースコード
当該の部分のみ

function init(){ var loader6 = new THREE.OBJMTLLoader(); loader6.load( 'a.obj', 'a.mtl', function ( object6 ) { /*初期状態の設定*/ object6.position.x = 0; object6.position.z = -6.5; object6.position.y = 30.15; object6.rotation.x= 0 * 2 * Math.PI / 360; object6.rotation.y= 0 * 2 * Math.PI / 360; object6.rotation.z= 45 * 2 * Math.PI / 360; scene.add( object6 ); }, onProgress, onError ); } var step = 0; var timer; function loop(){ step++; object6.rotation.z= step * 2 * Math.PI / 360; /*ここで、Uncaught ReferenceError: object6 is not defined となる*/ renderer.render( scene, camera ); timer = requestAnimationFrame(loop); }

init();
loop();
###試したこと
内部で定義した、単純な立方体などは、回転アニメーションすることができました。

###補足情報(言語/FW/ツール等のバージョンなど)
ブラウザは、Chrome,FF

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

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

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

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

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

mattari_panda

2016/10/31 01:35

質問ですが、最後に実行している「animate();」は関数loopを実行しているという認識で良いですか? あとコード部分の前後に「```」を入れると読みやすくなると思うので試してみてください。
KenjiTakeda

2016/10/31 03:23

ありがとうございます。すいません、間違えてました。init(); のあと loop(); を実行します。ソースの写し間違えでした。編集しておきます。 
guest

回答1

0

ベストアンサー

(ここからどっちかというとJSの話になるかもしれません)

おっしゃる通りJavaScriptの問題です。

Uncaught ReferenceError: object6 is not defined

"「object6」は定義されていません" というエラーです。
「object6」は引数ですので、その関数内でしか使えないためこのようなエラーが出ます。

JavaScript

1loader6.load( 'a.obj', 'a.mtl', function ( object6 ) { 2 //object6はここでしか使えない 3} 4//ここではobject6は使えない 5console.log(object6);//Uncaught ReferenceError: object6 is not defined 6 7function loop(){ 8 //もちろんここでもダメ 9 console.log(object6);//Uncaught ReferenceError: object6 is not defined 10} 11loop();

まずは他の場所でも使えるように「定義」する必要があります。

JavaScript

1var objectEX;//定義する。名前は任意です 2 3loader6.load( 'a.obj', 'a.mtl', function ( object6 ) { 4 //objectEXにobject6を代入 5 objectEX = object6; 6} 7//定義済みなので使える 8console.log(objectEX);

また上記のように関数の外で定義し代入しても、今回はLoaderを使っていますのでもう一つ問題が生じます。
「init();」を実行後すぐに「loop();」を実行しても、ロードが終わっておらず、
まだ代入されていない状態なので、objectのrotation.zをインクリメントしようとしても
「rotation」が見つからず他のエラーがでます。

このような場合は「loop();」の実行をloaderが終わるまで待つか、
定義した変数に代入されてからpositionをいじるかのどちらかです。

JavaScript

1var objectEX = null;//nullで定義する 2var step = 0; 3var timer; 4 5loader6.load( 'a.obj', 'a.mtl', function ( object6 ) { 6 //objectEXにobject6を代入 7 objectEX = object6; 8 //他省略 9} 10 11function loop(){ 12 //objectEXの中身があれば実行する 13 if(objectEX){ 14 step++; 15 objectEX.rotation.z= step * 2 * Math.PI / 360; 16 } 17 18 renderer.render( scene, camera ); 19 timer = requestAnimationFrame(loop); 20} 21init(); 22loop();

一つの例ですがこのように書けばロードが完了しだい、rotationの処理が実行されます。

このようなエラーに引っかからないために一度JavaScriptの「スコープ」や「クロージャ」
などを学ぶことをおすすめします。

※現在のThree.jsのリビジョンではOBJMTLLoaderがありませんでしたので、問題のコードでは未検証です。ご了承ください。

投稿2016/10/31 05:31

mattari_panda

総合スコア429

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

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

KenjiTakeda

2016/10/31 07:02

ありがとうございます。 うまくいきました。ちょうど、スコープとかの解説を読んでいたところで助かりました。 JSも、なんちゃってでやってきたので、このあたりちゃんと勉強したいと思います。 感謝です。。 ヾ(´∇`)ノ゙
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問