Alterando o fundo three.js para cor transparente ou outra cor

122

Eu tenho tentado mudar o que parece ser a cor de fundo padrão da minha tela de preto para transparente / qualquer outra cor - mas sem sorte.

Meu HTML:

<canvas id="canvasColor">

Meu CSS:

<style type="text/css">
#canvasColor {
 z-index: 998;
opacity:1;
background: red;
}
</style>

Como você pode ver no seguinte exemplo on-line, tenho alguma animação anexada à tela, portanto, não é possível fazer uma opacidade: 0; no id.

Visualização ao vivo: http://devsgs.com/preview/test/particle/

Alguma idéia de como substituir o preto padrão?

css html canvas html5-canvas three.js user1231561
fonte
No início de function init() {, sua tela é vermelha! Three.js muda para preto com setClearColorHex!
Simon Sarris

Respostas:

236

Me deparei com isso quando comecei a usar o three.js também. Na verdade, é um problema de javascript. Você tem atualmente:

renderer.setClearColorHex( 0x000000, 1 );

na sua threejsfunção init. Altere para:

renderer.setClearColorHex( 0xffffff, 1 );

Atualização: Obrigado ao HdN8 pela solução atualizada:

renderer.setClearColor( 0xffffff, 0);

Atualização # 2: Como apontado por WestLangley em outra pergunta semelhante - agora você deve usar o código abaixo ao criar uma nova instância do WebGLRenderer em conjunto com a setClearColor()função:

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

Atualização # 3: Mr.doob ressalta que, como r78você pode usar o código abaixo para definir a cor de fundo da sua cena:

var scene = new THREE.Scene(); // initialising the scene
scene.background = new THREE.Color( 0xff0000 );
Joe
fonte
Você está realmente certo. A tela é realmente transparente pr. padrão, que vergonha para mim. Muito obrigado por apontar onde alterar isso - está ótimo agora!
user1231561
5
Bom, isso também me incomodou um pouco. Eu descobri no script three.js que esse método está obsoleto, use setClearColor (0xffffff, 1).
HdN8
@ HdN8 - obrigado pela atualização, eu adicionei à resposta.
Joe
1
setClearColor (0xffffff, 1) não funcionou para mim (tornou branco), mas setClearColor (0xffffff, 0) fez um trabalho (tornou transparente)
Ronen Rabinovici
11
Desde que r78você pode simplesmente fazerscene.background = new THREE.Color( 0xff0000 );
mrdoob 17/08/16
21

Uma resposta completa: (Testado com r71)

Para definir uma cor de fundo, use:

renderer.setClearColor( 0xffffff ); // white background - replace ffffff with any hex color

Se você quiser um plano de fundo transparente, precisará primeiro ativar o alfa no seu renderizador:

renderer = new THREE.WebGLRenderer( { alpha: true } ); // init like this
renderer.setClearColor( 0xffffff, 0 ); // second param is opacity, 0 => transparent

Veja os documentos para mais informações.

Yotam Omer
fonte
3

Descobri que, quando criei uma cena por meio do editor three.js., não apenas tive que usar o código da resposta correta (acima), para configurar o renderizador com um valor alfa e a cor clara, tive que entrar no aplicativo arquivo .json e encontrar atributo "background" do objeto "Scene" e defina-o: "background: null".

A exportação do editor Three.js teve originalmente definido como "background": 0

iethatis
fonte
2

Em 2020, usando o r115, ele funciona muito bem com isso:

const renderer = new THREE.WebGLRenderer({ alpha: true }); const scene = new THREE.Scene(); scene.background = null;

ASA negra
fonte
-1

Eu também gostaria de acrescentar que, se usar o editor three.js., não se esqueça de definir também a cor do plano de fundo no index.html.

background-color:#00000000
Ty Irvine
fonte