Transparence of Mesh

Hi, I’d like to make one side of a cube transparent. My code is in the screenshot.

However this only affects the opacity of the color on the face and not its transparency. When the opacity is 0, the face becomes white and not transparent.

I would go the way with the creating of a custom geometry of five merged planes.


import {mergeGeometries} from "three/addons/utils/BufferGeometryUtils.js";


let gs = [
  {color: 0xaaffff, axis: "Y", angle: Math.PI * 0.5}, // X+
  {color: 0xffaaff, axis: "Y", angle: Math.PI *-0.5}, // X-
  {color: 0xffffaa, axis: "X", angle: Math.PI *-0.5}, // Y+
  {color: 0xaaffaa, axis: "Y", angle: 0},             // Z+
  {color: 0xaaaaff, axis: "Y", angle: Math.PI}        // Z-
].map(d => {
	let c = new THREE.Color(d.color);
	let g = new THREE.PlaneGeometry().translate(0, 0, 0.5)["rotate" + d.axis](d.angle);
  g.setAttribute("color", new THREE.Float32BufferAttribute(
    Array.from({length: g.attributes.position.count}, ()=>{return [...c]}).flat()
  return g;
let g = mergeGeometries(gs, true);
let m = new THREE.MeshBasicMaterial({vertexColors: true, side: THREE.DoubleSide});
let o = new THREE.Mesh(g, m);
1 Like