三.JS——如何设置旋转轴答案

【问题标题】：Three.JS - how to set rotation axis三.JS——如何设置旋转轴
【发布时间】：2012-08-02 17:39:45
【问题描述】：

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

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

我的问题是：如何让对象围绕其中心旋转 - 而不是像目前那样围绕肢体旋转？

我知道particle.rotation.set 方法，但我不知道要传递什么值，而且我似乎在 Three.JS 文档中找不到这个方法。环顾四周，我看到人们将0 值传递给它，其他人传递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);
     }

 }

【问题讨论】：

标签： canvas rotation webgl three.js

【解决方案1】：

我对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 库中没有实际大小，因此它们的坐标也是它们的旋转中心。要让它们正确旋转，您的 draw 方法需要居中。

【讨论】：