由于相机位置

时间:2016-04-02 17:49:17

标签: javascript three.js

我有一个包含多个元素的场景,比如立方体,圆柱体,球体等等。我已将场景的摄像机位置设置为(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
  3. 然而,这次,我能够让它工作,我觉得只有位置需要改变这一事实才有帮助。如果x,y,z都需要改变,那么通过反复试验很难得出这个位置。 还有另外一种方法,这样做了吗? 发现稍微有点难以相信基于特定摄像机位置基于场景中所有元素的人,只需要改变一个坐标(在我的情况下,y坐标)以适应任何其他摄像机位置。 /强>

    关于使用建议的camera.lookAt(cube.position) 我很担心使用它,因为在同一个场景中,我感兴趣的不仅仅是立方体,还有圆柱体,球体,平面,多面体,torusknot,圆环;

1 个答案:

答案 0 :(得分:2)

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

camera.lookAt (cube.position);