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

122

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?

css html canvas html5-canvas three.js user1231561
la source
Au début de function init() {, votre toile est rouge! Three.js le change en noir avec setClearColorHex!
Simon Sarris

Réponses:

237

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 );
Joe
la source
Vous avez vraiment raison. La toile est en effet transparente pr. par défaut, alors honte à moi. Merci beaucoup d'avoir indiqué où changer cela - ça a l'air génial maintenant!
user1231561
5
Bien, cela m'a aussi un peu dérangé. J'ai trouvé dans le script three.js cette méthode est bientôt obsolète, utilisez plutôt setClearColor (0xffffff, 1).
HdN8
@ HdN8 - merci pour la mise à jour, je l'ai ajoutée à la réponse.
Joe le
1
setClearColor (0xffffff, 1) n'a pas fonctionné pour moi (l'a rendu blanc) mais setClearColor (0xffffff, 0) a fonctionné (l'a rendu transparent)
Ronen Rabinovici
11
Puisque r78vous pouvez simplement le fairescene.background = new THREE.Color( 0xff0000 );
mrdoob
21

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.

Yotam Omer
la source
3

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

iethatis
la source
3

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;

Aile sombre
la source
-1

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
Ty Irvine
la source