three.js-设置对象相对于其自身轴的旋转

debugcn 发表于 Dev

蓝色的东西

我试图用点云制作一个静态3D棱镜，每个点云中都有特定数量的粒子。我已经根据旋转角度获得了棱镜各边的角坐标，并尝试在这些坐标所约束的区域中生成粒子。取而代之的是，所得的点云仅保留了左下角的坐标。

截图：http：//i.stack.imgur.com/uQ7Q8.png

我尝试设置每个云对象的旋转角度，使其边缘相交，但它们只会绕世界中心旋转。我认为这与旋转矩阵和欧拉角有关，但是经过3天的尝试，我感到非常失望。（我是一名社会学家，而不是开发人员，并且在这个项目之前没有接触过图形。）

请帮忙？如何设置棱镜各面上的旋转角度？或者，也许还有一种更明智的方法来首先使粒子在正确的区域中生成？

代码：

// draw the particles

var n = 0;

do {

    var geom = new THREE.Geometry();    
    var material = new THREE.PointCloudMaterial({size: 1, vertexColors: true, color: 0xffffff});    

    for (i = 0; i < group[n]; i++) {

        if (geom.vertices.length < group[n]){

            var particle = new THREE.Vector3(

                Math.random() * screens[n].bottomrightback.x + screens[n].bottomleftfront.x,                    
                Math.random() * screens[n].toprightback.y + screens[n].bottomleftfront.y,                   
                Math.random() * screens[n].bottomrightfront.z + screens[n].bottomleftfront.z);

           geom.vertices.push(particle);       
           geom.colors.push(new THREE.Color(Math.random() * 0x00ffff));             
        }
    }

    var system = new THREE.PointCloud(geom, material);
    scene.add(system);

    **// something something matrix Euler something?**


n++
}           
while (n < numGroups);

经典雷声

我尝试设置每个云对象的旋转角度，使其边缘相交，但它们只会绕世界中心旋转。

的确，它们仅绕0,0,0旋转。然后，简单的解决方案是将对象移到中心，旋转它，然后将其移回到其原始位置。

例如（代码未经测试，因此可能需要一些调整）：

var m = new THREE.Matrix4();

var movetocenter = new THREE.Matrix4();
movetocenter.makeTranslation(-x, -y, -z);

var rotate = new THREE.Matrix4();
rotate.makeRotationFromEuler(); //Build your rotation here

var moveback = new THREE.Matrix4();
moveback .makeTranslation(x, y, z);

m.multiply(movetocenter);
m.multiply(rotate);
m.multiply(moveback); 

//Now you can use geometry.applyMatrix(m)