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的下一个版本（更新即将发布）中，这是固定的，不仅可以更改磅值，还可以使用位图。

三个粒子.js

2 个答案: