Changer three.js arrière-plan transparent ou d'une autre couleur

J'ai essayé de changer ce qui semble être la couleur de fond par défaut de ma toile, du noir au transparent /toute autre couleur mais pas de chance.

Mon code 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 la suite en ligne exemple, j'ai un peu d'animation, annexé à la toile, alors, cant il suffit de faire une opacity: 0; sur l'id.

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

Des idées comment faire pour remplacer le noir par défaut?

  • Au début de function init() {, votre toile rouge! Three.js le change du noir avec setClearColorHex!
InformationsquelleAutor user1231561 | 2013-04-23
  1. 210

    Je suis tombé sur ce quand j'ai commencé à utiliser three.js ainsi. C'est en fait une question de javascript. Vous avez actuellement: 

    renderer.setClearColorHex( 0x000000, 1 );

    dans votre threejs fonction init. Modifier:

    renderer.setClearColorHex( 0xffffff, 1 );

    Mise à jour: Grâce à HdN8 pour la solution mise à jour:

    renderer.setClearColor( 0xffffff, 0);

    Mise à jour #2: Comme l'a souligné WestLangley dans de l'autre, la même question - vous devez maintenant utiliser le code ci-dessous lors de la création d'un nouveau WebGLRenderer exemple en relation avec la setClearColor() fonction:

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

    Mise à jour #3: M. dood souligne que, depuis le r78 alternativement, vous pouvez utiliser le code ci-dessous pour configurer votre scène du couleur de fond:

    var scene = new THREE.Scene(); //initialising the scene
scene.background = new THREE.Color( 0xff0000 );
    • En effet, vous êtes de droite. La toile est en effet transparent pr. par défaut, honte sur moi. Merci beaucoup pour préciser où changer ce - qu'il ressemble beaucoup maintenant!
    • Nice, cela m'énerve un peu trop. J'ai trouvé dans le three.js script de cette méthode est bientôt obsolète, utilisez setClearColor( 0xffffff, 1) à la place.
    • merci pour la mise à jour, je l'ai ajouté à la réponse.
    • setClearColor( 0xffffff, 1) ne fonctionne pas pour moi (il fait blanc) mais setClearColor( 0xffffff, 0) a fait un travail (rendu transparent)
    • Grâce Ronen - la question d'origine était sur la modification de l'arrière-plan de n'importe quelle couleur, mais, comme vous, la plupart des gens viennent ici veulent probablement pour le rendre transparent. J'ai mis à jour le code de sorte que la couleur de fond de l'opacité est de 0.
    • Depuis r78 vous pouvez simplement faire scene.background = new THREE.Color( 0xff0000 );
    • merci, j'ai juste mis à jour la réponse.

    InformationsquelleAutor Joe
  2. 18

    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 arrière-plan transparent, vous devez activer alpha dans votre moteur de rendu d'abord:

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

    Vue sur les docs pour plus d'info.

    InformationsquelleAutor Yotam Omer
  3. 17

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

    InformationsquelleAutor Peter Ehrlich
  4. 2

    J'ai constaté que lorsque j'ai créé une scène par la three.js l'é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 de trouver la "Scène" de l'Objet "arrière-plan" de l'attribut et de l'ensemble à:
    "background: null".

    L'exportation de Three.js l'éditeur avait initialement réglé sur "arrière-plan": 0

    InformationsquelleAutor iethatis
  5. 0

    Je tiens également à ajouter que si l'utilisation de la three.js l'éditeur n'oubliez pas de régler la couleur de fond pour effacer ainsi dans le index.html.

    background-color:#00000000
    InformationsquelleAutor Ty Irvine