三個粒子.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);

}

})();

小提琴

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（更新即將發布）中，這是固定的，不僅可以更改點大小，還可以使用位圖。