javascript - Three.js 3d sphere looks 2d

Question

你好，我最近开始研究 three.js，我正在尝试使用轨道控件创建一个包含一些 3d 球体和基本旋转的场景。下面是我当前的代码，我面临的问题是，当我旋转相机时，球体看起来像是被压扁了/2d，我不知道我做错了什么。

这是一个jsFiddle

var camera, scene, renderer, controls, particles = [];

window.requestAnimFrame = (function(){
    return  window.requestAnimationFrame       || 
            window.webkitRequestAnimationFrame || 
            window.mozRequestAnimationFrame    || 
            window.oRequestAnimationFrame      || 
            window.msRequestAnimationFrame     ||  
            function( callback ){
                window.setTimeout(callback, 1000 / 60);
            };
})();

var generateParticles = function() { 

    var geometry, material, particle; 

    for ( var zpos= -10000; zpos < 10000; zpos+=200 ) {

        geometry = new THREE.SphereGeometry( 6, 32, 32 );
        //material = new THREE.MeshLambertMaterial({color: 0xD43001});

        material = new THREE.MeshPhongMaterial({ 
            color: 0x333333, 
            ambient: 0xffffff,
            specular: 0xffffff,
            shininess: 50
        });

        // material = new THREE.MeshNormalMaterial();

        particle = new THREE.Mesh( geometry, material );


        particle.geometry.dynamic = true;
        particle.geometry.verticesNeedUpdate = true;
        //particle.geometry.normalsNeedUpdate = true;       

        particle.position.x = Math.random() * 2000 - 1000;
        particle.position.y = Math.random() * 2000 - 1000; 
        particle.position.z = zpos;

        particle.scale.x = particle.scale.y = 10;

        scene.add( particle );

        particles.push(particle);

    }

}

var generateLight = function() {

    var ambient = new THREE.AmbientLight( 0x111111);
        scene.add( ambient );

    var color = new THREE.Color("rgb(255,0,0)");
    var pointLightRed = new THREE.PointLight(color, 1, 2000);
        pointLightRed.position.set( 0, 0, -2000);
        scene.add( pointLightRed );

    var color = new THREE.Color("rgb(0,255,0)");
    var pointLightGreen = new THREE.PointLight(color, 1, 2000);
        pointLightGreen.position.set( 0, 0, 2000);
        scene.add( pointLightGreen );

    var directionalLight1 = new THREE.DirectionalLight( 0xffffff, 5, 10000 );
    directionalLight1.position.set( 0, 2000, 0 );
    scene.add( directionalLight1 ); 

}

var init = function() {

    // camera
    camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.z = 5000;

    // scene
    scene = new THREE.Scene();
    scene.add( camera );

    // renderer
    renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.autoClear = false;

    controls = new THREE.OrbitControls( camera, renderer.domElement );
    controls.rotateSpeed = 0.5;
    controls.minDistance = 500;
    controls.maxDistance = 6000;

    document.body.appendChild( renderer.domElement );

    // add particles
    generateParticles();

    // add light
    generateLight();

    // start rendering
    render();
}

var update = function() {

    for(var i=0; i<particles.length; i++) {

        particles[i].position.z +=  20;

        if ( particles[i].position.z > 10000 ) particles[i].position.z = -10000; 

    }

}

var render = function() {
    requestAnimationFrame( render );
    update();
    controls.update();
    renderer.render(scene, camera);
}

window.onload = function(){
    init();
}

Answer 1

particle.scale.x = particle.scale.y = particle.scale.z = 10;