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

unable to display three.js elements in a scene due to camera position

本文关键字:显示 在场 js 三个 元素 相机 于相机 位置      更新时间:2023-12-10

我有一个包含多个元素的场景,比如立方体、圆柱体、球体等等。我已将场景的摄影机位置设置为(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();

我已经为它创建了一个jsbin。

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

请告知。

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

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

我的目标是在屏幕中心显示它们,而不管我为整个场景决定的相机位置(所有元素只有一个相机位置)。

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

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

然而,尽管我这次能够让它发挥作用,但我觉得只有职位需要改变这一事实对我有所帮助。如果x、y、z都需要改变,那么很难通过反复试验来确定位置。还有别的办法吗?发现很难相信,一个将场景中的所有元素都基于特定相机位置的人,只需要改变一个坐标(在我的情况下,是y坐标)就可以调整到任何其他相机位置

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

使相机观察立方体位置(在立方体添加到场景后):

camera.lookAt (cube.position);