Three.js extrudieren 2d Gesicht während einer Drehung um Extrusions Achse

Question

Ich suche eine Form während der Extrusion zu drehen, um eine „Verdrehung“ -Effekt um die Z-Achse zu zeigen, wie hier

und hier

Mein Versuch, diese verdrehten Würfel zu generieren ist unter:

var squareShape = new THREE.Shape(); 
squareShape.moveTo(10,0); 
squareShape.lineTo(0,10); 
squareShape.lineTo(-10,0); 
squareShape.lineTo(0,-10); 
squareShape.lineTo(10,0); 


var extrudeSettings={amount:10, bevelEnabled:false}; 
var geometry = new THREE.ExtrudeGeometry(gearShape, extrudeSettings); 

Offensichtlich extrudiert dies nur die Form gerade entlang der z-Achse. Es scheint nicht möglich, den Würfel mit geometry.applyMatrix();

Es kann sein, dass der einzige Weg dies zu tun ist, etwas in die Normalen, Bi-Normalen und Tangenten der 2D-Form zu programmieren, während es extrudiert wird. Ich glaube, die Antwort liegt innerhalb von extrudePath - THREE.CurvePath und frames-THREE.TubeGeometry.FrenetFrames, aber ich bin mir nicht sicher, ob es eine einfachere Methode gibt.

Jede Hilfe zu diesem Thema würde sehr geschätzt werden!

Answer 1

Sie können das Netz um einen bestimmten Helixwinkel drehen, wenn Sie den Z-Wert kennen, mit dem die Scheitelpunkte das Gesicht erzeugen. In diesem Fall drehen wir alle Ecken mit z-Wert, wenn Breite/2 um einen bestimmten Winkel ...

function twistMesh(mesh, helixAngle, width) { for (var i = 0; i < mesh.geometry.vertices.length; i++) { if (mesh.geometry.vertices[i].z == width/2.0) { var updateX = mesh.geometry.vertices[i].x * Math.cos(helixAngle) - mesh.geometry.vertices[i].y * Math.sin(helixAngle); var updateY = mesh.geometry.vertices[i].y * Math.cos(helixAngle) + mesh.geometry.vertices[i].x * Math.sin(helixAngle); mesh.geometry.vertices[i].x = updateX; mesh.geometry.vertices[i].y = updateY; }
} return mesh; }

Sie auch das Netz verjüngen können durch ...

`` `Funktion taperMesh (Mesh, scalefactor, Breite) {

for (var i = 0; i < mesh.geometry.vertices.length; i++) { 
    if (mesh.geometry.vertices[i].z == width/2.0) { 
    var updateX = mesh.geometry.vertices[i].x * scaleFactor; 
    var updateY = mesh.geometry.vertices[i].y * scaleFactor; 

    mesh.geometry.vertices[i].x = updateX; 
    mesh.geometry.vertices[i].y = updateY; 

    } else { 
     } 
    } 
    return mesh; 
}```