Responsive Container

How do I prevent the animation from the distorting when the window (container) resizing? I tried window resize, but that didn’t work.

<!DOCTYPE HTML>
<html lang="en">
	<head>
		<title>three.js particle tutorial</title>
		<meta charset="utf-8">
		<meta content="width=device-width, user-scalable=yes, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0" name="viewport">

		<style type="text/css">
			body,
			html {
				background-color: #000000;
				margin: 0px;
				width: 100%;
				height: 100%;
			}

			#canvas {
				background: #000;
				border: 1px solid #fff;
				margin: 0 auto;
				max-height: 348px;
				max-width: 1080px;
				height: 100%;
			}

			#canvas canvas {
				height: 348px;
				max-width: 1080px;
				width: 100%;
				overflow: hidden;
			}

			#canvas img {
				left: 0;
				right: 0;
				margin-left: auto;
				margin-right: auto;
				top: 5%;
				position: absolute;
				width: 225px;
				z-index: 100;
				text-align: center;
			}
		</style>
		
	</head>
	<body>

		<div id="canvas">
			
		</div>

		<script src="Three.js"></script>

		<script>

			// the main three.js components
			var camera, scene, renderer,

			// an array to store our particles in
				particles = [];

			// let's get going! 
			init();


			function init() {

				renderer = new THREE.CanvasRenderer();
				var container = document.getElementById("canvas");
				var w = container.offsetWidth;
        var h = container.offsetHeight;
        renderer.setSize(w, h);
        container.appendChild( renderer.domElement );

				// Camera params : 
				// field of view, aspect ratio for render output, near and far clipping plane. 
				camera = new THREE.PerspectiveCamera(40, w / h, 1, 5000);
	
				// move the camera backwards so we can see stuff! 
				// default position is 0,0,0. 
				camera.position.z = 1000;

				// the scene contains all the 3D object data
				scene = new THREE.Scene();
				
				// camera needs to go in the scene 
				scene.add(camera);
	
				// and the CanvasRenderer figures out what the 
				// stuff in the scene looks like and draws it!

				makeParticles(); 
				
			
				setInterval(update,3000/120);
			
			}


			// the main update function, called 30 times a second

			function update() {

				

				updateParticles();

				// and render the scene from the perspective of the camera
				renderer.render( scene, camera );

			}

			// creates a random field of Particle objects
			
			function makeParticles() { 
				
				var particle, material; 


				// we're gonna move from z position -1000 (far away) 
				// to 1000 (where the camera is) and add a random particle at every pos. 
				for ( var zpos= -1000; zpos < 1000; zpos+=40 ) {
		
					// we make a particle material and pass through the 
					// colour and custom particle render function we defined. 
					material = new THREE.ParticleCanvasMaterial( { color: Math.random() * 0xf5851f, program: particleRender } );

					// make the particle
					particle = new THREE.Particle(material);
		
					// give it a random x and y position between -500 and 500
					particle.position.x = Math.random() * 1000 - 500;
					particle.position.y = Math.random() * 1000 - 500;
		
					// set its z position
					particle.position.z = zpos;
		
					// scale it up a bit
					particle.scale.x = particle.scale.y = 15;
		
					// add it to the scene
					scene.add( particle );
		
					// and to the array of particles. 
					particles.push(particle); 
				}
				
			}
			
			// there isn't a built in circle particle renderer 
			// so we have to define our own. 

			function particleRender( context ) {
				
				// we get passed a reference to the canvas context
				context.beginPath();
				// and we just have to draw our shape at 0,0 - in this
				// case an arc from 0 to 2Pi radians or 360º - a full circle!
				context.arc( 0, 0, 1, 0,  Math.PI * 2, true );
				context.fill();
			};

			
			// moves all the particles dependent on mouse position
			
			function updateParticles() { 
				
				// iterate through every particle
				for(var i=0; i<particles.length; i++) {
		
					particle = particles[i]; 
		
					// and move it forward dependent on the mouseY position. 
					particle.position.z +=  24 * 1;
		
					// if the particle is too close move it to the back
					if(particle.position.z>1000) particle.position.z-=2000; 
		
				}
	
			}
		

		</script>
	</body>
</html>

The following code does not work?

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

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

}
1 Like

Yup! I tried that. It doesn’t work. Have to refresh the browser for animation to look normal.

What revision of three.js are you using?

Okay, I am using a very old one #48.

Indeed, that’s very old. Try to use the latest version (R90). The following example might be helpful to you. It uses CanvasRenderer and has some nice interactive particles. And resizing works perfectly :wink:

https://threejs.org/examples/canvas_interactive_particles.html

Besides: What are your reasons for using CanvasRenderer?

Hi, Thanks for you help. I got it to work.

I am new to Threejs. I was in one of the tutorials online.