由于摄像头位置，无法在场景中显示three.js元素

我有一个场景包含多个元素，比如一个立方体，圆柱体，球体等等。我在（0,30,40）处设置了场景的摄像头位置，并试图使用此摄像头位置显示所有其他元素。然而，我观察到在下面的代码中，我显示一个简单的移动立方体，它不适用于我需要的场景剩余部分的相机定位，但只适用于其他相机配置。由于摄像头位置，无法在场景中显示three.js元素

在我的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。

这通常如何完成？我知道我也可以使用它的API来改变立方体的位置，并通过玩cube.position.x，cube.position.y和cube.position.z，保持项目所需的相机设置（0,30， 40），并希望找到它在屏幕上显示的立方体位置。但我不确定对上述三个变量做试验和错误是最好的方法。

请指教。

编辑：我试图创建一个场景，其中包括以下

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

我的目标是在屏幕的中心显示它们不管照相机位置I决定于整个场景的（只有一个所有元素的相机位置）。

这是一个jsbin我可以显示多个元素。对于不同的摄像机定位（X，Y，Z），我能够或者通过任一/或两个以下”

在页面的中心显示他们改变元件的尺寸。例如，更改立方体的长度，宽度和高度
更改元素的y位置。例如，cube.position.y

但是，这次我能够将它运行起来，我觉得只有position.y需要改变才有助于它。如果x，y，z都需要改变，那么通过反复试验就很难拿出这个位置。有没有另一种方式，这是做？ 发现它有点难以相信某人基于特定的相机位置将其所有元素都置于其场景中，只需要改变一个坐标（在我的情况下是y坐标）以适应任何其他相机位置。

关于使用camera.lookAt（立方体。这也是建议我对使用这个感到担心，因为在同一场景中，我感兴趣的不仅仅是立方体，还有圆柱体，球体，平面，多面体，torusknot，torus;

来源

2016-04-02 PepperBoy

你为什么不缩小你的元素 – gaitat

@gaitat，感谢gaitat。我花了几个小时尝试了几件事情。请参阅我上面的编辑。 – PepperBoy

在相机看立方体位置（多维数据集后添加到场景）：

camera.lookAt (cube.position);

来源

2016-04-02 19:29:40 kovacsv

感谢kovacsv，请参阅我上面的编辑。我尝试了一些东西。正如我所提到的，我不确定看立方体的位置总是可以成为解决方案，因为我的场景中还有其他元素。 – PepperBoy

您可以使用camera.lookAt中的任何坐标（例如camera.lookAt（new THREE.Vector3（0,0,0））;）。我认为你应该计算你场景的中心，然后看看那个位置。 – kovacsv

由于摄像头位置，无法在场景中显示three.js元素

回答

相关问题