Friday, May 17, 2024
 Popular · Latest · Hot · Upcoming
105
rated 0 times [  111] [ 6]  / answers: 1 / hits: 17460  / 12 Years ago, mon, april 23, 2012, 12:00:00

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.


More From » canvas

 Answers
16

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


[#86033] Monday, April 23, 2012, 12 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
kadinl

Total Points: 321
Total Questions: 117
Total Answers: 103

Location: Nepal
Member since Mon, Jan 4, 2021
3 Years ago
;