three.js中的粒子

Question

有人可以解釋一下爲什麼在下面的代碼中沒有可見的粒子？ 按照教程，一切似乎沒問題。

(function() { 

var camera, scene, renderer; 

init(); 
animate(); 

function init() { 

    scene = new THREE.Scene(); 
    var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight; 
    var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH/SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000; 
    camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR); 
    scene.add(camera); 
    camera.position.set(2,2,10); 
    camera.lookAt(scene.position); 
    console.log(scene.position); 

    var geometry = new THREE.CubeGeometry(1,1,1); 
    var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); 
    var cube = new THREE.Mesh(geometry, material); 
    scene.add(cube); 

    var pGeometry = new THREE.Geometry(); 
    for (var p = 0; p < 2000; p++) { 
     var particle = new THREE.Vector3(Math.random() * 50 - 25, Math.random() * 50 - 25, Math.random() * 50 - 25); 
     pGeometry.vertices.push(particle); 
    } 
    var pMaterial = new THREE.ParticleBasicMaterial({ color: 0xfff, size: 1 }); 
    var pSystem = new THREE.ParticleSystem(pGeometry, pMaterial); 
    scene.add(pSystem); 

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

    document.body.appendChild(renderer.domElement); 

} 

function animate() { 
    requestAnimationFrame(animate); 
    renderer.render(scene, camera); 

} 

})(); 

fiddle

Answer 1

CanvasRenderer不支持ParticleSystem。您需要使用WebGLRenderer。

如果您需要使用CanvasRenderer，請參閱http://threejs./examples/canvas_interactive_particles.html以瞭解如何使用Sprites來代替。

three.js所r.64

Answer 2

此外，作爲一個側面說明，作爲這個答案的時候，IE11的WebGL的實現則與點和漿紗他們的問題。 Three.js着色器中的粒子使用點來繪製粒子，所以在IE11中，你會看到非常小的方塊，如果你不注意，你可能根本看不到任何東西;）

我知道在下一個版本的IE（即將更新），這是固定的，並且不僅允許您更改點大小，還可以使用它們的位圖。