Is there a backface-visibility equivalent for three.js?

3d, canvas, javascript, three.js, webgl

Solution

The new way to do this is by using the `side` property of `material`.

Example:

new THREE.MeshPhongMaterial( { map: texture, side: THREE.BackSide } )

Possible values are `THREE.FrontSide`, `THREE.BackSide` and `THREE.DoubleSide`.

See: https://github.com/mrdoob/three.js/wiki/Migration

Problem

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.

Original source