Comment puis-je rendre mon arrière-plan Three.js transparent ou une couleur personnalisée ?

Arrière-plan Three.js transparent ou coloré : une solution

Par défaut, l'arrière-plan du canevas Three.js est rendu en noir. Cependant, vous souhaiterez peut-être un arrière-plan de couleur transparent ou personnalisé pour améliorer vos visualisations. Si vos tentatives pour modifier l'arrière-plan ont échoué, cet article explore la solution.

Le problème

Comme décrit par l'utilisateur, définir la couleur d'arrière-plan à l'aide de l'opacité CSS et les propriétés d'arrière-plan n'ont aucun effet sur le canevas. En effet, le fond noir est rendu par Three.js lui-même.

La solution

La solution réside dans la manipulation du paramètre suivant dans votre code Three.js :

renderer.setClearColorHex(0x000000, 1);

Pour obtenir un arrière-plan transparent, remplacez la ligne ci-dessus par :

renderer.setClearColor(0xffffff, 0);

Cependant, ce changement garantit uniquement transparence; votre scène ne sera pas visible. Pour rendre votre scène avec un arrière-plan transparent, vous devez utiliser un WebGLRenderer avec la propriété alpha définie sur true :

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

Pour un arrière-plan de couleur personnalisé, vous pouvez utiliser le code suivant :

renderer.setClearColorHex(0xff0000, 1);

Vous pouvez également définir la couleur d'arrière-plan comme un objet THREE.Color :

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

En implémentant ces modifications, vous pouvez désormais contrôler l'arrière-plan de vos visualisations Three.js, qu'il soit transparent ou de n'importe quelle couleur souhaitée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!