javascript - 由于相机位置，无法在场景中显示三个.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对于同样的。

这通常是如何完成的？我知道我还可以使用它的 API 并通过使用cube.position.x、cube.position.y 和cube.position.z 来更改立方体的位置，保持项目所需的相机设置(0,30， 40)在这种情况下，并希望找到一些立方体位置来显示它在屏幕上。但我不确定对上述三个变量进行反复试验是否是最好的方法。

请指教。

编辑:我尝试创建一个包含以下内容的场景

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

我的目标是将它们显示在屏幕中央，无论我为整个场景决定的相机位置如何(所有元素只有一个相机位置)。

这是一个jsbin我能够在其中显示多个元素。 对于不同的相机定位(x，y，z)，我可以通过以下任一/或两者将它们显示在页面中心'

1. 更改元素的大小。例如改变立方体的长、宽、高
2. 更改元素的 y 位置。例如，cube.position.y

不过，这次我能够让它工作，我觉得只有position.y需要改变这一事实有所帮助。如果 x、y、z 都需要更改，则很难通过反复试验得出位置。 还有其他方法吗？ 有点难以相信，将场景中的所有元素基于特定摄像机位置的人只需要更改一个坐标(在我的例子中为 y 坐标)即可调整到任何其他摄像机位置。

关于使用camera.lookAt(cube.position)，这也是建议的 我对使用这个感到担心，因为在同一个场景中，我感兴趣的不仅仅是立方体，还有圆柱体、球体、平面、多面体、圆环、圆环；

Answer 1

使相机看着立方体位置(在立方体添加到场景之后):

camera.lookAt (cube.position);