CODEWITHSUNDEEP
htmlhtml5-canvasthree.js
Kevin Mesiab
Kevin Mesiab

Reputation: 68

Three.js - Cannot 'See Through' Cube Face

I have an array of three materials. One of these is a MeshBasicMaterial with transparent set to true, opacity set to 0.

I assigned this transparent material to the top face of a cube, expecting to see the inner walls of the other faces.

However, instead, the top face is simply not drawn (appearing white, like the background of the canvas) but not allowing me to 'see through' it.

How is this achieved?

(The final effect should simply be a box with the top open)

// FELT TEXTURE
var felt = new THREE.MeshLambertMaterial({
    map: THREE.ImageUtils.loadTexture('images/greenfelt.jpg')
});

// WOOD TEXTURE
var wood = new THREE.MeshLambertMaterial({
    map: THREE.ImageUtils.loadTexture('images/woodgrey.jpg')
});

// TRANSPARENT MATERIAL
var transparent = new THREE.MeshBasicMaterial({ 
    opacity: 0,
    transparent: true
});

var materials = new THREE.MeshFaceMaterial([
    felt,
    wood,
    transparent
]);

var cube = new THREE.CubeGeometry(RECTANGLE_WIDTH, RECTANGLE_HEIGHT, RECTANGLE_DEPTH ); 
    cube.faces[0].materialIndex = 1; // LEFT
    cube.faces[1].materialIndex = 1; // RIGHT
    cube.faces[2].materialIndex = 1; // BACK
    cube.faces[3].materialIndex = 1; // FRONT
    cube.faces[4].materialIndex = 2; // TOP (TRANSPARENT)
    cube.faces[5].materialIndex = 0; // BOTTOM


// RECTANGLE
var rectangle = new THREE.Mesh( cube, materials );

scene.add( rectangle );

Upvotes: 1

Views: 1814

Answers (1)

yaku
yaku

Reputation: 3101

Maybe your cubes are getting culled. By default, only the front of each face is drawn. Try setting material.side = THREE.DoubleSide for all cube materials (well the transparent material shouldn't need it, but all others).

felt.side = THREE.DoubleSide;
wood.side = THREE.DoubleSide;
var materials = new THREE.MeshFaceMaterial([
  felt,
  wood,
  transparent
]);

Upvotes: 4

Related Questions