Three.js 为什么渲染器带有视口 &剪刀和我有一个完整的黑色画布 [英] Three.js Why renderer with viewport & scissor and I have a complete black canvas

问题描述

我有一个典型的用户界面 - 两个垂直窗口.左边为画布 &渲染器，适合 UI.

I have a typical UI - two vertical windows. The left for the canvas & renderer, the right for the UI.

在此 UI 中，我将有特殊的查看器，例如一个简单的顶视图窗口.

Inside this UI I will have special viewers, for example a simple top view window.

我使用了视口 &&剪刀法.一切正常.

I have used the viewports && scissors approach. All works fine.

问题是我错过了一些特殊参数，以避免覆盖我所有(我的用户界面)背后的完整画布黑色填充.我期待那个视口 &剪刀会让我的画布内有干净"的区域(未填充).但不是....

The question is that I miss some special parameter to avoid the complete canvas black-filled that covers all I have (my UI) behind. I expected that viewport & scissors were going to let me have 'clean' areas (not filled) inside my canvas. But not....

alpha 方法( renderer = new THREE.WebGLRenderer( { alpha: true } );) 可能是解决方案，但我不知道这是否是最佳解决方案(性能如何)或者有什么方法可以编程(增强)与视口相关的东西?剪刀.

The alpha approach ( renderer = new THREE.WebGLRenderer( { alpha: true } );) could be the fix but I don't know if this is the best solution (what about performance) or is there any way to program (enhancement) something related with the viewport & scissors.

如果我要使用视口，用黑色填充所有内容是没有意义的.

If I'm going to use viewports there is no sense to fill all with black.

(另外一个主要问题是......如果我有一个视口和剪刀，为什么以及谁用黑色填充画布?)

(Also the main question is ... If I have a viewport & scissor, why and who fill the canvas with black ?)

推荐答案

使用这个完全没问题:

var renderer = new THREE.WebGLRenderer({ alpha: true }); 

这是一种常见的方法，因为您也可以阅读在此答案中

It is a common approach as you can read also here in this answer

您只能像这样更改颜色:

You can change only the color like this:

renderer.setClearColor( 0xffffff );

这篇关于Three.js 为什么渲染器带有视口 &剪刀和我有一个完整的黑色画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！