Shader Material #SO

http://stackoverflow.com/questions/27535266/shadermaterial-transparency

by TheJim01

HTML

<script src="http://threejs.org/build/three.js"></script>
<script src="http://threejs.org/examples/js/controls/TrackballControls.js"></script>

JavaScript

// BufferGeometry Tester

var hostDiv, scene, renderer, camera, root, controls, light;

var WIDTH = 500;//window.innerWidth,
    HEIGHT = 500;//window.innerHeight,
    FOV = 35,
    NEAR = 1,
    FAR = 1000;

function breakIt(){
    camera.position.set(-25.759449580212017, -17.239852126859287, 39.2331270225625);
    camera.lookAt(scene.position);
    camera.up.set(0.07701484672816412, 0.8931831414880415, 0.44304919494903006);
}

function createBufferGeometryMesh(){
    var geo = new THREE.BufferGeometry();
    
    var tl = new THREE.Vector3(-10.,  10., 0.),
        tr = new THREE.Vector3(10.,  10., 0.),
        bl = new THREE.Vector3(-10.,  -10., 0.),
        br = new THREE.Vector3(10.,  -10., 0.);
    
    var n0 = new THREE.Vector3(0., 0., 1.);
    
    var vertices = 
        [
            tl.x, tl.y, tl.z,
            tr.x, tr.y, tr.z,
            br.x, br.y, br.z,
            bl.x, bl.y, bl.z
        ],
    normals =
        [
            n0.x, n0.y, n0.z,
            n0.x, n0.y, n0.z,
            n0.x, n0.y, n0.z,
            n0.x, n0.y, n0.z
        ],
    indices = [ 0, 2, 1, 0, 3, 2 ];
    
    geo.addAttribute( 'position', new THREE.BufferAttribute( new Float32Array( vertices ), 3 ) );
    geo.addAttribute( 'normal', new THREE.BufferAttribute( new Float32Array( normals ), 3 ) );
    geo.addAttribute( 'index', new THREE.BufferAttribute( new Uint32Array( indices ), 1 ) );
    
    
    var mat = new THREE.MeshPhongMaterial( {
					color: 0xcccccc,
                    ambient: 0x0,
                    specular: 0xffffff,
                    shininess: 1,
                    opacity: 0.5,
                    transparent: true,
					side: THREE.DoubleSide
				} );
    /*/
    var shader = THREE.ShaderLib['phong'];

	var uniforms = null,
        parameters = null;

    uniforms = THREE.UniformsUtils.clone(shader.uniforms);
    uniforms['diffuse'].value.setHex(0xcccccc);
    uniforms['ambient'].value.setHex(0x0);
    uniforms['emissive'].value.setHex(0x0);
  ...