从多个元素生成three.js中的形状

Question

在three.js中是否有一种方法可以从多个单独的元素(例如矩形)创建多个元素。

我附了一个例子。

我正在使用：

                for(i = 0; i<5; i++){                           


                        var rand = Math.floor(Math.random() * 50)+1000;

                            var material = new THREE.MeshBasicMaterial({
                                color : "#ff"+i+ rand,

                                side : THREE.DoubleSide,
                                transparent : true,
                                opacity : 1
                            });


                            var mesh = new THREE.Mesh( geometry, material );


                            if(angle) mesh.rotation.y = angle;


                            mesh.position.set( loop+1, 4,4);

                            scene.add( mesh ); 

                    }

当我应用旋转网格。y=角度；它没有提出我下面的设计，我宁愿得到一个十字+，因为面板旋转它是从中心，而不是从角落.

谢谢

这个

​

Answer 1

有三种方法可以实现你想要做的事情。您所面临的问题源于转换原点，正如您所注意到的，原产地默认为0,0,0位置。所以，你的选择是：

• 使用不同的转换偏移量来构建转换矩阵，这可能是简单用例的过度使用。
• 将几何图形转换为不以0,0,0为中心，例如，您可以将整个四边形(您的几何图形)向右移动，使四边形的左侧边缘与0,0,0对齐，然后，当您旋转时，左侧边缘将保持不变。
• 将网格嵌入到组中，旋转网格并平移(position.set(.))小组。

无论你走哪条路--你仍然需要处理一些三角函数，因为你需要计算下一段的位置，以便与前一段的边缘对齐。

另一种方法是构建以下类型的结构

Group[ 
   Mesh 1, 
   Mesh 2, 
   Mesh 3, 
   Group [
     Mesh 4,
     Mesh 5,
     Mesh 6,
     Group [
        Mesh 7
     ]
   ]
]

最后一组是不必要的，它的存在纯粹是为了一致性。

就我提到的三角函数而言，它是简单的Sin和Cos的东西，所以它应该很简单。下面是您需要的一些伪代码：

prevPosition, prevAngle //position and angle of previous segment
// Compute next segment transform
nextPosition.x = Math.cos(prevAngle)*segmentSize + prevPosition.x;
nextPosition.z = Math.sin(prevAngle)*segmentSize + prevPosition.z;