three.js with transparent background

by Gregg Tavares

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r69/three.min.js"></script>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id eros id nunc consequat efficitur quis laoreet odio. Sed eu eros nulla. Fusce risus augue, mollis eget tortor eget, volutpat commodo leo. In pharetra elit eu arcu ultricies, id placerat odio semper. Fusce eu luctus nunc. Donec erat massa, dictum sit amet scelerisque convallis, iaculis eu arcu. Nullam commodo, sapien ac interdum laoreet, lectus ante vestibulum lacus, nec eleifend orci eros et lectus. Aenean gravida massa purus, at luctus urna viverra vestibulum. Curabitur a lectus a ipsum mollis rhoncus. Suspendisse pharetra orci id mauris sollicitudin, eget consectetur neque finibus. Fusce auctor mollis convallis. Cras quam leo, ullamcorper feugiat mi eu, sodales aliquet dui.

Fusce lectus neque, mattis nec consectetur ultrices, ornare non nisi. Nam sagittis sed dui sed maximus. Aliquam erat volutpat. Nam facilisis fermentum posuere. Fusce tellus lorem, tempus ut tristique non, vulputate quis diam. Vestibulum lacus elit, pulvinar eget urna ut, egestas tincidunt nunc. In tortor dolor, consequat non posuere a, vehicula at lorem. Etiam sollicitudin dignissim mi quis suscipit. Sed rutrum felis ut luctus finibus. Sed ut nisl sed lacus rhoncus lobortis non in massa. Maecenas pretium nec diam at placerat. Curabitur eleifend urna sit amet eros accumsan, tempor sollicitudin nisi tristique. Aenean sagittis egestas eleifend.

Aliquam vitae euismod dolor, euismod scelerisque ipsum. Aenean vel justo tempus, porta elit eget, condimentum magna. Integer et turpis ipsum. Pellentesque in pulvinar risus. Donec et leo convallis, rhoncus lorem at, placerat urna. Integer semper consequat rhoncus. Sed et ex efficitur, vestibulum ligula sit amet, malesuada erat. Proin tristique felis euismod est dignissim, vitae egestas risus molestie. Proin sagittis nec sapien id interdum. Sed faucibus viverra ante eget varius. Curabitur semper in...

CSS

#c {
    position: absolute;
    z-index: 2;
    top: 0px;
    left: 0px;
}

JavaScript

var container, stats;

var camera, scene, renderer, objects;
var particleLight;

var materials = [];

init();
animate();

function init() {
    console.log("here1");
    container = document.getElementById( 'c' );
    //document.body.appendChild( container );
    console.log("here2");
    
    camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
    camera.position.set( 0, 200, 800 );
    
    scene = new THREE.Scene();
    
    // Grid
    
    var line_material = new THREE.LineBasicMaterial( { color: 0x303030 } ),
        geometry = new THREE.Geometry(),
        floor = -75, step = 25;
    
    for ( var i = 0; i <= 40; i ++ ) {
        
        geometry.vertices.push( new THREE.Vector3( - 500, floor, i * step - 500 ) );
        geometry.vertices.push( new THREE.Vector3(   500, floor, i * step - 500 ) );
        
        geometry.vertices.push( new THREE.Vector3( i * step - 500, floor, -500 ) );
        geometry.vertices.push( new THREE.Vector3( i * step - 500, floor,  500 ) );
        
    }
    
    var line = new THREE.Line( geometry, line_material, THREE.LinePieces );
    scene.add( line );
    
    // Materials
    
    var texture = new THREE.Texture( generateTexture() );
    texture.needsUpdate = true;
    
    materials.push( new THREE.MeshLambertMaterial( { map: texture, transparent: true } ) );
    materials.push( new THREE.MeshLambertMaterial( { color: 0xdddddd, shading: THREE.FlatShading } ) );
    materials.push( new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0xdddddd, specular: 0x009900, shininess: 30, shading: THREE.FlatShading } ) );
    materials.push( new THREE.MeshNormalMaterial( ) );
    materials.push( new THREE.MeshBasicMaterial( { color: 0xffaa00, transparent: true, blending: THREE.AdditiveBlending } ) );
    //materials.push( new THREE.MeshBasicMaterial( { color: 0xff0000, blending: THREE.SubtractiveBlending } ) );
    
    materials.push( new THREE.MeshLambertMaterial( { color: 0xdddddd,...