Apply background gradient of canvas in create-react-app environment

Hi. I have a question again.

I created an app using create-react-app.

I used Pointsmaterial and configured it like the following picture. This is equivalent to the example provided in three.js.
image

Here the problem begins. I want to add a gradient color to the background of the canvas. However, its color does not change.

The only color is changed when setClearColor() is applied.

Here is my code:

componentDidMount() {

			var SEPARATION = 100, AMOUNTX = 50, AMOUNTY = 50;
			var container;
			var camera, scene, renderer;
			var particles, count = 0;
			var mouseX = 0, mouseY = 0;
			var windowHalfX = window.innerWidth / 2;
			var windowHalfY = window.innerHeight / 2;
			init();
			animate();

      function init() {
				container = document.querySelector( '.mainBody' );
				document.body.appendChild( container );
				camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 10000 );
				camera.position.z = 1000;
				scene = new THREE.Scene();
        // scene.background = new THREE.Color(0x11BBE8);

				var numParticles = AMOUNTX * AMOUNTY;
				var positions = new Float32Array( numParticles * 3 );
				var scales = new Float32Array( numParticles );
				var i = 0, j = 0;
				for ( var ix = 0; ix < AMOUNTX; ix ++ ) {
					for ( var iy = 0; iy < AMOUNTY; iy ++ ) {
						positions[ i ] = ix * SEPARATION - ( ( AMOUNTX * SEPARATION ) / 2 ); // x
						positions[ i + 1 ] = 0; // y
						positions[ i + 2 ] = iy * SEPARATION - ( ( AMOUNTY * SEPARATION ) / 2 ); // z
						scales[ j ] = 1;
						i += 3;
						j ++;
					}
				}

				var geometry = new THREE.BufferGeometry();
				geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
				geometry.addAttribute( 'scale', new THREE.BufferAttribute( scales, 1 ) );

        //var sprite = new THREE.TextureLoader().load( 'textures/sprites/disc.png' );

        var material = new THREE.PointsMaterial( { size: 5, transparent: true, alphaTest: 0.5, alpha:true} );
				material.color.setHSL( 1.0, 1.0, 1.0 );

				particles = new THREE.Points(geometry, material);
				scene.add( particles );

				renderer = new THREE.WebGLRenderer( { alpha:true } );
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
        renderer.setClearColor (0x000000, 0.0);

				container.appendChild( renderer.domElement );
        // document.getElementById('canvas').appendChild(renderer.domElement);
				// stats = new Stats();
				// container.appendChild( stats.dom );
				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
				//
				window.addEventListener( 'resize', onWindowResize, false );

        console.log(container);
			}
			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 onDocumentMouseMove( event ) {
				mouseX = event.clientX - windowHalfX;
				mouseY = event.clientY - windowHalfY;
			}
			function onDocumentTouchStart( event ) {
				if ( event.touches.length === 1 ) {
					event.preventDefault();
					mouseX = event.touches[ 0 ].pageX - windowHalfX;
					mouseY = event.touches[ 0 ].pageY - windowHalfY;
				}
			}
			function onDocumentTouchMove( event ) {
				if ( event.touches.length === 1 ) {
					event.preventDefault();
					mouseX = event.touches[ 0 ].pageX - windowHalfX;
					mouseY = event.touches[ 0 ].pageY - windowHalfY;
				}
			}
			//
			function animate() {
				requestAnimationFrame( animate );
				render();
				// stats.update();
			}
			function render() {
				camera.position.x += ( mouseX - camera.position.x ) * .05;
				camera.position.y += ( - mouseY - camera.position.y ) * .05;
				camera.lookAt( scene.position );
				var positions = particles.geometry.attributes.position.array;
				var scales = particles.geometry.attributes.scale.array;
				var i = 0, j = 0;
				for ( var ix = 0; ix < AMOUNTX; ix ++ ) {
					for ( var iy = 0; iy < AMOUNTY; iy ++ ) {
						positions[ i + 1 ] = ( Math.sin( ( ix + count ) * 0.3 ) * 50 ) +
										( Math.sin( ( iy + count ) * 0.5 ) * 50 );
						scales[ j ] = ( Math.sin( ( ix + count ) * 0.3 ) + 1 ) * 8 +
										( Math.sin( ( iy + count ) * 0.5 ) + 1 ) * 8;
						i += 3;
						j ++;
					}
				}
				particles.geometry.attributes.position.needsUpdate = true;
				particles.geometry.attributes.scale.needsUpdate = true;
				renderer.render( scene, camera );
				count += 0.1;
			}

  }

The render part looks like this:

render(){
    return(
      <div>
        <MainBody className='mainBody' style={{position : 'absolute', top : '0%', bottom : '0%'}}>
          
        </MainBody>
      </div>
    )
  }

If you answer, I will be very thankful.

I’m afraid I’m not able to reproduce the issue with the following live example:

https://jsfiddle.net/pbdLrfjs/

As you can see, the usage of WebGLRenderer.setClearColor() is not necessary. Other related posts:

1 Like

I resoved the problem !

Thank you for you help!!:smile: