Javascript three.js中的粒子

有人能解释一下为什么在下面的代码中没有可见的粒子吗？ 按照一个教程，一切似乎都好

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

}

})();

（函数（）{
摄像机、场景、渲染器；
init（）；
制作动画（）；
函数init（）{
场景=新的三个。场景（）；
变量SCREEN\u WIDTH=window.innerWidth，SCREEN\u HEIGHT=window.innerHeight；
可变视角=45，纵横比=屏幕宽度/屏幕高度，近=0.1，远=20000；
摄像机=新的三个透视摄像机（视角、方向、近距离、远距离）；
场景。添加（摄影机）；
摄像机位置设置（2,2,10）；
摄像机。注视（场景。位置）；
控制台日志（场景位置）；
var geometry=新的三立方测量法（1,1,1）；
var material=new THREE.MeshBasicMaterial（{color:0x00ff00}）；
var cube=新的三个网格（几何体、材质）；
场景.添加（立方体）；
var pGeometry=新的三点几何（）；
对于（var p=0；p<2000；p++）{
var particle=new THREE.Vector3（Math.random（）*50-25，Math.random（）*50-25，Math.random（）*50-25）；
几何。顶点。推（粒子）；
}
var pMaterial=新的三种。刨花板材质（{颜色：0xfff，大小：1}）；
var p系统=新的三粒子系统（p几何、p材料）；
场景.添加（pSystem）；
renderer=new THREE.CanvasRenderer（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
}
函数animate（）{
请求动画帧（动画）；
渲染器。渲染（场景、摄影机）；
}
})();

---

CanvasRenderer

不支持

ParticleSystem

。您需要使用

WebGLRenderer

如果需要使用

画布渲染器

，请参阅以了解如何使用

精灵

---

three.js r.64

另外，作为补充说明，截至本次回答时，IE11的WebGL实现在点数和大小方面存在问题。Three.js着色器中的粒子使用点来绘制粒子，因此在IE11中，您将看到非常小的正方形，如果您不注意，可能根本看不到任何东西；）

我知道在IE的下一个版本（即将更新）中，这是固定的，并且允许您不仅更改点大小，还可以使用位图