由于相机位置的原因,无法在场景中显示三个.js元素
unable to display three.js elements in a scene due to camera position
我有一个包含多个元素的场景,比如立方体、圆柱体、球体等等。我已将场景的摄影机位置设置为(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),我可以通过以下""中的一个/或两个在页面中心显示它们
- 更改图元的大小。例如,更改立方体的长度、宽度和高度
- 更改元素的y位置。例如,cube.position.y
然而,尽管我这次能够让它发挥作用,但我觉得只有职位需要改变这一事实对我有所帮助。如果x、y、z都需要改变,那么很难通过反复试验来确定位置。还有别的办法吗?发现很难相信,一个将场景中的所有元素都基于特定相机位置的人,只需要改变一个坐标(在我的情况下,是y坐标)就可以调整到任何其他相机位置
关于使用camera.lookAt(cube.position),这也是建议的我很担心使用这个,因为在同一个场景中,我感兴趣的不仅仅是立方体,还有圆柱体、球体、平面、多面体、圆环结、圆环体;
使相机观察立方体位置(在立方体添加到场景后):
camera.lookAt (cube.position);
- 从桌面读取python文件时高亮显示代码
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 如何在生成下载文件时显示加载动画
- React重新渲染但未显示正确的组件
- nodejs-expressjs上传图像并显示它们
- 使用JSP从服务器检索和显示图像
- 音频控件在mouseover上显示,在mouseout上淡出
- 让文本输入幻灯片显示输入时的新文本输入?然后向后滑动
- 使用电话间隙在Android应用程序中显示SQL Lite的数据
- 显示5秒后隐藏潜水
- 画廊图像未显示
- 不显示带有本地json文件数据的谷歌地图脚本
- 如何将json数据显示为html
- 谷歌地图不是以HTML显示,而是在JS Fiddle上工作
- Windows8应用程序(html&Javascript):从图片库(除了文件选择器)显示图像的另一种方式
- 高亮显示时编辑文本大小和颜色
- 有时数据是't显示在浏览器中
- 当鼠标悬停在文本中的单词上时显示警报
- 角度图表;t显示在我的页面中
- 在jquery中为显示/隐藏设置cookie