A mysterious result about assigning materials to box geometry

Questions
,
1

I encountered a mysterious result about assigning materials to box geometry.
When my code is like this, there will be no back side for the “aThinBox”.

var geometry = new THREE.BoxGeometry( 1, 1, 0.2 );
var faceMaterial = new THREE.MeshBasicMaterial( { color: 0xffffff, map: texture, side: THREE.DoubleSide } );
var backMaterial = new THREE.MeshBasicMaterial( { color: 0x0000ff, side: THREE.DoubleSide } );
var materials = [];
materials.push( backMaterial ); materials.push( backMaterial ); materials.push( backMaterial );
materials.push( backMaterial ); materials.push( faceMaterial ); materials.push( backMaterial );
var aThinBox = new THREE.Mesh( geometry, materials );

I have to push one more backMaterial to get all the 6 sides of the box.
Will any expert please help explain why this should happen?

materials.push( backMaterial ); materials.push( backMaterial ); materials.push( backMaterial );
materials.push( backMaterial ); materials.push( faceMaterial ); materials.push( backMaterial );
materials.push( backMaterial );

2

Can you demonstrate the problem in a live example?

Use this as a starting point:

1 Like
3

@looeee Thanks for your attention. I’ve found the bug in my code. Sorry for disturb.