【问题标题】:three.js: Render 2d projectionthree.js:渲染二维投影
【发布时间】:2021-06-14 08:29:58
【问题描述】:

我想渲染一个类似于 的立方体。

我的问题是如何渲染面部投影。

我尝试使用 Reflector,但它的大小和位置很棘手,因此它只捕捉我想要的面部,并显示侧面。

我还看到我可以使用单独的画布进行渲染(我想象使用正交相机),但我希望所有内容都在同一个画布中。我看到一个例子有多个视图,但似乎不能放在后面。

那么,有没有办法做到这一点?

【问题讨论】:

    标签: three.js


    【解决方案1】:

    解决问题的一种可能方法:

    设置正交相机,使其平截头体包围立方体。然后,您可以将相机定位在立方体的每一侧前面,使用lookAt( cube.position ) 正确定位它,然后将场景渲染到渲染目标中。每侧需要一个渲染目标。然后,您可以将其用作相应平面网格的纹理。

    有一个官方的实时示例演示了如何使用three.js 完成 RTT(渲染到纹理)。尝试将其用作您自己应用的代码模板。

    https://threejs.org/examples/#webgl_rtt

    【讨论】:

    • 我会看看,你能告诉我如何设置相机,使其平截头体包围立方体吗?
    • 对于初学者,我会手动执行此操作。假设相机位于立方体侧面的中心,leftrighttopbottom 属性可以从立方体的大小得出。
    • 所以,我在立方体的左侧放置了一个平面几何体(在上图中,它是蓝色中心所在的位置),添加到场景中,然后使用虚拟相机进行 RTT,然后现场。我收到错误“glDrawElements:绘图的源和目标纹理相同。”。我明白这是因为现在当画布被渲染时,它会读取我放在平面上的纹理(对吗?)但我不明白 Reflector 怎么没有这个问题
    • 执行RTT调用时,将平面网格的visible设置为false。无法渲染到渲染目标并将其用作同一渲染调用中的纹理。当Reflector 渲染场景时,它也使自己不可见(参见github.com/mrdoob/three.js/blob/…)。
    猜你喜欢
    • 2013-09-05
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-01-15
    • 1970-01-01
    • 2017-06-07
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多