Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/three.js/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 由于摄影机位置的原因,无法在场景中显示三个.js元素_Javascript_Three.js - Fatal编程技术网

Javascript 由于摄影机位置的原因,无法在场景中显示三个.js元素

Javascript 由于摄影机位置的原因,无法在场景中显示三个.js元素,javascript,three.js,Javascript,Three.js,我有一个多元素的场景,比如立方体、圆柱体、球体等等。我已将场景的摄影机位置设置为(0,30,40),并尝试使用此摄影机位置显示所有其他元素 但是,我注意到,在下面的代码中,我显示了一个简单的移动立方体,它不适用于场景其余部分所需的摄影机定位,而只适用于另一个摄影机配置 请参阅下面我的javascript代码中的第30-32行(我已经对其进行了注释)。基本上,它适用于摄影机位置(0,-400400),但不适用于摄影机位置(0,30,40),我需要将其作为项目设置的一部分,以适应其余元素

我有一个多元素的场景,比如立方体、圆柱体、球体等等。我已将场景的摄影机位置设置为(0,30,40),并尝试使用此摄影机位置显示所有其他元素

但是,我注意到,在下面的代码中,我显示了一个简单的移动立方体,它不适用于场景其余部分所需的摄影机定位,而只适用于另一个摄影机配置

请参阅下面我的javascript代码中的第30-32行(我已经对其进行了注释)。基本上,它适用于摄影机位置(0,-400400),但不适用于摄影机位置(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();
我已经为同样的问题创建了一个解决方案

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

请告知

编辑:我试图创建一个场景,其中包括以下内容

var cube,cylinder,sphere,plane,polyhedron,torusknot,torus;
我的目标是将它们显示在屏幕的中心,而不考虑我为整个场景确定的摄影机位置(所有元素只有一个摄影机位置)

这是一个可以显示多个元素的窗口。 对于不同的相机定位(x、y、z),我可以通过以下两种方式之一/或同时在页面中心显示它们:

  • 更改元素的大小。例如,更改立方体的长度、宽度和高度
  • 更改元素的y位置。例如,cube.position.y
  • 然而,虽然这次我能让它工作,但我觉得这是有帮助的,因为只有.y这个职位需要改变。若x、y、z都需要改变,那个么通过反复试验就很难得出位置。 还有别的办法吗,这样做了吗? 很难相信基于特定摄像机位置的场景中所有元素的人只需改变一个坐标(在我的例子中是y坐标)即可调整到任何其他摄像机位置。

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

    使摄影机查看立方体位置(立方体添加到场景后):


    使摄影机查看立方体位置(将立方体添加到场景后):


    你为什么不缩减你的预算呢elements@gaitat,谢谢你。我花了几个小时试了几样东西。请看我上面的编辑。你为什么不缩小你的尺寸elements@gaitat,谢谢你。我花了几个小时试了几样东西。请看我上面的编辑。谢谢kovacsv,请看我上面的编辑。我试过一些东西。正如我提到的,我不确定查看立方体的位置是否总是一个解决方案,因为我的场景中还有其他元素。您可以在camera.lookAt中使用任何坐标(例如camera.lookAt(新的3.Vector3(0,0,0));)。我想你应该计算场景的中心,然后看看那个位置。谢谢kovacsv,请看我上面的编辑。我试过一些东西。正如我提到的,我不确定查看立方体的位置是否总是一个解决方案,因为我的场景中还有其他元素。您可以在camera.lookAt中使用任何坐标(例如camera.lookAt(新的3.Vector3(0,0,0));)。我认为你应该计算场景的中心,然后看看那个位置。
    camera.lookAt (cube.position);