三.JS - 如何设置旋转轴 [英] Three.JS - how to set rotation axis

问题描述

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

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

< a href =http://jsfiddle.net/DyrEE/1/ =nofollow> 这是一个JS小提琴

你可以看到，我几乎肯定是一个3D动画天才。我离题...

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?

我知道 particle.rotation.set 不知道什么值传递，我似乎不能在Three.JS文档中找到这个方法。环顾四周，我看到人们通过 0 的值，其他人通过 Math.PI - 来源的值。总之，我不知道我在做什么。显然这应该在 makeParticles 函数中使用（如下所示）：

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

 }

推荐答案

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

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

我在这里猜，但可能是因为粒子size在three.js库中，因此它们的坐标也是它们的旋转中心。要使它们正确旋转，您的绘制方法需要居中。

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.

这篇关于三.JS - 如何设置旋转轴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！