Three.js 为啥带有视口和剪刀的渲染器和我有一个完整的黑色画布

Posted 2023-02-27

【中文标题】Three.js 为啥带有视口和剪刀的渲染器和我有一个完整的黑色画布

【英文标题】：Three.js Why renderer with viewport & scissor and I have a complete black canvasThree.js 为什么带有视口和剪刀的渲染器和我有一个完整的黑色画布

【发布时间】：2016-05-04 00:41:33

【问题描述】：

我有一个典型的 UI - 两个垂直窗口。 左侧用于画布和渲染器，右侧用于 UI。

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

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

问题是我错过了一些特殊参数，以避免覆盖我所有（我的 UI）背后的全部画布黑色填充。 我希望视口和剪刀能让我的画布内有“干净”的区域（未填充）。但不是……

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

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

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

【问题讨论】：

什么是“视口和剪刀式方法”？

【参考方案1】：

完全可以用这个：

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

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

您只能像这样更改颜色：

renderer.setClearColor( 0xffffff );