Modification de l'arrière-plan three.js en transparent ou d'une autre couleur

J'ai essayé de changer ce qui semble être la couleur d'arrière-plan par défaut de ma toile de noir à transparent / toute autre couleur - mais pas de chance.

Mon HTML:

<canvas id="canvasColor">

Mon CSS:

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

Comme vous pouvez le voir dans l'exemple en ligne suivant, j'ai une animation ajoutée au canevas, donc je ne peux pas simplement faire une opacité: 0; sur l'identifiant.

Aperçu en direct: http://devsgs.com/preview/test/particle/

Des idées sur la façon de remplacer le noir par défaut?

Je suis tombé sur cela lorsque j'ai commencé à utiliser three.js également. C'est en fait un problème javascript. Vous avez actuellement:

renderer.setClearColorHex( 0x000000, 1 );

dans votre threejsfonction init. Changez-le en:

renderer.setClearColorHex( 0xffffff, 1 );

Mise à jour: Merci à HdN8 pour la solution mise à jour:

renderer.setClearColor( 0xffffff, 0);

Mise à jour n ° 2: comme indiqué par WestLangley dans une autre question similaire - vous devez maintenant utiliser le code ci-dessous lors de la création d'une nouvelle instance WebGLRenderer en conjonction avec la setClearColor()fonction:

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

Mise à jour n ° 3: M.doob souligne que puisque r78vous pouvez également utiliser le code ci-dessous pour définir la couleur d'arrière-plan de votre scène:

var scene = new THREE.Scene(); // initialising the scene
scene.background = new THREE.Color( 0xff0000 );

Une réponse complète: (Testé avec r71)

Pour définir une couleur d'arrière-plan, utilisez:

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

Si vous voulez un arrière-plan transparent, vous devrez d'abord activer alpha dans votre moteur de rendu:

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

Consultez les documents pour plus d'informations.

Pour la transparence, c'est également obligatoire: renderer = new THREE.WebGLRenderer( { alpha: true } )via fond transparent avec three.js

J'ai trouvé que lorsque j'ai créé une scène via l'éditeur three.js, je devais non seulement utiliser le code de réponse correct (ci-dessus), pour configurer le rendu avec une valeur alpha et la couleur claire, je devais aller dans l'application fichier .json et trouver l'attribut « Scène » objet « de fond » de et mis à: "background: null".

L'exportation de l'éditeur Three.js l'avait initialement définie sur "background": 0

En 2020, en utilisant r115, cela fonctionne très bien avec ceci:

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

Je voudrais également ajouter que si vous utilisez l'éditeur three.js, n'oubliez pas de définir la couleur d'arrière-plan à effacer également dans l'index.html.

background-color:#00000000