カメラ位置のためにシーン内にthree.js要素を表示できません

Question

私は、複数の要素、たとえば立方体、円柱、球などのシーンを持っています。シーンのカメラ位置を（0,30,40）に設定し、このカメラ位置を使用して他のすべての要素を表示しようとしています。

しかし、単純な移動キューブを表示する以下のコードでは、残りのシーンで必要なカメラの配置では機能しませんが、別のカメラ構成でのみ動作することがわかりました。

下記の私のjavascriptコードの行30-32を参照してください（私はコメントしました）。基本的には、カメラの位置（0、-400,400）で動作しますが、残りの要素に対応するために、プロジェクト設定の一部として必要なカメラ位置（0,30,40）では機能しません。

 var angularSpeed = 0.2; 
      var lastTime = 0; 

      function animate(){ 
       var time = (new Date()).getTime(); 
       var timeDiff = time - lastTime; 
       var angularChange = angularSpeed * timeDiff * 2 * Math.PI/1000; 
       cube.rotation.y -= angularChange; 
       lastTime = time; 

       renderer.render(scene, camera); 

       requestAnimationFrame(function(){ 
        animate(); 
       }); 
      } 

      var renderer = new THREE.WebGLRenderer(); 
      renderer.setSize(window.innerWidth, window.innerHeight); 
      document.body.appendChild(renderer.domElement); 

      var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 1000); 

      /* Works */ 
      camera.position.x = 0; 
      camera.position.y = -400; 
      camera.position.z = 400; 

      /* Does not work, but I want these to be the camera settings */ 
//   camera.position.x = 0; 
//   camera.position.y = 30; 
//   camera.position.z = 40; 

      camera.rotation.x = 0.70; 

      var scene = new THREE.Scene(); 

      var cube = new THREE.Mesh(new THREE.CubeGeometry(200,100,100), new THREE.MeshNormalMaterial()); 

      scene.add(cube); 

      animate(); 

私はjsbinを作成しました。

これは通常どのように行われますか？キューブの位置を変更することもできます。キューブの位置を変更するには、cube.position.x、cube.position.y、およびcube.position.zを使用して、プロジェクトで必要なカメラ設定（0,30、 40）を使用して、スクリーン上に表示される立方体の位置を見つけることを望みます。しかし、上記の3つの変数の試行錯誤が最善の方法であるかどうかはわかりません。

お知らせください。

編集：私は私の目的は関係なく、私はシーン全体のために決定したカメラ位置（一つだけの画面の中央でそれらを表示するには、以下の通りであった

var cube,cylinder,sphere,plane,polyhedron,torusknot,torus; 

を含んでシーンを作成しようとしましたすべての要素のカメラ位置）。

これはjsbinで、複数の要素を表示できました。 は、異なるカメラ位置（X、Y、Z）の場合、Iは、要素のサイズを変更するいずれか/または両方の以下」

1. のいずれかによって、ページの中央にそれらを表示することができました。たとえば、立方体の長さ、幅および高さを変更する。
2. 要素のy位置を変更する。例えば、cube.position.y

しかし、私は今回は動作させることができましたが、position.yだけを変更する必要があるという事実が助けになると感じています。 x、y、zがすべて必要な変更をしていれば、試行錯誤して立場を立てることは難しいでしょう。 別の方法がありますか？ 特定のカメラ位置に基づいてシーン内のすべての要素をベースにしている人が、他のカメラ位置に合わせるために1つの座標（私の場合はy座標）を変更するだけでよいと考えるのは少し難しいです。

camera.lookAt（キューブ。私はこれを使うことを心配しています。なぜなら、同じシーンでは、立方体だけでなく、円柱、球体、平面、多面体、トーラスノット、トーラスにも興味があります。

Answer 1

（立方体がシーンに追加した後）キューブの位置でカメラを見てください：

camera.lookAt (cube.position);