Is there a backface-visibility equivalent for three.js?
14,939
Solution 1
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
Solution 2
The backface property is set in the mesh itself:
sphere.doubleSided = true;
Author by
Danny Garcia
Updated on July 21, 2022Comments
-
Danny Garcia almost 2 years
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.