Search code examples
javascriptthree.jsphysijs

See back of mapped material with Three.js and Physijs

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:

enter image description here

The result:

enter image description here

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 :)

Solution

  • 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:

    enter image description here