Transparence of Mesh

Questions
1

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

Capture
Capture1045×200 8.63 KB

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.

2

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

изображение
изображение854×853 8 KB

Code:

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()
    ,3
  ))
  return g;
})
let g = mergeGeometries(gs, true);
let m = new THREE.MeshBasicMaterial({vertexColors: true, side: THREE.DoubleSide});
let o = new THREE.Mesh(g, m);
scene.add(o);
1 Like