three.js所擠出的2D面，而圍繞擠壓軸

我期待在擠出過程中旋轉的造型展現喜歡這裏three.js所擠出的2D面，而圍繞擠壓軸

這裏

繞Z軸的「扭曲」的效果

我在此產生扭曲立方體嘗試低於：

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

顯然，這隻能沿着z軸伸出形狀。使用geometry.applyMatrix（）;似乎不可能將立方體剪切成圍繞z軸的扭曲。

這可能是唯一的方法是在擠壓時將某些東西硬編碼到2D形狀的法線，雙法線和切線。我相信答案在於extrudePath - THREE.CurvePath和frames-THREE.TubeGeometry.FrenetFrames，但不確定是否有更簡單的方法。

任何有關此事的幫助將不勝感激！

來源

2016-09-20 henryJack

爲了實現這一「扭曲效應」你最有可能將不得不使用如[MOD3]一個單獨的庫（https://github.com/foo123/MOD3）。它適用於Three.js並具有「Twist」修飾符。 – guardabrazo

謝謝@guardabrazo - 開發MOD3似乎已停止。你知道任何仍處於積極發展階段的東西嗎？ – henryJack

如果知道頂點創建面的z值，則可以將網格扭轉一定的螺旋角。在這種情況下，我們都旋轉AZ與價值，如果寬度/ 2一定角度的頂點......

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

您還可以通過...

```功能taperMesh錐形網（目，比例因子，寬度）{

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

來源

2016-09-29 10:22:26 henryJack

three.js所擠出的2D面，而圍繞擠壓軸

回答

相關問題