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

物理の授業用教材を作成している高校教員です。
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>

kei344

2018/02/17 16:01

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

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

回答3件

javascript
1loader.load("spring03.json", loadSlingshot);
2

になっているので、

javascript
1loader.load("spring05.json", loadSlingshot);
2

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

javascript
1function loadSlingshot(geometry, materials)
2{
3spring = new THREE.Mesh(geometry, materials);
4spring.position.set(0, 0, 0);
5spring.scale.set(1, 30,30);
6scene.add(spring);
7}

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

投稿2018/02/17 16:13

kszk311

総合スコア3404

kimr_n

2018/02/17 16:33

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

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

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

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

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

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

投稿2018/02/17 16:48

編集2018/02/17 16:52

kszk311

総合スコア3404

ベストアンサー

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

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

投稿2018/02/17 16:34

kei344

総合スコア69398

kimr_n

2018/02/18 09:02

ありがとうございました。init();を後に書いたらundefinedは未解決ですが、画面が動き、メニュー、フルスクリーンは動くのでとりあえずこのまま使います。

kimr_n

2018/02/18 10:48

chromeのconsoleを見ると、データが100％読み込まれないと、undefinedになってしまいます。どのように書き直したらいいのでしょうか？ menu0.html:203 Uncaught ReferenceError: spring is not defined at animate (menu0.html:203) at init (menu0.html:192) at menu0.html:195 animate @ menu0.html:203 init @ menu0.html:192 (anonymous) @ menu0.html:195 menu0.html:151 9.918951438971417% loaded menu0.html:203 Uncaught ReferenceError: spring is not defined at animate (menu0.html:203) animate @ menu0.html:203 requestAnimationFrame (async) animate @ menu0.html:199 init @ menu0.html:192 (anonymous) @ menu0.html:195 menu0.html:151 100% loaded

kei344

2018/02/18 10:53

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

kimr_n

2018/02/18 11: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); } }

kei344

2018/02/18 12:26

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

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

あなたの回答