title: Three.js simple particle animation
body: <p>I'm trying to recreate the existing particle animation (<a href="https://stackoverflow.com/questions/58658689/apply-random-rotation-to-canvas-particles">previous post</a>) using three.js for added perspective and 3d rotation. This is my first time using three.js and I'm having some issues on how to:</p>
  
  <ol>
  <li>Randomly scatter the particles on the screen.</li>
  <li>Correctly (without the black background) apply an image texture to the particles.</li>
  <li>Apply the rotation just as my previous post but with some 3d touch.</li>
  </ol>
  
  <p>Basically I'm trying to recreate what I was trying to do in my previous post on <code>canvas</code>, using three.js.</p>
  
  <p>Please point me in the right direction. Thank you :)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  
  camera.position.z = 10;
  
  var renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  
  renderer.setClearColor("#343434");
  renderer.setSize(window.innerWidth, window.innerHeight);
  
  document.body.appendChild(renderer.domElement);
  
  window.addEventListener('resize', () =&gt; {
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.aspect = window.innerWidth / window.innerHeight;
  
    camera.updateProjectionMatrix();
  })
  
  var texture = new THREE.TextureLoader().load('https://i.postimg.cc/rmn0cLmS/confetti.png');
  
  for (i = 0; i &lt; 50; i++) {
    var material = new THREE.MeshLambertMaterial({
      map: texture,
      side: THREE.DoubleSide
    })
  
    var geometry = new THREE.PlaneGeometry(.5, 1 * .75);
    var mesh = new THREE.Mesh(geometry, material);
  
    mesh.position.x = (Math.random() * (500 - 1) + 1) * Math.random() &lt; 0.5 ? -1 : 1;
    mesh.position.y = (Math.random() * (window.innerHeight - 1) + 1 * Math.random() &lt; 0.5 ? -1 : 1);
    mesh.position.z = (Math.random() * (10 - 1) + 1 * Math.random() &lt; 0.5 ? -1 : 1);
  
    scene.add(mesh);
  }
  
  var light = new THREE.PointLight(0xFFFFFF, 1, 500);
  
  light.position.set(10, 0, 25);
  
  scene.add(light);
  
  var render = function() {
    requestAnimationFrame(render);
  
    mesh.position.y -= 0.05;
    mesh.rotation.x += 0.05;
    mesh.rotation.y += 0.01;
  
    renderer.render(scene, camera);
  }
  
  render();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 0;
    height: 100vh;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/109/three.js" type="text/javascript"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>