Javascript 由于摄影机位置的原因,无法在场景中显示三个.js元素
我有一个多元素的场景,比如立方体、圆柱体、球体等等。我已将场景的摄影机位置设置为(0,30,40),并尝试使用此摄影机位置显示所有其他元素 但是,我注意到,在下面的代码中,我显示了一个简单的移动立方体,它不适用于场景其余部分所需的摄影机定位,而只适用于另一个摄影机配置 请参阅下面我的javascript代码中的第30-32行(我已经对其进行了注释)。基本上,它适用于摄影机位置(0,-400400),但不适用于摄影机位置(0,30,40),我需要将其作为项目设置的一部分,以适应其余元素Javascript 由于摄影机位置的原因,无法在场景中显示三个.js元素,javascript,three.js,Javascript,Three.js,我有一个多元素的场景,比如立方体、圆柱体、球体等等。我已将场景的摄影机位置设置为(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),我可以通过以下两种方式之一/或同时在页面中心显示它们:
我担心使用它,因为在同一个场景中,我感兴趣的不仅仅是立方体,还有圆柱体、球体、平面、多面体、圆环结、圆环 使摄影机查看立方体位置(立方体添加到场景后):
使摄影机查看立方体位置(将立方体添加到场景后):
你为什么不缩减你的预算呢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);