Why is this simple THREE.js javascript particle system not working?

Question

Are there any errors is this code? I am using a new version of Chrome to test on. I've written a similar program that displays a wireframe cube, with no issues. It ran well. I'm thinking I may have written or structured my code incorrectly.

var scene = new THREE.Scene(); 
var camera = new THREE.PerspectiveCamera(50,window.innerWidth/window.innerHeight, 1, 10000); 
var renderer = new THREE.WebGLRenderer(); 
  renderer.setSize(window.innerWidth, window.innerHeight); 
  document.body.appendChild(renderer.domElement); 

// create the particle variables
var particleCount = 1000;
var particles = new THREE.Geometry();
var pMaterial = new THREE.ParticleBasicMaterial({
  color: 'red',
  size: 20
});

// create the individual particles
for (var p = 0; p < particleCount; p++) {
  var pX = Math.random()*500 - 250;
  var pY = Math.random()*500 - 250;
  var pZ = Math.random()*500 - 250;
  var particle = new THREE.Vertex(
    new THREE.Vector3(pX, pY, pZ)
  );
  particles.vertices.push(particle);
}

// create the particle system
var particleSystem = new THREE.ParticleSystem(
  particles,
  pMaterial);

// add the particle system to the scene
scene.add(particleSystem);

function render() {
  particleSystem.rotation.y += 0.01;
  renderer.render(scene, camera);
  requestAnimationFrame(render);
}
render();

I'm not seeing any results, so to speak - just a black canvas element on the page.

It would help if you would say what results you see and how that differs from what you expect. To know if there are any (syntax) erors in your code check the browser console. — HBP
– HBP, Commented Dec 14, 2014 at 8:51
I'm not seeing any results, so to speak - just a black canvas element on the page. — Ice101781
– Ice101781, Commented Dec 14, 2014 at 8:52

WestLangley · Accepted Answer · 2014-12-14 17:50:43Z

3

Your code looks outdated -- as if you copied something from the net, or from an outdated book.

Update to the current version of three.js, and learn from the current three.js examples.

Create your particles like so:

var particle = new THREE.Vector3( pX, pY, pZ );

Also, ParticleSystem is now PointCloud, and ParticleBasicMaterial is now PointCloudMaterial.

three.js r.69

answered Dec 14, 2014 at 17:50

WestLangley

105k11 gold badges288 silver badges285 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Why is this simple THREE.js javascript particle system not working?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related