web-dev-qa-db-fra.com

Modification de l’arrière-plan three.js en couleur transparente ou autre

J'ai essayé de changer ce qui semble être la couleur d'arrière-plan par défaut de ma toile, du noir au transparent/à une 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, une animation est ajoutée au canevas. Vous ne pouvez donc pas opacité: 0; sur l'identifiant.

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

Des idées comment écraser le noir par défaut?

csshtml5canvashtml5-canvasthree.js
97
user1231561

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

renderer.setClearColorHex( 0x000000, 1 );

dans votre fonction threejs 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 l'a souligné WestLangley dans autre question similaire - vous devez maintenant utiliser le code ci-dessous lors de la création d'une nouvelle instance WebGLRenderer conjointement à la fonction setClearColor():

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

Mise à jour 3: Mr.doob fait remarquer que, depuis r78 , vous 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 );
202
Joe

Pour plus de transparence, ceci est également obligatoire: renderer = new THREE.WebGLRenderer( { alpha: true } ) via Fond transparent avec three.js

17
Peter Ehrlich

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 fond transparent, vous devez 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

Consultez la documentation pour plus d’informations.

15
Yotam Omer

J'ai découvert que lorsque je créais une scène via l'éditeur trois.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 entrer dans l'application. .json et recherchez l'attribut "Arrière-plan" de l'objet "Scène" et réglez-le sur: "background: null". 

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

1
iethatis

J'aimerais également ajouter que si vous utilisez l'éditeur three.js, n'oubliez pas de définir la couleur d'arrière-plan sur Clear également dans index.html.

background-color:#00000000
0
Ty Irvine