Question

所以我一直在玩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);
     }

 }

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

Three.JS - 如何设置旋转轴

1 个答案: