Three.js 在绕挤出轴旋转的同时挤出 2d 面 [英] Three.js extrude 2d face whilst rotating about extrusion axis
问题描述
我希望在挤压过程中旋转一个形状以显示像这里这样的关于 Z 轴的扭曲"效果
I'm looking to rotate a shape during extrusion to show a "twisting" effect about the Z-axis like here
这里
我尝试生成这个扭曲的立方体如下:
My attempt at generating this twisted cube is below:
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 轴的扭曲;
Obviously this only extrudes the shape straight along the z axis. Is doesn't seem possible to shear the cube into a twist about the z axis using geometry.applyMatrix( );
唯一的方法可能是在挤出时将某些内容硬编码到 2D 形状的法线、双法线和切线中.我相信答案在于 extrudePath — THREE.CurvePath 和 frames-THREE.TubeGeometry.FrenetFrames 但不确定是否有更简单的方法.
It may be that the only way to do this is to hard code something into the normals, bi-normals and tangents of the 2D shape whilst it's extruding. I believe the answer lies within extrudePath — THREE.CurvePath and frames-THREE.TubeGeometry.FrenetFrames but unsure if there is an easier method.
对此事的任何帮助将不胜感激!
Any help on this matter would be greatly appreciated!
推荐答案
如果您知道顶点创建面的 z 值,则可以将网格扭曲某个螺旋角.在这种情况下,如果 width/2 旋转某个角度,我们使用 z 值旋转所有顶点...
You can twist the mesh by a certain helix angle if you know the z value at which the vertices create the face. In this case we rotate all the vertices with a z value if width/2 by a certain angle...
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;
}
您还可以通过...使网格逐渐变细
You can also taper the mesh by...
function taperMesh(mesh, scaleFactor, 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 * scaleFactor;
var updateY = mesh.geometry.vertices[i].y * scaleFactor;
mesh.geometry.vertices[i].x = updateX;
mesh.geometry.vertices[i].y = updateY;
} else {
}
}
return mesh;
}
这篇关于Three.js 在绕挤出轴旋转的同时挤出 2d 面的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!