CODEWITHSUNDEEP
javascriptcanvasthree.js
mjanisz1
mjanisz1

Reputation: 1516

Particles in three.js

Can someone kindly explain me why there are no particles visible in the following code? Followed a tutorial and everything seems ok. 

(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

Upvotes: 0

Views: 319

Answers (2)

neoRiley
neoRiley

Reputation: 475

Also, as a side note, as of the time of this answer, IE11's WebGL implementation has an issue with points and sizing them. Particles in Three.js shaders use points to draw the particles and so in IE11, you will see very small squares and if you're not paying attention, you might not see anything at all ;)

I do know that in the next version of IE (updates coming) that this is fixed and allows you not only to change the point size, but use bitmaps with them.

Upvotes: 0

WestLangley
WestLangley

Reputation: 104783

CanvasRenderer does not support ParticleSystem. You need to use WebGLRenderer.

If you need to use CanvasRenderer, then see http://threejs./examples/canvas_interactive_particles.html for how to use Sprites instead.

three.js r.64

Upvotes: 2

Related Questions