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

时间:2017-07-28 19:28:45

标签: three.js rendering viewport outline

我创建了一个带有两个摄像头和一个渲染器的场景。每个摄像头都是从不同的角度观察场景,我在整个屏幕上有第一个摄像头渲染,然后我在第一个渲染的顶部放置一个小视图端口渲染的第二个摄像头。我想知道是否有办法让第二个视图端口概述,以便每个看起来分开

2 个答案:

答案 0 :(得分:1)

我猜你正在使用threejs视口功能?据我所知,它本身并没有这样的功能。

但是因为它被渲染到画布上......也许你可以在每个三个渲染帧之后在画布上以所需的坐标绘制轮廓?

一个基本的例子:

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

答案 1 :(得分:1)

是的,您可以通过在渲染插图之前渲染比插图略大的纯色矩形来勾勒出插入视口。

// 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