three.js を使って表示したメッシュの移動について

Question

javascript初心者です。

#実現したいこと
ロードしたbunny.objをanimate()関数の中に処理を追加して移動させたり回転させたいです。

#試したこと
animate()関数の中でmeshのx座標にアクセスするのにg_mesh.mesh.position.xと試してみたのですがエラーが起こってしまいます。

どのようにすれば良いのか教えていただけるとありがたいです。

#コード
カメラや光源のinit()は省きます。

var g_mesh;

function init() {
    createMesh();
}

Mesh = function(scene) {
	var manager = new THREE.LoadingManager();
	manager.onProgress = function ( item, loaded, total ) {
	console.log( item, loaded, total );
	};
	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 ) {
	};

	var loader = new THREE.OBJLoader(manager );

	var mesh;

	loader.load( './data/bunny.obj', function( object ) {
		mesh = object.children[0];
		var obj_geometry = mesh.geometry;
		obj_geometry.normalsNeedUpdate = true;
		obj_geometry.computeFaceNormals();
		obj_geometry.computeVertexNormals();
		obj_geometry.scale(700,700,700);
		mesh.castShadow = true;
		mesh.receiveShadow = true;
        mesh.position.set(0,0,0);
        //console.log(mesh.position.x); 0と表示される。
		scene.add(mesh);
        }, onProgress, onError);
        //console.log(mesh.position.x);Uncaught TypeError: Cannot read property 'position' of undefinedと表示され、画面に何も表示されなくなってしまう。
}

function createMesh() {
  g_mesh = new Mesh(g_scene);
}


function animate() {
   // console.log(g_mesh.mesh);undefined と表示される。
    requestAnimationFrame(animate);
    g_renderer.render(g_scene, g_camera);
}

Comments

[mattari_panda]

コードの前後に```を入れてください。コードも全て書くと原因がわかるかもです、またインデントも整えていただけると見やすくなります。　あと現状どこまで表示されているか、console.log()の結果なども書いていただけるとアドバイスしやすいです。

Answer 1

#OBJファイルのロードの完了を待ちましょう
全てのコードが書かれていないため、推測になってしまうのですがanimate();の実行のタイミングが問題だと思われます。

まずOBJファイルのロードが完了しなければ、meshの値を参照することが出来ないことを理解しましょう。

//console.log(mesh.position.x); 0と表示される。

このコメント以外の場所ではロードが完了していないため、エラーになるので表示されません。
animate();の実行をローダーの中に書くか、もしくは完了するまではifなどで参照しないようにすれば良いです。

こちらに動いている物を書いておきました、参考にしてみてください。
https://codepen.io/mattari-panda/pen/KyaPej

ちなみに全てのコードやThree.js等のバージョン情報、実行環境などを書いていただけると、他の方も答えやすいと思います。

Comments

[sakuramoti]

遅くなり申し訳ありません。　おっしゃる通りifで条件付けしたら上手くいきました。　実際に動いているものまで書いていただき大変参考になりました！　ありがとうございました！