javascript - three.js 是否可以在没有视口裁剪的情况下在同一场景中制作迷你摄像头/迷你地图或第二个摄像头

Question

如何使用three.js 制作迷你相机或迷你地图？

两个相机视图。一个迷你地图“迷你摄像机” - 右上角（见下图），主摄像机视图应跨越场景的其余部分（其余部分，没有下图中的边框）。

注意 这实际上不能完全通过视口方法完成，因为场景不应该被 x 维裁剪掉，而是应该伸展。

Answer 1

我在以下位置创建了一个场景的工作示例和一个小地图：

http://stemkoski.github.io/Three.js/Viewports-Minimap.html

我不明白您关于无法使用视口完成的问题；正如您将在上面发布的网站的代码中看到的那样，如果您使用例如位于场景上方的正交相机，您可以设置左/右/上/下值，以便整个场景包含在您的渲染中，你只需要注意高宽比，这样你的场景就不会显得拉伸。

另一方面，如果您想使用渲染到纹理路线，我在http://stemkoski.github.io/Three.js/Camera-Texture.html有一个相关示例，但正如 yaku 提到的在他的回复中，您将不得不更新平面网格的位置，以便它遵循相机位置（偏移一定量）和旋转，使其始终面向相机。由于这种方法更复杂的性质，我真的推荐 viewport 方法。

Answer 2

您可以制作一个平面几何体（普通的 3D 对象，它实际上不需要是平面，任何形状都可以）代表小地图，并将其添加到相机，使其跟随相机移动并且始终可见。

然后使用“渲染到纹理”的方法来渲染小地图并将纹理拍到平面“容器”上。

网络、SO 以及 Three.js 示例文件夹中都有渲染到纹理的示例，这些应该可以帮助您入门。