Three.js 3d球體看起來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;