1

所以我一直在玩 Three.JS（图形/动画不是我的强项）并想出了这个，改编自一个教程：

这是一个 JS 小提琴

如您所见，我几乎可以肯定是 3D 动画天才。我离题了...

我的问题是：如何让物体围绕它们的中心旋转——而不是像目前那样围绕四肢旋转？

我知道这个particle.rotation.set方法，但我不知道要传递什么值，而且我似乎在 Three.JS 文档中找不到这个方法。环顾四周，我看到人们将0值传递给 this，其他人传递 -Math.PI派生的值。简而言之，我不确定我在做什么。显然这应该在makeParticles函数中使用（如下所示）：

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);
     }

 }
4

1 回答 1

0

我对 three.js 不是很熟悉，但更改旋转点的一种方法是将您的particleRender 函数更改为：

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

我在这里猜测，但可能是粒子（由于它们的性质）在 three.js 库中没有实际大小，因此它们的坐标也是它们的旋转中心。要让它们正确旋转，您的绘制方法需要居中。

于 2012-08-06T09:52:40.893 回答