Évolution des trois.fond js vers transparent ou autre couleur
j'ai essayé de changer ce qui semble être la couleur de fond par défaut de ma toile de noir à transparent / toute autre couleur - mais pas de chance.
My HTML:
<canvas id="canvasColor">
My 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 en annexe de la toile, donc je ne peux pas juste faire une opacité: 0; on the id.
live preview: http://devsgs.com/preview/test/particle /
des idées pour écraser le noir par défaut?
5 réponses
je suis tombé sur cela quand j'ai commencé à utiliser trois.js. C'est en fait une question de javascript. Vous avez actuellement:
renderer.setClearColorHex( 0x000000, 1 );
dans votre fonction init threejs . Modifier le texte comme suit:
renderer.setClearColorHex( 0xffffff, 1 );
mise à Jour: Grâce à HdN8 pour la mise à jour de la solution:
renderer.setClearColor( 0xffffff, 0);
mise à jour #2: comme L'a souligné WestLangley dans une autre question semblable - vous devez maintenant utiliser le code ci-dessous lors de la création d'une nouvelle instance WebGLRenderer en conjonction avec la fonction setClearColor() :
var renderer = new THREE.WebGLRenderer({ alpha: true });
mise à jour #3: M. doob souligne 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 );
pour la transparence, ceci est également obligatoire: renderer = new THREE.WebGLRenderer( { alpha: true } ) via fond Transparent avec trois.js
Une réponse complète: (Testé avec r71)
pour définir une couleur d'arrière-plan utiliser:
renderer.setClearColor( 0xffffff ); // white background - replace ffffff with any hex color
si vous voulez un fond transparent, vous devez d'abord activer alpha dans votre Rendu:
renderer = new THREE.WebGLRenderer( { alpha: true } ); // init like this
renderer.setClearColor( 0xffffff, 0 ); // second param is opacity, 0 => transparent
voir le docs pour plus d'information.
j'ai trouvé ça quand j'ai créé une scène via les trois.js éditeur, j'ai non seulement eu à utiliser la bonne réponse est le code (ci-dessus), pour mettre en place le convertisseur avec une valeur alpha et la couleur claire, j'ai dû aller dans l'application.fichier json et trouver l'attribut "background" de L'objet" Scene " et le définir à:
"background: null" .
l'exportation de trois.js editor l'avait à l'origine défini à "background": 0
je voudrais aussi ajouter que si vous utilisez les trois.js éditeur n'oubliez pas de régler la couleur de fond pour effacer ainsi dans l'index.HTML.
background-color:#00000000