javascript - 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();
}