是否可以在 threejs 中概述视口？

Question

我创建了一个包含两个摄像机和一个渲染器的场景。每个摄像机都从不同的角度观察场景，我在整个屏幕上渲染了第一个摄像机，然后在第一个渲染之上的一个小视口中渲染了第二个摄像机。我想知道是否有一种方法可以勾勒出第二个视口，以便每个视口看起来都是分开的

Answer 1

我猜你正在使用 threejs viewport 功能？据我所知，它本身没有这样的功能。

但是因为它被渲染到 canvas...也许你可以在每个 threejs 渲染帧之后在所需坐标的 canvas 上自己画一个轮廓？

一个基本的例子：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,100);
ctx.stroke();

（参考：https://www.w3schools.com/tags/canvas_rect.asp）

Answer 2

是的，您可以在渲染插图之前渲染一个比插图略大的纯色矩形来勾勒插图视口。

// border
renderer.setScissorTest( true );
renderer.setScissor( x, y, width, height );
renderer.setClearColor( 0xffffff, 1 ); // border color
renderer.clearColor(); // clear color buffer

然后，渲染插图。只需确保插图背景不透明即可。

three.js r.86

是否可以在 threejs 中概述视口？

Is it possible to Outline a view port in threejs?

rendering

viewport

outline

three.js