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

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

質問する

ただいまの
回答率

88.37%

blenderのエクスポート .jsonデータに問題があるのでしょうか？

解決済

回答 3

投稿 ・編集

  • 評価
  • クリップ 0
  • VIEW 1,423
kimr_n

kimr_n

score 12

物理の授業用教材を作成している高校教員です。
javascript (three.js)の初心者です。３Dのモデルデータ（spring05.json:ばねモデル）をblenderから　.json　の形式でエクスポートしthree.jsで読み込ませ動かしています。動くことは動くのですが、chromeでエラーを見ると、

Uncaught TypeError: Cannot read property 'scale' of undefined（下から約１０行のところです）

と表示されます。そのためか、フルスクリーンや画面のボックスを押しても実行が出来ません。原因は何処にあるのでしょうか。ご教示のほどよろしくお願いします。 

<!DOCTYPE html>
<html lang="ja">
    <head>
        <title>　</title>
        <meta charset="utf-8">
        <script src="three.min.js"></script>
    </head>
<style>
    body {
    margin: 0px 0px 0px;
    padding:0;
    overflow: hidden;
    background-color: gray
    }
    #info {
        color: #ccc;
        text-align: left;
        position: absolute;
        top: 0px; width: 50%;
        padding: 0px;
    }
    button, input, select, textarea {    
    margin:0;
    padding: 0;
    background-color: #006060;
    border-style: none;
    color: white;    
    }
</style>
<body>
        <div id="info">
            <button id="menu1" style="position:absolute; left:0px;width:80px;font-size :8px">メニュー１</button>
            <button id="menu2" style="position:absolute; left:100px;width:80px;font-size :8px">メニュー２</button>
        </div>
</body>
<script>
///////////////////////////////////////////////////////////////////////////////
//
var spring,ball,scene,scene2d,camera,camera2d;
var wx =1366;
var wy =768;

var t=0.0;
var dt=0.05;
//
//イベント用
//document.addEventListener( 'mousedown', clickPosition, false );
//document.addEventListener( 'mouseup', clickPosition, false );
window.addEventListener( 'resize', onWindowResize, false );
//

//レンダラー
var renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(wx, wy);
//renderer.setSize(1366/4, 768/4); 
renderer.setClearColor( 0x003d3d, 1 )
renderer.autoClear = false;
document.body.appendChild(renderer.domElement);

///////////////////////////////////////////////////////////////////////////////
init();
animate();
////////////////////////////////////////////////////////////////////////////////

document.getElementById( 'menu1' ).addEventListener( 'click', function () {
    dt+=0.02;
} );

document.getElementById( 'menu2' ).addEventListener( 'click', function () {
    dt-=0.02;
} );

//画面縦、横の時のリサイズ
function onWindowResize() {
    var orientation = screen.orientation || screen.mozOrientation || screen.msOrientation;
    if (orientation.type === "portrait-primary" || orientation.type === "portrait-secondary") {

    /////////////縦向き　フルスクリーン解除
     if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen(); //Chrome15+, Safari5.1+, Opera15+
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen(); //FF10+
    } else if (document.msExitFullscreen) {
        document.msExitFullscreen(); //IE11+
    } else if(document.cancelFullScreen) {
        document.cancelFullScreen(); //Gecko:FullScreenAPI仕様
    } else if(document.exitFullscreen) {
        document.exitFullscreen(); // HTML5 Fullscreen API仕様
    }
    wx =innerWidth/2;
    wy =innerHeight/2;
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(innerWidth, innerWidth/2); 
    //renderer.setSize(1366, 768); 

    } else {
    ////////////横向き
    wx =innerWidth;
    wy =innerHeight;
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(innerWidth, innerHeight); 
    //renderer.setSize(screen.width, screen.height); 
    }
}

//フルスクリーン化
document.body.onclick = function() {
      var orientation = screen.orientation || screen.mozOrientation || screen.msOrientation;
      if (orientation.type === "portrait-primary" || orientation.type === "portrait-secondary") {
        //縦向き
        //何もしない
      } else {
        //横向き　フルスクリーンへ
        if (this.webkitRequestFullScreen) { 
            this.webkitRequestFullScreen();
        }
            else if (this. mozRequestFullScreen) {
                this. mozRequestFullScreen();
            }
            else {
                alert("not found")
            }
        renderer.setPixelRatio(window.devicePixelRatio);
        //renderer.setSize(1366, 768);
          renderer.setSize(innerWidth, innerHeight); 
        }
}

////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////    
function init() {  
    camera = new THREE.OrthographicCamera(-wx/2, wx/2, wy/2, -wy/2, 0, 10000);
    //camera = new THREE.PerspectiveCamera(60, wx / wy, 0.001, 1000);
    camera.position.set(0, 0, 5000);
    scene = new THREE.Scene();
    scene.add(new THREE.AmbientLight(0xffaa00));//環境光

    var light = new THREE.DirectionalLight(0xFFFFFF,1);
    light.position.set(0, 1, 1);
    scene.add(light);

    //ばね
    var loader = new THREE.JSONLoader();
    loader.load("spring03.json", loadSlingshot);
    function loadSlingshot(geometry, materials)
    {
        spring = new THREE.Mesh(geometry, materials);
        spring.position.set(0, 0, 0);
        spring.scale.set(1, 30,30);
        scene.add(spring);
    }

     //球
    camera2d = new THREE.OrthographicCamera(-wx/2, wx/2, wy/2, -wy/2, 0.1, 2000);
    scene2d = new THREE.Scene();

    var texture = new THREE.TextureLoader().load ("g.png");
    var material = new THREE.SpriteMaterial( { map: texture } );
    ball = new THREE.Sprite( material );

    ball.position.set(0, 0, -1);
    ball.scale.set(80, 80, 1);
    //
    scene2d.add(ball);
}
/////////////////////////////////////////////  
function animate() {
    requestAnimationFrame(animate);

    t +=dt;

    //伸び x
    spring.scale.x = 20.5+7*Math.sin(t);//    <----------Uncaught TypeError: Cannot read property 'scale' of undefined
    //球
    ball.position.x=365+111*Math.sin(t);
    ball.position.y=0;
//
    renderer.clear();
    renderer.render(scene, camera);
    renderer.render(scene2d, camera2d);
}
//////////////////////////////////////////////////////////////////////////////////////////////////
        </script>
</html>

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

more_vert1 件の質問への追記・修正依頼

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    kei344

    2018/02/18 01:01

    質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

    キャンセル

回答 3 件

link

+1 

loader.load("spring03.json", loadSlingshot);


になっているので、 

loader.load("spring05.json", loadSlingshot);


ばねデータのモデルである「spring05.json」にしたら、モデルデータが読み込まれ、 

function loadSlingshot(geometry, materials)
{
spring = new THREE.Mesh(geometry, materials);
spring.position.set(0, 0, 0);
spring.scale.set(1, 30,30);
scene.add(spring);
}


ここのメッシュの作成部分が処理され、動くようになるのでは？

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/02/18 01:33

    spring05.json のデータもあったので変更しましたが、やはりうまくいきません。

    キャンセル

link

checkベストアンサー

0

ざっと読んだ中に1箇所問題を見つけました。

loader.load は非同期で実行されるため、1回目のanimate()より後に spring が定義されることになります。
animate() の中で spring の有無を判定するか、loadSlingshotの中で1回目のanimate()を実行するかどちらかでは。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/02/18 19:53

    回答に書いた通りなのですが･･･。

    キャンセル

  • 2018/02/18 20:55

    「animate() の中で spring の有無を判定する」というのは、このような書き方でいいのでしょうか？お手数をおかけして申し訳ありません。

    function animate() {
    requestAnimationFrame(animate);

    if (typeof spring === "undefined") {
    //何もしない
    }
    else{
    t +=dt;
    //伸び x
    spring.scale.x = 20.5+7*Math.sin(t);// <--- undefined
    //球
    ball.position.x=365+111*Math.sin(t);
    ball.position.y=0;
    //
    renderer.clear();
    renderer.render(scene, camera);
    renderer.render(scene2d, camera2d);
    }
    }

    キャンセル

  • 2018/02/18 21:26

    if ( spring && spring.scale && spring.scale.x ) { /* 実行する */ }
    とかできますが、聞く前に確認してください。

    キャンセル

link

0

さっき回答したのとは別の視点なので改めて回答します。

materialsが、定義されていないっぽいので、ここでエラーになっている可能性が高いです。 

    loader.load("spring03.json", loadSlingshot);
    function loadSlingshot(geometry, materials)
    {
        var mat = new THREE.MeshFaceMaterial(materials);//←追加で直るかも
        spring = new THREE.Mesh(geometry, mat);

ちなみに同じかと思われる現象を見つけました。
https://teratail.com/questions/33951

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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

SNSアカウントでログイン

teratailアカウントでログイン

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る