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屋！