Javascript Three.js 3d球体看起来是二维的

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

这是一个

var摄影机、场景、渲染器、控件、粒子=[]；
window.requestAnimFrame=（函数（）{
return window.requestAnimationFrame | |
window.webkitRequestAnimationFrame | |
window.mozRequestAnimationFrame | |
window.oRequestAnimationFrame | |
window.msRequestAnimationFrame | |
函数（回调）{
设置超时（回调，1000/60）；
};
})();
var generateParticles=function（）{
变量几何、材料、粒子；
对于（变量zpos=-10000；zpos<10000；zpos+=200）{
几何学=新的三种。球墨法（6,32,32）；
//材质=新的三个.MeshLambertMaterial（{color:0xD43001}）；
材质=新的三个。网格材质（{
颜色：0x333333，
环境：0xffffff，
镜面反射：0xffffff，
光泽度：50
});
//材质=新的三个。MeshNormalMaterial（）；
粒子=新的三个网格（几何体、材质）；
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；
粒子位置z=zpos；
particle.scale.x=particle.scale.y=10；
场景。添加（粒子）；
粒子。推（粒子）；
}
}
var generateLight=函数（）{
var环境光=新的三个环境光（0x111111）；
场景。添加（环境光）；
var color=新的三种颜色（“rgb（255,0,0）”；
var pointLightRed=新的三点光源（颜色，1，2000）；
红点位置设置（0,0，-2000）；
场景。添加（点光源红色）；
var color=新三种颜色（“rgb（0255,0）”）；
var pointLightGreen=新的三点光源（颜色，1，2000）；
pointLightGreen.position.set（0,020000）；
场景。添加（pointLightGreen）；
var directionalLight1=新的三个方向灯（0xffffff，5，10000）；
方向灯1.位置设置（0,2000,0）；
场景。添加（方向光1）；
}
var init=函数（）{
//摄像机
摄像头=新的三个透视摄像头（45，window.innerWidth/window.innerHeight，11000）；
摄像机位置z=5000；
//场面
场景=新的三个。场景（）；
场景。添加（摄影机）；
//渲染器
renderer=new THREE.WebGLRenderer（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
renderer.autoClear=false；
控件=新的三个.轨道控件（摄影机、渲染器.doElement）；
controls.rotateSpeed=0.5；
controls.minDistance=500；
controls.maxDistance=6000；
document.body.appendChild（renderer.doElement）；
//添加粒子
generateParticles（）；
//加光
生成灯（）；
//开始渲染
render（）；
}
var update=函数（）{
对于（var i=0；i 10000）粒子[i]。位置.z=-10000；
}
}
var render=function（）{
请求动画帧（渲染）；
更新（）；
控件更新（）；
渲染器。渲染（场景、摄影机）；
}
window.onload=函数（）{
init（）；
}

哦，我的天啊，我完全忘了z。。。非常感谢。

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

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