質問編集履歴

1 console.logの結果を追加しました。

sakuramoti

sakuramoti score 20

2017/11/10 13:01  投稿

three.js を使って表示したメッシュの移動について
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 );
   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);
}
```
```
  • JavaScript

    38727 questions

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

  • HTML5

    10508 questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • Three.js

    239 questions

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

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