Here is the code snippet I am working with: https://pastebin.com/sxfmAAz9 (I'm using Pastebin to keep things concise as the code is a bit lengthy)
The goal of my project is to create a spiky plane by splitting it into widthsegments and heightsegments. After this, I iterate over each face and duplicate it to make it appear as if it's coming out of the plane with a slow rotation effect. While I have successfully achieved this, there seems to be an issue where the rotated triangles appear grouped together like part of the same mesh even though I'm creating new meshes for each face. Here's how I generate 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();
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);
}
}
}
}
}
I'm looking for a way to make each individual triangle mesh rotate around itself instead of appearing grouped together. Currently, all the triangles seem connected when rotating, giving the impression of rotating a single plane rather than separate triangles. How can I achieve the desired individually rotating triangles effect?