Three.js THREE.ImageUtils.loadTexture圖像大小調整

Question

我正在使用Three.js並且有一個問題。在粒子功能中，我添加了圖像，它在四處飛舞。代碼：

功能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+=20) { 

      // we make a particle material and pass through the 
      // colour and custom particle render function we defined. 

      var particleTexture = THREE.ImageUtils.loadTexture('img/fly.png'); 
      material = new THREE.ParticleBasicMaterial({ map: particleTexture, transparent: true, 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 = 0.3; 

      // add it to the scene 
      scene.add(particle); 

      // and to the array of particles. 
      particles.push(particle); 
     } 

    } 

問題是，當我調整頁面，所有的圖像得到他們的寬度粉碎，不留比例。如何在調整頁面大小的同時保持圖像的大小？

全碼：

<script> 
      // the main three.js components 
      var camera, scene, renderer, 
      // to keep track of the mouse position 
       mouseX = 0, mouseY = 0, 
      // an array to store our particles in 
       particles = []; 
      // let's get going! 
      init(); 
      function init() { 
       // Camera params : 
       // field of view, aspect ratio for render output, near and far clipping plane. 
       camera = new THREE.PerspectiveCamera(-50, window.innerWidth/window.innerHeight, -20, -10000); 

       // move the camera backwards so we can see stuff! 
       // default position is 0,0,0. 
       camera.position.z = 80; 
       // 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! 

       renderer = new THREE.CanvasRenderer(); 
       renderer.setSize(window.innerWidth, window.innerHeight); 

       // the renderer's canvas domElement is added to the body 
       document.body.appendChild(renderer.domElement); 
       makeParticles(); 

       // add the mouse move listener 
       document.addEventListener('mousemove', onMouseMove, false); 

       // render 30 times a second (should also look 
       // at requestAnimationFrame) 
       setInterval(update,1000/30); 

      } 
      // 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+=20) { 

        // we make a particle material and pass through the 
        // colour and custom particle render function we defined. 

        var particleTexture = THREE.ImageUtils.loadTexture('img/fly.png'); 
        material = new THREE.ParticleBasicMaterial({ map: particleTexture, transparent: true, 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 = 0.3; 

        // 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 += mouseY * 0.02; 

        // if the particle is too close move it to the back 
        if(particle.position.z>1500) particle.position.z-=2300; 

       } 

      } 

     // called when the mouse moves 
      function onMouseMove(event) { 
       // store the mouseX and mouseY position 
       mouseX = event.clientX; 
       mouseY = event.clientY; 
      } 
     </script> 

Answer 1

我想，你需要調整的渲染和更新相機的縱橫比。幾乎每個three.js示例中都可以找到以下代碼，但在代碼中看不到它。

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

function onWindowResize() { 
    var canvasWidth = window.innerWidth; 
    var canvasHeight = window.innerHeight; 
    renderer.setSize(canvasWidth, canvasHeight); 
    camera.aspect = canvasWidth/canvasHeight; 
    camera.updateProjectionMatrix(); 
}