ThreeJS cloning triangles then rotating them individually

Question

I have the following code: https://pastebin.com/sxfmAAz9 (using pastebin because I don't want to distract from the OP, it's a bit of a long sequence)

Basically I'm creating a plane and splitting it into widthsegments and heightsegments in order to create a spiky plane. I am then iterating over each face and I'm trying to duplicate that face so I can make it go up and rotate slowly so it looks like it's coming out of the plane. I've successfully done this however when I rotate the triangles, it looks like they're grouped together, like they're part of the same mesh even though I am creating a new mesh for every face. Here's how I am creating the triangles:

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

How can I basically make the individual triangle meshes that I duplicate from the plane rotate around themselves? I don't want them grouped, I want each triangle to be individual. Right now all triangles are behaving as if they're part of the same mesh, if I am rotating their individual geometry it looks as if I am rotating a plane where they're all situated.

Marquizzo Marquizzo · Accepted Answer · 2017-09-11T20:21:07

This is because the origin of each triangle is still at 0, 0, 0. You're rotating all triangles around the same pivot point, giving the impression that they're all connected. What you need to do is use translate on the geometry to place its vertices around the origin, and then return it to its original spot by changing the position of the mesh back to its original values:

For example, pretend you have a triangle that you want to rotate around the point [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);

How you calculate the center of each triangle, I'll leave up to you :)

ThreeJS cloning triangles then rotating them individually

1 Answers