THREE.js Using MeshPhongMaterial As Particle Material and Setting Size

Question

I am trying to create particles that have the properties of a Phong material (react to light), to achieve this I have used the "createMultiMaterialObject", this has worked on the most part other than ignoring the particle size, for some reason the particles seems to be weird triangle shapes, see below:

This is the code I am using:

var ringGeometry = new THREE.TorusGeometry( rad, ringSize, 1, 200, Math.PI * 2);
materials = [
p2paterial = new THREE.MeshPhongMaterial({shading: THREE.SmoothShading, blending:     THREE.AdditiveBlending, transparent: true, color: ringColour, ambient: 0x000000, specular:     0xffffff, shininess: 1, vertexColors: false  } ),
pmaterial = new THREE.ParticleBasicMaterial( { size: 1, transparent: true,     vertexColors: true  } )
        ];
singleRing = new THREE.SceneUtils.createMultiMaterialObject(ringGeometry, materials);

Can anyone point me in the direction of how I can achieve the last bit, making the particles size 1 each - I'm so close to getting what I want that I suspect it's just an option I need to tweak somewhere.

Answer 1

Try this instead:

var geometry = new THREE.TorusGeometry( rad, ringSize, 1, 200, Math.PI * 2);

var material = new THREE.MeshPhongMaterial({shading: THREE.SmoothShading, blending:     THREE.AdditiveBlending, transparent: true, color: ringColour, ambient: 0x000000, specular:     0xffffff, shininess: 1, vertexColors: false  } );
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

var material = new THREE.ParticleBasicMaterial( { size: 1, transparent: true,     vertexColors: true  } );
var particles = new THREE.ParticleSystem( geometry, material );
scene.add( particles );

Answer 2

I have never worked with three.js, but I was messing around with your fiddle and I got something that looks more like particles by adjusting the value of RadialSegments in your TorusGeometry declaration....

var geometry = new THREE.TorusGeometry( 10, 10, .5, 200, Math.PI * 2);

http://jsfiddle.net/sJZeH/