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>