当前位置: 首页 > 面试题库 >

Three.js-正交相机

钱振
2023-03-14
问题内容

我正在开发一个可以显示一些3D模型的应用程序。我们加载模型,创建网格,将其添加到场景中…标准过程。添加最后一个网格后,我们使用总几何尺寸和视口尺寸进行数学运算,从而计算出边界框以移动摄像机并覆盖所有场景。

    if (bounds.bx / bounds.by < camera.aspect) {
        /* Vertical max */
        r = bounds.by / (2 * Math.tan(Math.PI / 8));
    } else {
        /* Horizontal max */
        hFOV = 2 * Math.atan(Math.tan(Math.PI / 8) * camera.aspect);
        r = bounds.bx / (2 * Math.tan((hFOV / 2)));
    }

bounds是包含边框的宽度和高度的对象。经过此计算,我们移动了相机(加上一点点比例,只是为了美观,我们希望在几何体和屏幕边框之间留出一点空间:))并进行渲染

    camera.position.z = r * 1.05;

到目前为止,这已实现并且可以正常运行。这是通过PerspectiveCamera完成的。现在我们要更改它并使用OrthographicCamera
…结果是一团糟。模型太小,我们无法从TrackBall控件获得鼠标滚轮缩放,并且移动摄像机的算法不再起作用。我也不了解相机的构造函数的参数…这些宽度和高度是用于几何图形还是用于视口?


问题答案:

在three.js中实例化正交摄影机的模式是:

var camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, near, far );

其中widthheight是以 世界空间 单位测量的相机的长方体平截头体的宽度和高度。

near并且far世界空间 距离平截面近及远的飞机。双方nearfar应大于零。

为防止失真,通常需要使正交摄影机(width / height)的纵横比与渲染画布的纵横比匹配。(请参阅下面的*注)

不幸的是,许多例子通过three.js所的window.innerWidth,并window.innerHeight作为参数传递给这个构造函数。仅在使用正交摄影机渲染纹理时,或者正交摄影场的世界单位为像素时,才有意义。

*注意:实际上,相机的纵横比应与渲染器视口的纵横比匹配。视口可以是画布的子区域。如果不使用直接设置渲染器的视口renderer.setViewport(),则视口将与画布相同,因此具有与画布相同的纵横比。

three.js r.73



 类似资料:
  • 本文向大家介绍Three.js学习之正交投影照相机,包括了Three.js学习之正交投影照相机的使用技巧和注意事项,需要的朋友参考一下 前言 Three.js是一个3Djs库,webGL开源框架中比较优秀的一个。除了webGL以外,Three.js还提供了基于Canvas、SVG标签的渲染器,调试建议使用Chrome或者Firefox。 1.照相机   图形学中的照相机定义了三维空间到二维屏幕的投

  • 这一摄像机使用orthographic projection(正交投影)来进行投影。 在这种投影模式下,无论物体距离相机距离远或者近,在最终渲染的图片中物体的大小都保持不变。 这对于渲染2D场景或者UI元素是非常有用的。 代码示例 const camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, hei

  • 正交投影照相机(Orthographic Camera)设置起来较为直观,它的构造函数是: THREE.OrthographicCamera(left, right, top, bottom, near, far) 这六个参数分别代表正交投影照相机拍摄到的空间的六个面的位置,这六个面围成一个长方体,我们称其为视景体(Frustum)。只有在视景体内部(下图中的灰色部分)的物体才可能显示在屏幕上,

  • 我已经找了10个小时了(字面意思),我已经完成了,我需要问一下。问题是我正在学习如何使用LibGdx编程Java游戏。我在做一个水平太空飞船游戏。所以,我这里最糟糕的问题是我不知道如何滚动(我认为画画会解释得更好)。我想画一个巨大的背景(空间),让我的正交相机像我的太空船一样移动,这样它就会用空间背景产生滚动效果。没有敌人,除了屏幕上的船什么都没有。 我正在尝试这个: 然后我在WorldRende

  • 我目前正在libgdx中试验不同的相机(使用ShapeRenderer)。然而,我发现在某些旋转时,它会停止渲染形状的部分。 例如,带有相机的正常形状 位置:(8.999996,7.699995,5.599995) 方向: (0.04838332,-0.60004705,-0.7576189): 但是,对于相机位置:(8.999996,7.699995,5.0999956)方向:(0.678907

  • Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精采的演示。不过,这款引擎目前还处在比较不成熟的开发阶段,其不够丰富的 API 以及匮乏的文档增加了初学者的学习难度(尤其是文档的匮乏) 演示:http://mrdoob.github.com/three.js/