1

So I've been playing around with Three.JS (graphics/anim not my strong point) and came up with this, adapted from a tutorial:

Here's a JS Fiddle

As you can see, I'm almost certainly a 3D animation genius. I digress...

My question is: how to get the objects to rotate about their centre - not, as currently, about an extremity?

I'm conscious of the particle.rotation.set method but I don't know what values to pass and I can't seem to find this method in the Three.JS documentation. Looking around, I've seen people pass 0 values to this, others passing Math.PI-derived values. In short, I'm not sure what I'm doing. Obviously this should be used in the makeParticles function (shown below):

function makeParticles() {

     var particle, material;

     // add random particles from close up to far away
     for ( var zpos= -1000; zpos < 1000; zpos+=20 ) {

       // create particle, setting random colour and calling particle renderer
       material = new THREE.ParticleCanvasMaterial({
         color: '0x'+(function() {
             var ret = '';
             for (var i=0; i<6; i++)
               ret += hex_chars.charAt(Math.floor(Math.random() * hex_chars.length));
             return ret;
         })(),
         program: particleRender
       });

       // make the particle and set positional properties (random X / Y)
       particle = new THREE.Particle(material);
       particle.position.x = Math.random() * 1000 - 500;
       particle.position.y = Math.random() * 1000 - 500;
       particle.position.z = zpos;

       // scale and add to scene
       particle.scale.x = particle.scale.y = 50;
       scene.add( particle );

       // and to the array of particles.
       particles.push(particle);
     }

 }
Mitya
  • 33,629
  • 9
  • 60
  • 107

1 Answers1

0

I'm not very familiar with three.js but a way to change the rotation point is to change your particleRender function to this:

function particleRender(ctx) {
    ctx.beginPath();
    ctx.save();
    ctx.translate(-1,-1);
    ctx.rect(0, 0, 2, 2);
    ctx.fill();
    ctx.restore();
};

I'm guessing here, but it could be that particles (due to their nature) have no real size within the three.js library and thus their coordinates are also their center of rotation. To have them rotate correctly your draw method needs to be centered.

Mr. T
  • 119
  • 1
  • 3