Creating a transparent background in a three.js canvas: a step-by-step guide

Question

Creating a transparent background in a three.js canvas: a step-by-step guide

I came across a wave particle animation on Codepen (https://codepen.io/kevinsturf/pen/ExLdPZ) that I want to use, but it has a white background. However, when I try to set the body background to red, it doesn't show up once the canvas is rendered.

I also attempted to set the alpha value to 0 with the following code:

    renderer.setClearColor( 0xffffff, 0);

How can I achieve transparency in this animation?

javascript css three.js

Answer 1

Answer №1

To make the background transparent, you must pass alpha as true to the renderer:

renderer = new THREE.CanvasRenderer({ alpha: true });

After that, you can set it to be transparent:

renderer.setClearColor( 0x000000, 0 );

We also included a black background color for the div so you can observe it in action

.waves { 
  height: 100vh;
  background-color: black
}

/* 

ThreeJs custom waves
Original script by ThreeJS : https://threejs.org/examples/canvas_particles_waves.html
Modified version for Cloudoru by Kevin Rajaram : http://kevinrajaram.com
Date: 08/14/2014


*/

var SEPARATION = 40, AMOUNTX = 130, AMOUNTY = 35;

var container;
var camera, scene, renderer;
/*

if (window.WebGLRenderingContext){
    renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
    }
else {
    renderer = new THREE.CanvasRenderer();
    }
*/

var particles, particle, count = 0;

var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

init();
animate();

function init() {

    container = document.createElement( 'div' );
    document.body.appendChild( container );
    if(container) {
        container.className += container.className ? ' waves' : 'waves';
    }

    camera = new THREE.PerspectiveCamera( 120, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.y = 150; //changes how far back you can see i.e the particles towards horizon
    camera.position.z = 300; //This is how close or far the particles are seen
    
    camera.rotation.x = 0.35;
    
    scene = new THREE.Scene();

    particles = new Array();

    var PI2 = Math.PI * 2;
    var material = new THREE.SpriteCanvasMaterial( {

        color: 0xFFFFFF, //changes color of particles
        program: function ( context ) {

            context.beginPath();
            context.arc( 0, 0, 0.1, 0, PI2, true );
            context.fill();

        }

    } );

    var i = 0;

    for ( var ix = 0; ix < AMOUNTX; ix ++ ) {

        for ( var iy = 0; iy < AMOUNTY; iy ++ ) {

            particle = particles[ i ++ ] = new THREE.Sprite( material );
            particle.position.x = ix * SEPARATION - ( ( AMOUNTX * SEPARATION ) / 2 );
            particle.position.z = iy * SEPARATION - ( ( AMOUNTY * SEPARATION ) - 10 );
            scene.add( particle );

        }

    }

    renderer = new THREE.CanvasRenderer({ alpha: true });
    renderer.setSize( window.innerWidth, window.innerHeight );
    
  renderer.setClearColor( 0x000000, 0 );
    container.appendChild( renderer.domElement );

    window.addEventListener( 'resize', onWindowResize, false );

}

function onWindowResize() {

    windowHalfX = window.innerWidth / 2;
    windowHalfY = window.innerHeight / 2;

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize( window.innerWidth, window.innerHeight );

}

function animate() {

    requestAnimationFrame( animate );

    render();

}

function render() {

    var i = 0;

    for ( var ix = 0; ix < AMOUNTX; ix ++ ) {

        for ( var iy = 0; iy < AMOUNTY; iy ++ ) {

            particle = particles[ i++ ];
            particle.position.y = ( Math.sin( ( ix + count ) * 0.5 ) * 20 ) + ( Math.sin( ( iy + count ) * 0.5 ) * 20 );
            particle.scale.x = particle.scale.y = ( Math.sin( ( ix + count ) * 0.3 ) + 2 ) * 4 + ( Math.sin( ( iy + count ) * 0.5 ) + 1 ) * 4;

        }

    }

    renderer.render( scene, camera );

    // This increases or decreases speed
    count += 0.2;

}

canvas{
  position: absolute;
  top:0;
  left:0;
  z-index:2;
}

.waves { 
  height: 100vh;
  background-color: black
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r68/three.min.js"></script>

Answer 2

To make the background transparent, you must pass alpha as true to the renderer:

renderer = new THREE.CanvasRenderer({ alpha: true });

After that, you can set it to be transparent:

renderer.setClearColor( 0x000000, 0 );

We also included a black background color for the div so you can observe it in action

.waves { 
  height: 100vh;
  background-color: black
}

/* 

ThreeJs custom waves
Original script by ThreeJS : https://threejs.org/examples/canvas_particles_waves.html
Modified version for Cloudoru by Kevin Rajaram : http://kevinrajaram.com
Date: 08/14/2014


*/

var SEPARATION = 40, AMOUNTX = 130, AMOUNTY = 35;

var container;
var camera, scene, renderer;
/*

if (window.WebGLRenderingContext){
    renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
    }
else {
    renderer = new THREE.CanvasRenderer();
    }
*/

var particles, particle, count = 0;

var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

init();
animate();

function init() {

    container = document.createElement( 'div' );
    document.body.appendChild( container );
    if(container) {
        container.className += container.className ? ' waves' : 'waves';
    }

    camera = new THREE.PerspectiveCamera( 120, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.y = 150; //changes how far back you can see i.e the particles towards horizon
    camera.position.z = 300; //This is how close or far the particles are seen
    
    camera.rotation.x = 0.35;
    
    scene = new THREE.Scene();

    particles = new Array();

    var PI2 = Math.PI * 2;
    var material = new THREE.SpriteCanvasMaterial( {

        color: 0xFFFFFF, //changes color of particles
        program: function ( context ) {

            context.beginPath();
            context.arc( 0, 0, 0.1, 0, PI2, true );
            context.fill();

        }

    } );

    var i = 0;

    for ( var ix = 0; ix < AMOUNTX; ix ++ ) {

        for ( var iy = 0; iy < AMOUNTY; iy ++ ) {

            particle = particles[ i ++ ] = new THREE.Sprite( material );
            particle.position.x = ix * SEPARATION - ( ( AMOUNTX * SEPARATION ) / 2 );
            particle.position.z = iy * SEPARATION - ( ( AMOUNTY * SEPARATION ) - 10 );
            scene.add( particle );

        }

    }

    renderer = new THREE.CanvasRenderer({ alpha: true });
    renderer.setSize( window.innerWidth, window.innerHeight );
    
  renderer.setClearColor( 0x000000, 0 );
    container.appendChild( renderer.domElement );

    window.addEventListener( 'resize', onWindowResize, false );

}

function onWindowResize() {

    windowHalfX = window.innerWidth / 2;
    windowHalfY = window.innerHeight / 2;

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize( window.innerWidth, window.innerHeight );

}

function animate() {

    requestAnimationFrame( animate );

    render();

}

function render() {

    var i = 0;

    for ( var ix = 0; ix < AMOUNTX; ix ++ ) {

        for ( var iy = 0; iy < AMOUNTY; iy ++ ) {

            particle = particles[ i++ ];
            particle.position.y = ( Math.sin( ( ix + count ) * 0.5 ) * 20 ) + ( Math.sin( ( iy + count ) * 0.5 ) * 20 );
            particle.scale.x = particle.scale.y = ( Math.sin( ( ix + count ) * 0.3 ) + 2 ) * 4 + ( Math.sin( ( iy + count ) * 0.5 ) + 1 ) * 4;

        }

    }

    renderer.render( scene, camera );

    // This increases or decreases speed
    count += 0.2;

}

canvas{
  position: absolute;
  top:0;
  left:0;
  z-index:2;
}

.waves { 
  height: 100vh;
  background-color: black
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r68/three.min.js"></script>

Creating a transparent background in a three.js canvas: a step-by-step guide

Answer №1

Similar questions

Using JavaScript to sort data within specific timeframes

basic fading javascript image rotator

Steps for positioning an element to the left and center of a div

Experiencing difficulties with setting the width of owl carousel

Add a style to every div except for the final one

What causes the Invalid Form Body error to appear when using the Discord API?

React's setState is not reflecting the changes made to the reduced array

Installing v8-profiler on Windows 8 (64 bit) through npm: a step-by-step guide

Display pie charts on a Google Map

The Redis port and host remain unset despite having defined environment variables

Issue with redirect using Node.js promise

Request for removal in Express.js

Learning to extract data with multiple parameters in Node.js

Maintain the markup created by jQuery inside the AJAX function called by setInterval

Styling conditionally with Dash Bootstrap using an IF statement

What are the steps to ensure HTML5 video fills the entire height and width of the browser window?

The inline $Emit function is not generating the correct random number when using Math.random()

How to add Bootstrap and Font Awesome to your Angular project

Eclipse - enhancing outline view by utilizing require.js define(...)

menu with dropdown options within dropdown options