ThreeJS - Create cube where the surfaces are transparent instead of the cube volume

Question

I am using the following code to create this 3D transparent cube.

// Create the cube itself
const cubeGeom = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00,  opacity:0.4, transparent:true});
const cube = new THREE.Mesh( cubeGeom, material );


// Also add a wireframe to the cube to better see the depth
const _wireframe = new THREE.EdgesGeometry( cubeGeom ); // or WireframeGeometry( geometry )
const wireframe = new THREE.LineSegments( _wireframe);

// Rotate it a little for a better vantage point
cube.rotation.set(0.2, -0.2, -0.1)
wireframe.rotation.set(0.2, -0.2, -0.1)

// add to scene
scene.add( cube ) 
scene.add( wireframe );

As can been seen, the cube appears as a single volume that is transparent. Instead, I would want to create a hollow cube with 6 transparent faces. Think of a cube made out of 6 transparent and colored window-panes. See this example: my desired result would be example 1 for each of the 6 faces, but now it is like example 2.

Update I tried to create individual 'window panes'. However the behavior is not as I would expect.

I create individual panes like so:

geometry = new THREE.PlaneGeometry( 1, 1 );
material = new THREE.MeshBasicMaterial( {color: 0x00ff00,  side: THREE.DoubleSide, transparent:true, opacity:0.2});

planeX = new THREE.Mesh( geometry, material);
planeY = new THREE.Mesh( geometry, material);
planeZ = new THREE.Mesh( geometry, material);

And then I add all three planes to wireframe.

Then I rotate them a little, so they intersect at different orientations.

const RAD_TO_DEG = Math.PI * 2 / 360;
planeX.rotation.y = RAD_TO_DEG * 90
planeY.rotation.x = RAD_TO_DEG * 90

Now I can see the effect of 'stacking' the panes on top of each other, however it is not as it should be.

I would instead expect something like this based on real physics (made with terrible paint-skills). That is, the color depends on the number of overlapping panes.

EDIT

When transparent panes overlap from the viewing direciton, transparancy appears to work perfectly. However, when the panes intersect it breaks.

Here I have copied the snipped provided by @Anye and added one.rotation.y = Math.PI * 0.5 and commented out two.position.set(0.5, 0.5, 0.5); so that the panes intersect.

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var cube = new THREE.Group();
one = new Pane();
two = new Pane();

one.rotation.y = Math.PI * 0.5

one.position.z = 0.2;
// two.position.set(0.5, 0.5, 0.5);

cube.add(one);
cube.add(two);

cube.rotation.set(Math.PI / 4, Math.PI / 4, Math.PI / 4);
scene.add(cube);

function Pane() {
  let geometry = new THREE.PlaneGeometry(1, 1);
  let material = new THREE.MeshBasicMaterial({color:0x00ff00, transparent: true, opacity: 0.4});
  let mesh = new THREE.Mesh(geometry, material);
  
  return mesh;
}

camera.position.z = 2;

var animate = function () {
    requestAnimationFrame( animate );
    renderer.render(scene, camera);
};

animate();

body {
  margin: 0;
  overflow: hidden;
}

canvas {
  width: 640px;
  height: 360px;
}



    Demo

EDIT

The snipped looks pretty good; it clearly shows a different color where the panes overlap. However, it does not show this everywhere. See this image. The left is what the snippet generates, the right is what it should look like. Only the portion of overlap that is in front of the intersection shows the discoloration, while the section behind the intersection should, but does not show discoloration.

Halo · Accepted Answer

You might want to take a look at CSG, Constructive Solid Geometry. With CSG, you can create a hole in your original cube using a boolean. To start, you could take a look at this quick tutorial. Below are some examples of what you can do with CSG.

var cube = new CSG.cube();
var sphere = CSG.sphere({radius: 1.3, stacks: 16});
var geometry = cube.subtract(sphere);

=>

CSG, though, has some limitations, since it isn't made specifically for three.js. A cheap alternative would be to create six individual translucent panes, and format them to create a cube. Then you could group them:

var group = new THREE.Group();
group.add(pane1);
group.add(pane2);
group.add(pane3);
group.add(pane4);
group.add(pane5);
group.add(pane6);

Update

Something may be wrong with your code, which is why it isn't shading accordingly for you. See this minimal example, which shows how the panes shade appropriately based on overlaps.

Update 2

I updated the snippet so the 2 panes aren't touching at all... I am still able to see the shading. Maybe if you were to try to reproduce this example?

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var cube = new THREE.Group();
one = new Pane();
two = new Pane();

one.rotation.y = Math.PI * 0.5;
one.position.z = 0.2;

cube.add(one);
cube.add(two);

cube.rotation.set(Math.PI / 4, Math.PI / 4, Math.PI / 4);
scene.add(cube);

function Pane() {
  let geometry = new THREE.PlaneGeometry(1, 1);
  let material = new THREE.MeshBasicMaterial({color:0x00ff00, transparent: true, opacity: 0.4});
  material.depthWrite = false
  let mesh = new THREE.Mesh(geometry, material);
  
  return mesh;
}

camera.position.z = 2;

var animate = function () {
    requestAnimationFrame( animate );
    renderer.render(scene, camera);
};

animate();

body {
  margin: 0;
  overflow: hidden;
}

canvas {
  width: 640px;
  height: 360px;
}



    Demo

Update 3

Below is a screenshot of what I see in your snippet... Seems to be working fine...

ThreeJS - Create cube where the surfaces are transparent instead of the cube volume

Answers (2)

Related Questions