ThreeJS 克隆三角形然后单独旋转它们答案

【问题标题】：ThreeJS cloning triangles then rotating them individuallyThreeJS 克隆三角形然后单独旋转它们
【发布时间】：2026-02-01 07:45:01
【问题描述】：

我有以下代码：https://pastebin.com/sxfmAAz9（使用 pastebin 因为我不想分散 OP 的注意力，这有点长）

基本上，我正在创建一个平面并将其拆分为 widthsegments 和 heightsegments 以创建一个尖顶平面。然后我迭代每个面，我试图复制那个面，这样我就可以让它上升并慢慢旋转，让它看起来像是从平面上出来的。我已经成功地做到了这一点，但是当我旋转三角形时，它们看起来像是组合在一起，就像它们是同一个网格的一部分，即使我正在为每个面创建一个新的网格。以下是我创建三角形的方法：

if (numberOfTriangles < possibleFloatingTriangles) {
  var randomIndices = [];

  while (randomIndices.length < possibleFloatingTriangles - numberOfTriangles) {
    var randomNumber = Math.ceil(Math.random()*150);
    if (randomIndices.indexOf(randomNumber) > -1) continue;
    randomIndices[randomIndices.length] = randomNumber;
  }

  scene.traverse(function (node) {
    if (numberOfTriangles >= possibleFloatingTriangles) return;

    if (node instanceof THREE.Mesh && node.geometry.type === "PlaneGeometry") {
      for(var i = 0; i < node.geometry.faces.length; i++) {
        if(randomIndices.indexOf(i) != -1) {
          var currentFace = node.geometry.faces[i];
          var triangleGeometry = new THREE.Geometry();

          // I assumed they might be getting referenced here initially hence the clone()
          var p1 = node.geometry.vertices[currentFace.a].clone();
          var p2 = node.geometry.vertices[currentFace.b].clone();
          var p3 = node.geometry.vertices[currentFace.c].clone();

          triangleGeometry.vertices.push(p1);
          triangleGeometry.vertices.push(p2);
          triangleGeometry.vertices.push(p3);

          var face = new THREE.Face3(0,2,1);

          triangleGeometry.faces.push(face);

          var triangleMaterial = new THREE.MeshPhongMaterial({ color: 0xff0000, wireframe: showWireframe, specular: 0x0, morphTargets: true, flatShading: true, side: THREE.DoubleSide });
          var triangle = new THREE.Mesh(triangleGeometry, triangleMaterial);

          triangle.rotation.set(-Math.PI/2, Math.PI/2000, Math.PI); ;

          scene.add(triangle);
        }
      }
    }
  }
}

我怎样才能使我从平面上复制的单个三角形网格围绕它们自己旋转？我不希望它们分组，我希望每个三角形都是独立的。现在所有三角形都表现得好像它们是同一个网格的一部分，如果我旋转它们各自的几何图形，它看起来好像我正在旋转它们所在的平面。

【问题讨论】：

标签： javascript 3d three.js

【解决方案1】：

这是因为每个三角形的原点仍在0, 0, 0。您正在围绕同一个轴心点旋转所有三角形，给人的印象是它们都是相互连接的。您需要做的是在几何体上使用translate 将其顶点放置在原点周围，然后通过将网格的position 更改回其原始值将其返回到原始位置：

例如，假设您有一个三角形要围绕点 [5, 3, 0] 旋转：

// First, translate geometry to origin
triangleGeometry.translate(-5, -3, 0);
var triangleMaterial = new THREE.MeshPhongMaterial({ color: 0xff0000, wireframe: showWireframe, specular: 0x0, morphTargets: true, flatShading: true, side: THREE.DoubleSide });
var triangle = new THREE.Mesh(triangleGeometry, triangleMaterial);
// Then move mesh back to its starting position
triangle.position.set(5, 3, 0);

你如何计算每个三角形的中心，我会留给你:)

【讨论】：