javascript - Three.js 为什么渲染器带有视口(viewport)和剪刀，而我有一个完整的黑色 Canvas

Question

我有一个典型的用户界面 - 两个垂直窗口。 左侧为 Canvas 和渲染器，右侧为 UI。

在此 UI 内，我将有特殊的查看器，例如一个简单的顶 View 窗口。

我使用了视口(viewport)&&剪刀方法。一切正常。

问题是我错过了一些特殊参数，以避免整个 Canvas 被黑色填充，覆盖了我后面的所有内容(我的 UI)。 我期望视口(viewport)和剪刀能够让我的 Canvas 内有“干净”的区域(未填充)。但不是……

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

如果我要使用视口(viewport)，则没有必要用黑色填充所有内容。

(主要问题是......如果我有视口(viewport)和剪刀，为什么以及谁用黑色填充 Canvas ？)

Answer 1

使用这个是完全可以的:

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

这是一种常见的方法，您也可以阅读 here in this answer

您只能更改颜色，如下所示:

renderer.setClearColor( 0xffffff );