I have created a very basic cube using Three.js and Physijs. I am mapping a texture that has transparency, and I would like to see the texture on the other side of the cube through the transparency. Right now, I see the background through the transparency, but not the texture on the back of the cube.
var cube = new Physijs.BoxMesh(
new THREE.BoxGeometry( 2, 2, 2),
new THREE.MeshPhongMaterial( { map: THREE.ImageUtils.loadTexture('border.png') } ),
1 );
The texture used:
The result:
As you can see, the background shows through the cube, but not the texture on the back faces. I guess that the back of a 2d texture can't be seen, but it there anyway for me to apply the texture to both sides of each face then?
This is my first go with Threejs, and there looks to be a lot to take in, so I hope I haven't missed something obvious :)
Setting the side
to THREE.DoubleSide
may does it for you:
var material = new THREE.MeshPhongMaterial( {
map: new THREE.TextureLoader().load( "image.png" ),
transparent: true,
side: THREE.DoubleSide // apply to both sides of the faces
} );
But the illusion is not perfect as you can see here: