I have an object with a mesh that uses a semi-transparent png texture.
Is there a flag or option for the MeshBasicMaterial so that the back of the object is visible through the front?
Here is some sample code:
var texture = THREE.ImageUtils.loadTexture('world.png');
// create the sphere's material
var sphereMaterial = new THREE.MeshBasicMaterial({
map: texture,
transparent: true,
blending: THREE.AdditiveAlpha
});
sphereMaterial.depthTest = false;
// set up the sphere vars
var radius = 50, segments = 20, rings = 20;
// create a new mesh with sphere geometry -
var sphere = new THREE.SceneUtils.createMultiMaterialObject(
new THREE.SphereGeometry(radius, segments, rings),[
sphereMaterial,
new THREE.MeshBasicMaterial({
color: 0xa7f1ff,
opacity: 0.6,
wireframe: true
})
]);
This will accurately render the sphere but the back remains invisible.
The backface property is set in the mesh itself:
The new way to do this is by using the
side
property ofmaterial
.Example:
Possible values are
THREE.FrontSide
,THREE.BackSide
andTHREE.DoubleSide
.See: https://github.com/mrdoob/three.js/wiki/Migration