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

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?

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 );

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.

Para transparência, isso também é obrigatório: renderer = new THREE.WebGLRenderer( { alpha: true } )via Plano de fundo transparente com three.js

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

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;

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