Changer le fond de three.js en transparent ou autre couleur

Question

J'ai essayé de modifier ce qui semble être la couleur d'arrière-plan par défaut de ma toile, du noir au transparent ou à toute autre couleur, mais sans succès.

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 ajouté une certaine animation au canevas, et je ne peux pas simplement faire une opacité : 0 ; sur l'identifiant.

Prévisualisation en direct : http://devsgs.com/preview/test/particle/

Une idée pour écraser le noir par défaut ?

Answer 1

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

renderer.setClearColorHex( 0x000000, 1 );

dans votre threejs fonction init. Changez-la en :

renderer.setClearColorHex( 0xffffff, 1 );

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

renderer.setClearColor( 0xffffff, 0);

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

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

Mise à jour n°3 : M. Doob fait remarquer que depuis r78 vous pouvez également utiliser le code ci-dessous pour définir la couleur de fond de votre scène :

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

Answer 2

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

Pour définir une couleur de fond, 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 l'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

Voir les documents pour plus d'informations.

Answer 3

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

Answer 4

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

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

Answer 5

J'ai constaté que lorsque je créais une scène via l'éditeur three.js, je devais non seulement utiliser le code de la bonne réponse (ci-dessus), pour configurer le moteur de rendu avec une valeur alpha et la couleur claire, mais aussi aller dans le fichier app.json et trouver l'attribut "background" de l'objet "Scene" et le définir comme suit : "background: null" .

L'exportation à partir de l'éditeur Three.js l'avait initialement réglé sur "background" : 0